<af:table>

af:table table table

UIComponent class: oracle.adf.view.rich.component.rich.data.RichTable
Component type: oracle.adf.RichTable

Naming container: Yes. When referring to children of this component ("partialTriggers", findComponent(), etc.), you must prefix the child's ID with this component's ID and a colon (':')

The Table is used to display tabular data. It also supports row/column selection (both single and multiple), sorting, record navigation.

Table Model

The Table component uses a model to access the data in the underlying list. The specific model class is oracle.adf.view.rich.model.CollectionModel. You may also use other model instances, e.g., java.util.List, array, and javax.faces.model.DataModel. The Table will automatically convert the instance into a CollectionModel.

Columns

The immediate children of a Table component must all be <af:column> components. Each visibleColumn component creates a separate column in the Table. For more information see the documentation for <column>

Headers

Use the "header" facet on a Column to create the column header. You can also use the "headerText" attribute to set the column header text.

DetailStamp

Use the "detailStamp" facet on the Table to include a collapsable content area for each table row. Please note that the height of the open detail area will be a set height based on the height of the detailStamp component. Adding a component that changes in height (like showDetail or panelBox) will by default produce strange results when the detailStamp component's height changes.

Selection

The selection feature of a Table lets the user select one or more rows in the list. The user can then perform some operation on the selected rows by activating an appropriate ActionSource component (e.g., by clicking on an CommandButton). Use the "rowselection" attribute on the Table to enable the selection feature.

Grid Lines and Banding

By default, the table draws both horizontal and vertical grid lines. These may be independently turned off by setting the "horizontalGridVisible" and/or "verticalGridVisible" attributes to "false".

Banding is a technique where groups of rows (or columns) are displayed with alternating background colors. This helps to differentiate between adjacent groups of rows (or columns).

The "rowBandingInterval" attribute on the Table controls how many consecutive rows form a row group (for the purposes of banding). If this is "0" all rows will have the same background color. If this is a positive number then adjacent row groups will have different background colors.

The "columnBandingInterval" attribute on the Table controls how many columns form a column group (for the purposes of banding). If this is "0" all columns will have the same background color. If this is a positive number then adjacent column groups will have different background colors.

Column Groups

<af:column> tags can be nested to produce groups of columns. The header of a column group spans across all the columns it contains.

Sorting

The Table component supports sorting columns in ascending or descending order. The table displays up/down arrow icons in the column header for sortable columns. Clicking on the up arrow sorts the column in ascending order. Clicking on the down arrow sorts the column in descending order. The ctrl+shift+up-arrow/down-arrow shortcut keys are also available to sort a column in ascending/descending order using the keyboard. The table shows a previously sorted column with a filled-in up/down arrow icon to indicate the ascending/descending sort order.

There are three requirements to enable sorting: the underlying table model must support sorting, the "sortProperty" and "sortable" attributes must be set on the column to enable the sort capability for that column.

To support sorting, the CollectionModel instance must implement the following methods:

    public boolean isSortable(String propertyName)
    public void setSortCriteria(List criteria)
    public List getSortCriteria()
            

If the underlying model is not a CollectionModel, the Table automatically examines the actual data to determine which properties are sortable. Any column that has data that implements java.lang.Comparable is sortable. This automatic support cannot be nearly as efficient as coding sorting directly into a CollectionModel (for instance, by translating the sort into an "ORDER BY" SQL clause), but is sufficient for small data sets.

To associate a column with a particular property-name to be used for sorting purposes, use the "sortProperty" attribute on the column. To enable the UI for sorting a particular column, set the "sortable" property to true. For more information see the documentation for <column>.

In the following example, both columns are sortable. Sorting the first column sorts by the "firstname" property; sorting the second column sorts by the "lastname" property.

    <af:table ...>
      <af:column sortProperty="firstname" sortable="true">
        <f:facet name="header">
          <af:outputText value="Firstname" />
        </f:facet>
        ...
      </af:column>
      <af:column>
        <f:facet name="header" sortProperty="lastname" sortable="true">
          <af:outputText value="Lastname" />
        </f:facet>
        ...
      </af:column>
    </af:table>
          

Fetch Size

The table/treeTable and tree components are virtualized. This means that not all the rows that are available for the component on the server are fetched and displayed on the client. The number of rows that are displayed on the client are just enough to fill the viewport. More rows are fetched as the user scrolls the component vertically.

"fetchSize" is the number of rows requested from the client to the server on each attempt to fill the component. So if the height of the table is small, the fetch size of 25 is sufficient to fill the component. However if the height of the component is large, there might be a need to request the data multiple times from the server. For example, if the height of the table is 600px and height of each row is 18px. You need at least 45 rows to fill the table. With a fetchSize of 25 the table has to make a request to the server 2 times to fill the table. So it is appropriate to set the fetchSize to 50.

CSS Style Restriction

"width:auto" inside inline style or style class is not supported.

"width" attribute value should not be "auto".

Attribute Notes

Examples of the "width" attribute: width="700" for 700 pixels, or width="100%" to fill up the entire width of the container. If no value is defined then the default will be 300 px.

The "rows" attribute is not currently supported for the rich renderer kit. Use inlineStyle to set the height of a table.

<af:table value="#{myManagedBean.allEmployees}"
          rowBandingInterval="1" var="emp"
          id="t1">
  <af:column id="c1">
    <f:facet name="header">
      <af:outputText value="Name" id="ot1"/>
    </f:facet>
    <af:outputText value="#{emp.ename}" id="ot2"/>
  </af:column>
  <af:column id="c2">
    <f:facet name="header">
      <af:outputText value="Department Number" id="ot3"/>
    </f:facet>
    <af:outputText value="#{emp.deptno}" id="ot4"/>
  </af:column>
</af:table>
   

Events

Supported Facets

Attributes