webuijsf
Tag tableColumn


Use the webuijsf:tableColumn tag to define the column cells of a table, inside a webuijsf:table tag.  A webuijsf:tableRowGroup must include at least one webuijsf:tableColumn tag.

The webuijsf:table tag is used to define the structure and actions of the table, and is a container for webuijsf:tableRowGroup which define the rows of a table.  The webuijsf:tableRowGroup tag is a container for webuijsf:tableColumn tags, which are used to define the columns of the table.  The documentation for the webuijsf:table tag contains detailed information about the table component.  This page provides details about how to define table columns only.

HTML Elements and Layout

The tableColumn component is used to define attributes for XHTML <td> elements, which are used to display table data cells. However, the rendering of column headers and footers is handled by the tableRowGroup component. The diagram shows the table layout, and highlights the areas that are defined with the webuijsf:tableColumn tag.


Title Bar 
Action Bar (top)  
Column Header (specified with headerText attribute or header facet in first webuijsf:tableColumn tag in  webuijsf:tableRowGroup tag) Column Header (specified with headerText attribute or header facet in second webuijsf:tableColumn tag in webuijsf:tableRowGroup tag)
Group Header Bar 
Table data




Table data
Column Footer (specified with footerText attribute or footer facet in first webuijsf:tableColumn tag in webuijsf:tableRowGroup tag) Column Footer (specified with footerText attribute or footer facet in second webuijsf:tableColumn tag in webuijsf:tableRowGroup tag)
Group Footer Bar 
Table Column Footer (specified with tableFooterText attribute or tableFooter facet in webuijsf:tableColumn tag) Table Column Footer (specified with tableFooterText attribute or tableFooter facet in webuijsf:tableColumn tag)
Action Bar (bottom) 
Footer

Column Header

The Column Header area displays a header for each table column.  If you specify the text of a column header with the headerText attribute in the webuijsf:tableColumn tag, the default implementation of the header is rendered. You can specify a separate component to provide column header content by using the header facet, which overrides the headerText attribute.  You can add extra HTML code to the header's rendered <td> element with the extraHeaderHtml attribute.

The following webuijsf:tableColumn attributes can be used to change the appearance and behavior for sorting of the Column Header:

Column Footer

The Column Footers area displays a footer for each table column. If you specify the text of a column footer with the footerText attribute in the webuijsf:tableColumn tag, the default implementation of the footer is rendered. You can specify a separate component to provide footer content by using the footer facet, which overrides the footerText attribute.  You can add extra HTML code to the footer's rendered <td> element with the extraFooterHtml attribute.

Table Column Footer

The Table Column Footers area displays column footers at the bottom of the table. The table column footers are useful in tables with multiple groups of rows. If you specify the text of table column footers with the tableFooterText attribute, the default implementation of the footer is rendered.  You can specify a separate component to provide the content for a table column footer by using the tableFooter facet, which overrides the tableFooterText attribute.  You can add extra HTML code to the table footer's rendered <td> element with the extraTableFooterHtml attribute.

Alignment and Formatting of Cells

In addition to defining the headers and footers for columns, the webuijsf:tableColumn tag can be used to set other aspects of the table's appearance and  behavior. 

The following attributes affect the alignment of table cells:
Attributes that can be used to make the column headers more accessible for adaptive technologies include:
Attributes that affect other aspects of cells include:

Selection Column

To make table rows selectable, the first column of the table should display only checkboxes or radio buttons that the user clicks to select the row. When you set the selectId attribute in the webuijsf:tableColumn tag and include a webuijsf:checkbox or webuijsf:radioButton tag as a child of the webuijsf:tableColumn tag, the first column is rendered appropriately.  See the Select Single Row example for more information.

Facets

The webuijsf:tableColumn tag supports the following facets, which allow you to customize the layout of the component.

Facet Name
Table Item Implemented by the Facet
footer         
Footer that is displayed at the bottom of the column within the group of rows. The footer applies to the column of cells that are defined by the webuijsf:tableColumn tag.  This facet can be used to replace the default footer for the column.
header Header that applies to the column of cells that are defined by the webuijsf:tableColumn tag. This facet can be used to replace the default header for the column.
tableFooter
Footer that is displayed at the bottom of the table, below the last group of rows, above the Action Bar and overall table footer. The table footer content should apply to the column for all the groups of rows in the table.  This facet can be used to replace the default table footer for the column.

Client Side JavaScript Functions

See the webuijsf:table tag's JavaScript documentation.  The same functions are used for the webuijsf:tableColumn tag.

Examples

The following examples use a backing bean called TableBean, which is shown in the webuijsf:table tag documentation. Utility classes used in the examples are included in this page, after the examples.  Additional examples are shown in the webuijsf:table and webuijsf:tableRowGroup documents.

All examples assume that the webuijsf:table tag is contained within an HTML <form> element so that actions can submit form data.

Examples in this file:

Example 1: Sortable Table

Example 2: Select Single Row

Example 3: Select Multiple Rows

Example 4: Hidden Selected Rows

Example 5: Spacer Columns

Example 6: Empty Cells

Example 7:  Embedded Actions

Example 8: Alarms

Example 9: Multiple Column Headers and Footers

Supporting files:

TableBean backing bean in webuijsf:table documentation

Utility classes in webuijsf:table documentation

Example 1: Sortable Table

This example shows how to implement table sorting, and uses the TableBean and Name.java code shown in the webuijsf:table documentation. Notice that the webuijsf:table tag includes the clearSortButton attribute to enable users to clear any sorts applied to the table.

The value binding objects that you assign to the sort attribute in webuijsf:tableColumn must be the proper data type for sorting to work as expected. For example, you should not use String objects for numeric data because the digits will be sorted according to their ASCII values. Sorting the numbers as strings causes the number 2 to be displayed before the number 11, for example.  Be sure to sort using objects such as Number, Character, Date, Boolean, etc.


You can use a FieldKey id or value binding to define criteria for sorting the contents of TableDataProvider. However, when sorting a column of checkboxes or radio buttons, you must use a value binding because values are external to the data (i.e., TableDataProvider does not contain FieldKey ids for a selected checkbox value). 

User interface guidelines recommend not setting a default initial sort. However, if you want to set a default initial sort, you can do so by using the addSort(SortCriteria) method of TableRowGroup. When the table is rendered, the data is sorted and the primary sort column is highlighted. 


<!-- Sortable Table -->
<webuijsf:table id="table1"
    clearSortButton="true"
    sortPanelToggleButton="true"
    title="Sortable Table">
  <webuijsf:tableRowGroup id="rowGroup1"
      sourceData="#{TableBean.groupB.names}" sourceVar="name">
    <webuijsf:tableColumn id="col1"
        alignKey="last"
        headerText="Last Name"
        rowHeader="true"
        sort="last">
      <webuijsf:staticText text="#{name.value.last}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col2"
        alignKey="first"
        headerText="First Name"
        sort="first">
      <webuijsf:staticText text="#{name.value.first}"/>
    </webuijsf:tableColumn>
  </webuijsf:tableRowGroup>
</webuijsf:table>

Example 2: Select Single Row

This example shows a column of radioButton components that are used to select a single table row. Dynamic row highlighting is set by invoking an initAllRows() JavaScript function whenever the state of the radio button changes. The initAllRows() function is defined in select.js shown below. The radio button state is maintained through the selected attribute of the webuijsf:tableRowGroup tag. This example does not maintain state across paginated pages.

Note: UI guidelines recommend that items should not remain selected when they cannot be seen by the user. Using the com.sun.webui.jsf.event.TableSelectPhaseListener object ensures that rows that are hidden from view are deselected because the phase listener clears the selected state after the rendering phase. The TableSelectPhaseListener object is used in this example in Select.java in the webuijsf:table documentation.  Also refer to the JavaDoc for TableSelectPhaseListener for more information. 

<!-- Single Select Row -->
<webuijsf:table id="table1"
    deselectSingleButton="true"
    paginateButton="true"
    paginationControls="true"
    title="Select Single Row">
  <webuijsf:tableRowGroup id="rowGroup1"
      selected="#{TableBean.groupA.select.selectedState}"
      sourceData="#{TableBean.groupA.names}"
      sourceVar="name" rows="5">
    <webuijsf:tableColumn id="col0"
        onClick="setTimeout('initAllRows()', 0)"
        selectId="select"
        sort="#{TableBean.groupA.select.selectedState}">
      <webuijsf:radioButton id="select"
          name="select"
          selected="#{TableBean.groupA.select.selected}"
          selectedValue="#{TableBean.groupA.select.selectedValue}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col1"
        alignKey="last" headerText="Last Name" rowHeader="true">
      <webuijsf:staticText text="#{name.value.last}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col2" alignKey="first" headerText="First Name">
      <webuijsf:staticText text="#{name.value.first}"/>
    </webuijsf:tableColumn>
  </webuijsf:tableRowGroup>
</webuijsf:table>


select.js

This example shows the contents of the select.js file used in the example above.

// Use this function to initialize all rows displayed in the table when the
// state of selected components change (i.e., checkboxes or radiobuttons used to
// de/select rows of the table). This functionality requires the selectId
// property of the tableColumn component to be set.
//
// Note: Use setTimeout when invoking this function. This will ensure that
// checkboxes and radiobutton are selected immediately, instead of waiting for
// the onClick event to complete. For example:
//
// onClick="setTimeout('initAllRows(); disableActions()', 0)"
function initAllRows() {
    // Disable table actions by default.
    var table = document.getElementById("form1:table1");
    table.initAllRows();
}

Example 3: Select Multiple Rows

This example shows a column of checkbox components that are used to select multiple table rows. Dynamic row highlighting is set by invoking an initAllRows() JavaScript function whenever the state of the checkbox changes. The initAllRows() function is defined in  select.js in the previous example. The checkbox state is maintained through the selected attribute of the webuijsf:tableRowGroup tag. This example does not maintain state across paginated pages.

Note: UI guidelines recommend that items should not remain selected when they cannot be seen by the user. Using the com.sun.webui.jsf.event.TableSelectPhaseListener object ensures that rows that are hidden from view are deselected because the phase listener clears the selected state after the rendering phase. The TableSelectPhaseListener object is used in this example in
Select.java, shown in the webuijsf:table documentation.  Also refer to the JavaDoc for TableSelectPhaseListener for more information. 

<!-- Select Multiple Rows -->
<webuijsf:table id="table1"
    deselectMultipleButton="true"
    selectMultipleButton="true"
    paginateButton="true"
    paginationControls="true"
    title="Select Multiple Rows">
  <webuijsf:tableRowGroup id="rowGroup1"
      selected="#{TableBean.groupA.select.selectedState}"
      sourceData="#{TableBean.groupA.names}"
      sourceVar="name" rows="5">
    <webuijsf:tableColumn id="col0"
        selectId="select" sort="#{TableBean.groupA.select.selectedState}">
      <webuijsf:checkbox id="select"
          onClick="setTimeout('initAllRows()', 0)"
          selected="#{TableBean.groupA.select.selected}"
          selectedValue="#{TableBean.groupA.select.selectedValue}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col1"
        alignKey="last" headerText="Last Name" rowHeader="true">
      <webuijsf:staticText text="#{name.value.last}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col2" alignKey="first" headerText="First Name">
      <webuijsf:staticText text="#{name.value.first}"/>
    </webuijsf:tableColumn>
  </webuijsf:tableRowGroup>
</webuijsf:table>

Example 4: Hidden Selected Rows

This example is the same as Example 3: Select Multiple Rows except that it maintains state across paginated pages, and shows how to deal appropriately with the possibility of hiding rows that have been selected.  As in the previous example, the first column is a column of checkboxes that can be used to select multiple rows. The checkbox state is maintained through the selected attribute of the webuijsf:tableRowGroup tag.  Dynamic row highlighting is set by invoking an initAllRows() JavaScript function whenever the state of the checkbox changes. The initAllRows() function is defined in  select.js in the previous example.

If your table must maintain state, you must set the hiddenSelectedRows attribute to true in the webuijsf:table tag as shown in this example. The attribute causes text to be displayed in the table title and footer to indicate the number of selected rows that are currently hidden from view.  See the Select.java utility class in the webuijsf:table documentation.

<!-- Hidden Selected Rows -->
<webuijsf:table id="table1"
    deselectMultipleButton="true"
    deselectMultipleButtonOnClick="setTimeout('disableActions()', 0)"
    hiddenSelectedRows="true"
    paginateButton="true"
    paginationControls="true"
    selectMultipleButton="true"
    selectMultipleButtonOnClick="setTimeout('disableActions()', 0)"
    title="Hidden Selected Rows">
  <webuijsf:tableRowGroup id="rowGroup1"
      binding="#{TableBean.groupA.tableRowGroup}"
      selected="#{TableBean.groupA.select.selectedState}"
      sourceData="#{TableBean.groupA.names}"
      sourceVar="name" rows="5">
    <webuijsf:tableColumn id="col0"
        selectId="select"
        sort="#{TableBean.groupA.select.selectedState}">
      <webuijsf:checkbox id="select"
          binding="#{TableBean.groupA.checkbox}"
          onClick="setTimeout('initAllRows(); disableActions()', 0)"
          selected="#{TableBean.groupA.select.selected}"
          selectedValue="#{TableBean.groupA.select.selectedValue}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col1"
        alignKey="last" headerText="Last Name" rowHeader="true">
      <webuijsf:staticText text="#{name.value.last}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col2" alignKey="first" headerText="First Name">
      <webuijsf:staticText text="#{name.value.first}"/>
    </webuijsf:tableColumn>
  </webuijsf:tableRowGroup>

  <!-- Actions (Top) -->
  <f:facet name="actionsTop">
    <f:subview id="actionsTop">
      <jsp:include page="actionsTop.jsp"/>
    </f:subview>
  </f:facet>

  <!-- Actions (Bottom) -->
  <f:facet name="actionsBottom">
    <f:subview id="actionsBottom">
      <jsp:include page="actionsBottom.jsp"/>
    </f:subview>
  </f:facet>
</webuijsf:table>

Example 5: Spacer Column

This example shows how to create a blank column to use for spacing in a table. The spacer column is especially useful in two-column tables. A property table, which is used to display properties for a single object, typically includes two data columns. The first column identifies the properties of the object, and the second column displays the values for each of the properties. Because tables created with the webuijsf:table tag expand to the width of the browser window, the two data columns might become so wide that the properties and their values are not close together, and readability is reduced. To solve this problem, you can add a spacer column to one side of the table.

In the example, the third column includes the spacerColumn attribute set to true, and the width attribute set to 70%. The column has no header or footer text, and no data. This column acts to always keep the data of the first two columns in close proximity.  If a column header and footer are required, provide an empty string for the headerText and footerText attributes. Set the width attribute to a value that achieves the desired spacing.


<!-- Spacer Column -->
<webuijsf:table id="table1" title="Spacer Column">
  <webuijsf:tableRowGroup id="rowGroup1"
      sourceData="#{TableBean.groupB.names}" sourceVar="name">
    <webuijsf:tableColumn id="col1"
        alignKey="last"
        footerText="Column Footer"
        headerText="Last Name"
        rowHeader="true">
      <webuijsf:staticText text="#{name.value.last}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col2"
        alignKey="first"
        footerText="Column Footer"
        headerText="First Name">
      <webuijsf:staticText text="#{name.value.first}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col3" spacerColumn="true" width="70%"/>
  </webuijsf:tableRowGroup>
</webuijsf:table>

Example 6: Empty Cells

This example shows how to display a theme-specific icon that indicates an empty cell, when the content of a table cell is not applicable or is unexpectedly empty. UI guidelines suggest that the empty cell icon should not be used for a value that is truly null, such as an empty alarm cell or a comment field that is blank. In addition, the icon should not be used for cells that contain user interface elements such as checkboxes or drop-down lists when these elements are not applicable. Instead, the elements should not be displayed so the cell is left empty.

In this example, the emptyCell attribute is set to an expression that evaluates to true in every fifth row. In your application, it is up to you to decide how to test if the cell is truly empty. For example, you could use this syntax: emptyCell="#{name.value.last == null}"

<!-- Empty Cells -->
<webuijsf:table id="table1" title="Empty Cells">
  <webuijsf:tableRowGroup id="rowGroup1"
      selected="#{TableBean.groupB.select.selectedState}"
      sourceData="#{TableBean.groupB.names}"
      sourceVar="name" rows="5">
    <webuijsf:tableColumn id="col0"
        emptyCell="#{name.tableRow.rowId % 5 == 0}"
        selectId="select">
      <webuijsf:checkbox id="select"
          onClick="setTimeout('initAllRows()', 0)"
          selected="#{TableBean.groupB.select.selected}"
          selectedValue="#{TableBean.groupB.select.selectedValue}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col1"
        emptyCell="#{name.tableRow.rowId % 5 == 0}"
        alignKey="last"
        headerText="Last Name"
        rowHeader="true">
      <webuijsf:staticText text="#{name.value.last}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col2"
        emptyCell="#{name.tableRow.rowId % 5 == 0}"
        alignKey="first"
        headerText="First Name">
      <webuijsf:staticText text="#{name.value.first}"/>
    </webuijsf:tableColumn>
  </webuijsf:tableRowGroup>
</webuijsf:table>

Example 7: Embedded Actions

This example shows how to add embedded actions to a table. If the webuijsf:tableColumn tag contains more than one tag such as webuijsf:hyperlink that are used as embedded actions, you should set the webuijsf:tableColumn tag's embeddedActions attribute to true. This attribute causes an action separator image to be displayed between each of the rendered hyperlinks, as recommended in UI guidelines.

<!-- Embedded Actions -->
<webuijsf:table id="table1" title="Embedded Actions">
  <webuijsf:tableRowGroup id="rowGroup1"
      sourceData="#{TableBean.groupB.names}" sourceVar="name">
    <webuijsf:tableColumn id="col0" embeddedActions="true" headerText="Actions">
      <webuijsf:hyperlink id="action1"
          action="#{TableBean.groupB.actions.action}"
          text="Action 1">
        <f:param name="param" value="#{name.value.last}"/>
      </webuijsf:hyperlink>
      <webuijsf:hyperlink id="action2"
          action="#{TableBean.groupB.actions.action}"
          text="Action 2">
        <f:param name="param" value="#{name.tableRow.rowId}"/>
      </webuijsf:hyperlink>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col1"
        alignKey="last" headerText="Last Name" rowHeader="true">
      <webuijsf:staticText text="#{name.value.last}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col2" alignKey="first" headerText="First Name">
      <webuijsf:staticText text="#{name.value.first}"/>
    </webuijsf:tableColumn>
  </webuijsf:tableRowGroup>
</webuijsf:table>

Example 8: Alarms

This example shows how to add alarms to table data cells. The second webuijsf:tableColumn tag includes a webuijsf:alarm tag to render the alarm icon. The webuijsf:tableColumn tag's severity  attribute is set to true, which causes the table data cell to appear highlighted according to level of severity.  Note also that the column is set to sort on the severity of the alarms. See the TableBean backing bean and  Name.java utlity class example in the webuijsf:table documentation for the model data.

<!-- Alarms -->
<webuijsf:table id="table1" title="Alarms">
  <webuijsf:tableRowGroup id="rowGroup1"
      sourceData="#{TableBean.groupB.names}" sourceVar="name">
    <webuijsf:tableColumn id="col1"
        alignKey="last"
        headerText="Last Name"
        rowHeader="true"
        sort="last">
      <webuijsf:staticText text="#{name.value.last}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col2"
        alignKey="first"
        headerText="First Name"
        severity="#{name.value.severity}"
        sort="alarm">
      <webuijsf:alarm id="alarm" severity="#{name.value.severity}" text="#{name.value.first}"/>
    </webuijsf:tableColumn>
  </webuijsf:tableRowGroup>
</webuijsf:table>

Example 9: Multiple Column Headers & Footers

This example shows how to use nested tableColumn components to create multiple headers and footers. The column header of the parent tableColumn component will span the nested tableColumn children. Not all attributes are supported in this configuration. Typically, only the header, footer, tableFooter, and sort would apply to a header and spaning multuple columns. Sorting is supported, but is recommended only for tableColumn children. Further, nesting tableColumn components will render; however, the styles used here support one level of nexting.

This example shows how to use nested webuijsf:tableColumn tags to create multiple headers and footers. The third webuijsf:tableColumn (col3) contains four nested columns col3a, col3b, col3c, and col3d. The column header specified in col3 spans the four nested columns.  However, not all webuijsf:tableColumn attributes are supported when the tags are nested. Typically, only the header, footer, tableFooter, and sort would apply to a header and spaning multiple columns. Sorting in the parent tableColumn is supported, but for usability, sorting is recommended only for tableColumn children. In addition, nesting of more than one level of tableColumn components will render, but the CSS styles only support one level of nesting.   

<!-- Multiple Headers &amp; Footers -->
<webuijsf:table id="table1"
    clearSortButton="true"
    deselectMultipleButton="true"
    deselectMultipleButtonOnClick="setTimeout('disableActions()', 0)"
    footerText="Table Footer"
    paginateButton="true"
    paginationControls="true"
    selectMultipleButton="true"
    selectMultipleButtonOnClick="setTimeout('disableActions()', 0)"
    sortPanelToggleButton="true"
    title="Multiple Headers &amp; Footers">
  <webuijsf:tableRowGroup id="rowGroup1"
      binding="#{TableBean.groupA.tableRowGroup}"
      rows="#{TableBean.groupA.preferences.rows}"
      selected="#{TableBean.groupA.select.selectedState}"
      sourceData="#{TableBean.groupA.names}"
      sourceVar="name">
    <webuijsf:tableColumn id="col0"
        selectId="select"
        sort="#{TableBean.groupA.select.selectedState}">
      <webuijsf:checkbox id="select"
          onClick="setTimeout('initAllRows(); disableActions()', 0)"
          selected="#{TableBean.groupA.select.selected}"
          selectedValue="#{TableBean.groupA.select.selectedValue}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col1"
        alignKey="last"
        headerText="Last Name"
        rowHeader="true">
      <webuijsf:staticText text="#{name.value.last}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col2"
        alignKey="first" headerText="First Name">
      <webuijsf:staticText text="#{name.value.first}"/>
    </webuijsf:tableColumn>
    <webuijsf:tableColumn id="col3" headerText="Task Status">
     
      <!-- Nested Columns -->
      <webuijsf:tableColumn id="col3a"
          headerText="A"
          footerText="ColFtrA"
          sort="last"
          sortIcon="ALARM_CRITICAL_MEDIUM"
          tableFooterText="TblFtrA">
        <webuijsf:staticText text="a"/>
      </webuijsf:tableColumn>
      <webuijsf:tableColumn id="col3b"
          headerText="B"
          footerText="ColFtrB"
          sort="first"
          sortIcon="ALARM_MAJOR_MEDIUM"
          tableFooterText="TblFtrB">
        <webuijsf:staticText text="b"/>
      </webuijsf:tableColumn>
      <webuijsf:tableColumn id="col3c"
          headerText="C"
          footerText="ColFtrC"
          sortIcon="ALARM_MINOR_MEDIUM"
          tableFooterText="TblFtrC">
        <webuijsf:staticText text="c"/>
      </webuijsf:tableColumn>
      <webuijsf:tableColumn id="col3d"
          headerText="D"
          footerText="ColFtrD"
          sortIcon="ALARM_DOWN_MEDIUM"
          tableFooterText="TblFtrD">
        <webuijsf:staticText text="d"/>
      </webuijsf:tableColumn>
    </webuijsf:tableColumn>
  </webuijsf:tableRowGroup>
</webuijsf:table>

faces_config.xml Entry for Managed Beans

The examples use the TableBean managed bean, which requires the following entry to be added to the faces_config.xml file.

<!DOCTYPE faces-config PUBLIC
    '-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN'
    'http://java.sun.com/dtd/web-facesconfig_1_1.dtd'>

<faces-config>
    <managed-bean>
        <description>The backing bean for the table example</description>
        <managed-bean-name>TableBean</managed-bean-name>
        <managed-bean-class>table.TableBean</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>
</faces-config>



Tag Information
Tag Classcom.sun.webui.jsf.component.TableColumnTag
TagExtraInfo ClassNone
Body ContentJSP
Display NameNone

Attributes
NameRequiredRequest-timeTypeDescription
bindingfalsefalsejava.lang.String A ValueExpression that resolves to the UIComponent that corresponds to this tag. This attribute allows the Java bean that contains the UIComponent to manipulate the UIComponent, its properties, and its children.
extraFooterHtmlfalsefalsejava.lang.String Extra HTML code to be appended to the <td> HTML element that is rendered for the column footer. Use only code that is valid in an HTML <td> element. The code you specify is inserted in the HTML element, and is not checked for validity. For example, you might set this attribute to "nowrap=`nowrap'".
extraHeaderHtmlfalsefalsejava.lang.String Extra HTML code to be appended to the <th> HTML element that is rendered for the column header. Use only code that is valid in an HTML <td> element. The code you specify is inserted in the HTML element, and is not checked for validity. For example, you might set this attribute to "nowrap=`nowrap'".
tableFooterTextfalsefalsejava.lang.String The text to be displayed in the table column footer. The table column footer is displayed once per table, and is especially useful in tables with multiple groups of rows.
extraTableFooterHtmlfalsefalsejava.lang.String Extra HTML code to be appended to the <td> HTML element that is rendered for the table column footer. Use only code that is valid in an HTML <td> element. The code you specify is inserted in the HTML element, and is not checked for validity. For example, you might set this attribute to "nowrap=`nowrap'".
spacerColumnfalsefalsejava.lang.String Use the spacerColumn attribute to use the column as a blank column to enhance spacing in two or three column tables. When the spacerColumn attribute is true, the CSS styles applied to the column make it appear as if the columns are justified. If a column header and footer are required, provide an empty string for the headerText and footerText attributes. Set the width attribute to justify columns accordingly.
onDblClickfalsefalsejava.lang.String Scripting code executed when a mouse double click occurs over this component.
widthfalsefalsejava.lang.String Use the width attribute to specify the width of the cells of the column. The width can be specified as the number of pixels or the percentage of the table width, and is especially useful for spacer columns. This attribute is deprecated in HTML 4.0 in favor of style sheets.
selectIdfalsefalsejava.lang.String Use the selectId attribute in select columns, which contain checkboxes or radio buttons for selecting table rows. The value of selectId must match the id attribute of the checkbox or radioButton component that is a child of the tableColumn component. A fully qualified ID based on the tableColumn component ID and the selectId for the current row will be dynamically created for the <input> element that is rendered for the checkbox or radio button. The selectId is required for functionality that supports the toggle buttons for selecting rows. The selectId also identifies the column as a select column, for which the table component uses different CSS styles.
sortfalsefalsejava.lang.String Use the sort attribute to specify a FieldKey id or SortCriteria that defines the criteria to use for sorting the contents of a TableDataProvider. If SortCriteria is provided, the object is used for sorting as is. If an id is provided, a FieldIdSortCriteria is created for sorting. In addition, a value binding can also be used to sort on an object that is external to TableDataProvider, such as the selected state of a checkbox or radiobutton. When a value binding is used, a ValueBindingSortCriteria object is created for sorting. All sorting is based on the object type associated with the data element (for example, Boolean, Character, Comparator, Date, Number, and String). If the object type cannot be determined, the object is compared as a String. The sort attribute is required for a column to be shown as sortable.
onKeyPressfalsefalsejava.lang.String Scripting code executed when the user presses and releases a key while the component has focus.
severityfalsefalsejava.lang.String Use the severity attribute when including the webuijsf:alarm component in a column, to match the severity of the alarm. Valid values are described in the webuijsf:alarm documentation. When the severity attribute is set in the tableColumn, the table component renders sort tool tips to indicate that the column will be sorted least/most severe first, and the table cell appears hightlighted according to the level of severity. This functionality is overridden by the emptyCell attribute.
renderedfalsefalsejava.lang.String Use the rendered attribute to indicate whether the HTML code for the component should be included in the rendered HTML page. If set to false, the rendered HTML page does not include the HTML for the component. If the component is not rendered, it is also not processed on any subsequent form submission.
rowHeaderfalsefalsejava.lang.String

Use the rowHeader attribute to specify that the cells of the column are acting as row headers. Row headers are cells that "label" the row. For example, consider a table where the first column contains checkboxes, and the second column contains user names. The third and subsequent columns contain attributes of those users. The content of the cells in the user name column are acting as row headers. The webuijsf:tableColumn tag for the user name column should set the rowHeader attribute to true. If a table contains, for example, a system log with time stamp and log entry columns, neither column is acting as a row header, so the rowHeader attribute should not be set.

By default, most column cells are rendered by the table component with HTML <td scope="col"> elements. The exceptions are columns that contain checkboxes or radio buttons and spacer columns, all of which are rendered as <td> elements without a scope property.

When you set the rowHeader attribute, the column cells are rendered as <th scope="row"> elements, which enables adaptive technologies such as screen readers to properly read the table to indicate that the contents of these cells are headers for the rows.

idfalsetruejava.lang.StringNo Description
onKeyUpfalsefalsejava.lang.String Scripting code executed when the user releases a key while the component has focus.
onMouseUpfalsefalsejava.lang.String Scripting code executed when the user releases a mouse button while the mouse pointer is on the component.
styleClassfalsefalsejava.lang.String CSS style class(es) to be applied to the outermost HTML element when this component is rendered.
descendingfalsefalsejava.lang.String Use the descending attribute to specify that the first user-applied sort is descending. By default, the first time a user clicks a column's sort button or column header, the sort is ascending. Note that this not an initial sort. The data is initially displayed unsorted.
embeddedActionsfalsefalsejava.lang.String Set the embeddedActions attribute to true when the column includes more than one embedded action. This attribute causes a separator image to be displayed between the action links. This attribute is overridden by the emptyCell attribute.
heightfalsefalsejava.lang.String The number of pixels for the cell's height. Styles should be used to specify cell height when possible because the height attribute is deprecated in HTML 4.0.
footerTextfalsefalsejava.lang.String The text to be displayed in the column footer.
alignfalsefalsejava.lang.String Use the align attribute to specify the horizontal alignment for the content of each cell in the column. Valid values are left, center, right, justify, and char. The default alignment is left. Setting the align attribute to char causes the cell's contents to be aligned on the character that you specify with the char attribute. For example, to align cell contents on colons, set align="char" and char=":" Some browsers do not support aligning on the character.
scopefalsefalsejava.lang.String Use the scope attribute to specify that the data cells of the column are also acting as headers for rows or other columns of the table. This attribute supports assistive technologies by enabling them to determine the order in which to read the cells. Valid values include:
  • row, when the cells provide header information for the row
  • col, when the cells provide header information for the column
  • rowgroup, when the cells provide header information for the row group
  • colgroup, when the cells provide header information for the column group
stylefalsefalsejava.lang.String CSS style(s) to be applied to the outermost HTML element when this component is rendered.
sortImageURLfalsefalsejava.lang.String Absolute or relative URL to the image used for the sort button that is displayed in the column header.
onClickfalsefalsejava.lang.String Scripting code executed when a mouse click occurs over this component.
sortIconfalsefalsejava.lang.String The theme identifier to use for the sort button that is displayed in the column header. Use this attribute to override the default image.
onMouseDownfalsefalsejava.lang.String Scripting code executed when the user presses a mouse button while the mouse pointer is on the component.
toolTipfalsefalsejava.lang.String Sets the value of the title attribute for the HTML element. The specified text will display as a tooltip if the mouse cursor hovers over the HTML element.
alignKeyfalsefalsejava.lang.String Use the alignKey attribute to specify the FieldKey id or FieldKey to be used as an identifier for a specific data element on which to align the table cell data in the column. If alignKey specifies a FieldKey, the FieldKey is used as is; otherwise, a FieldKey is created using the alignKey value that you specify. Alignment is based on the object type of the data element. For example, Date and Number objects are aligned "right", Character and String objects are aligned "left", and Boolean objects are aligned "center". All columns, including select columns, are aligned "left" by default. Note that the align property overrides this value.
valignfalsefalsejava.lang.String Use the valign attribute to specify the vertical alignment for the content of each cell in the column. Valid values are top, middle, bottom, and baseline. The default vertical alignment is middle. Setting the valign attribute to baseline causes the first line of each cell's content to be aligned on the text baseline, the invisible line on which text characters rest.
noWrapfalsefalsejava.lang.String Use the noWrap attribute to disable word wrapping of this column's cells in visual browsers. Word wrap can cause unnecessary horizontal scrolling when the browser window is small in relation to the font size. Styles should be used to disable word wrap when possible because the nowrap attribute is deprecated in HTML 4.0.
onMouseOutfalsefalsejava.lang.String Scripting code executed when a mouse out movement occurs over this component.
onMouseOverfalsefalsejava.lang.String Scripting code executed when the user moves the mouse pointer into the boundary of this component.
onMouseMovefalsefalsejava.lang.String Scripting code executed when the user moves the mouse pointer while over the component.
emptyCellfalsefalsejava.lang.String Use the emptyCell attribute to cause a theme-specific image to be displayed when the content of a table cell is not applicable or is unexpectedly empty. You should not use this attribute for a value that is truly null, such as an empty alarm cell or a comment field that is blank. In addition, the image should not be used for cells that contain user interface elements such as checkboxes or drop-down lists when these elements are not applicable. Instead, the elements should simply not be displayed so the cell is left empty.
visiblefalsefalsejava.lang.String Use the visible attribute to indicate whether the component should be viewable by the user in the rendered HTML page. If set to false, the HTML code for the component is present in the page, but the component is hidden with style attributes. By default, visible is set to true, so HTML for the component HTML is included and visible to the user. If the component is not visible, it can still be processed on subsequent form submissions because the HTML is present.
onKeyDownfalsefalsejava.lang.String Scripting code executed when the user presses down on a key while the component has focus.
headerTextfalsefalsejava.lang.String The text to be displayed in the column header.

Variables
No Variables Defined.


Output Generated by Tag Library Documentation Generator. Java, JSP, and JavaServer Pages are trademarks or registered trademarks of Sun Microsystems, Inc. in the US and other countries. Copyright 2002-4 Sun Microsystems, Inc. 4150 Network Circle Santa Clara, CA 95054, U.S.A. All Rights Reserved.