<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 (':')

Table is used to display tabular data. It also supports row/column selection (both single and multiple), sorting, record navigation. Table is not meant for use as a layout component of disparate information. For more information about this, see the Accessibility Guidelines section.

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. Because of this stamping behavior, some components may not work inside the column. Most components will work without problems, for example any input and output components. If you need to use multiple components inside a cell, you can wrap them inside a panelGroupLayout component. Components that themselves support stamping are not supported, such as tables within a 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. In additon, the "rowHeader" attribute on the Column can be used to designate a column as a row header. When a row header is defined, the table will display an icon in the row header column representing the maximum severity of component level faces messages for that particular row.

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.

Detail Stamp can be selectively displayed for rows in the table by EL binding the "rendered" attribute of the "detailStamp" facet to "true" or "false". The EL binding can contain references to the table "var" attribute since during rendering it will be executed in the context of the row. Disclosure icon is displayed only for rows which have rendered="true".

Components that themselves support stamping are not supported within this facet of the table, such as table, treeTable, tree, region or carousel.

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 Button). 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.

filtering

The Table component supports filtering of data through filter fields on the top of the column headers. To support filtering, "filterModel" attribute needs to be bound to and instance of FilterableQueryDescriptor class. In addition any column that wants to support filtering must have filterable="true" set along with the sortyProperty="...". The "sortProperty" attribute is the key for the filter field in the model.

For the filtering to be model driven, ConjunctionCriterion object returned form FilterableQueryDescriptor#getFilterConjunctionCriterion method must not be null. The components created for filter fields is based on model component type meta-data. However the column "filter" can be used to override the default functionality defined at the model layer.

    <af:table ...
            filterModel="#{bindings.EmpView1Query.queryDescriptor}"
            queryListener="#{bindings.EmpView1Query.processQuery}"
            ...>
    <af:column sortProperty="Empno" filterable="true" ...>
      ...
    </af:column>
    <af:column sortProperty="Hiredate" filterable="true" ...>
      <f:facet name="filter">
        <af:inputDate value="#{bindings.EmpView1Query.queryDescriptor.filterConjunctionCriterion.criterionMap.Hiredate.value}" id="id1"/>
          <af:convertDateTime timeZone="#{myPrefs.timeZone}" pattern="#{myPrefs.pattern}"/>
        </af:inputDate>
      </f:facet>
      ...
    </af:column>
    ...
  </af:table>
          

To override a filter field with selectOneChoice component use the following.

    <af:table ...>
    <af:column sortProperty="category" filterable="true" ...>
      <f:facet >
           <af:selectOneChoice
value="#{bindings.SearchPoliciesCriteriaQuery.queryDescriptor.filterConjunctionCriterion.criterionMap.category.value}" id="socf1"
label="#{resBundle.FILTER_CATEGORY}" autoSubmit="true">
              <f:selectItems
value="#{bindings.SearchPoliciesCriteriaQuery.queryDescriptor.filterConjunctionCriterion.criterionMap.category.attribute.model}"
                                                   id="sif2"/>
            </af:selectOneChoice>
      </f:facet>
      ...
    </af:column>
    ...
  </af:table>
          

Please note that use of varstatus ("vs") property to map values from filterCriteria is deprecated since the completely model driven approach provides similar functionality. For backward compatibility, filterCriteria map simply delegates to model driven filterConjunctionCriterion. This means that use of filterCriteria map to store placeholder values( i.e items not present in a ViewCriteria) will no longer work. A workaround would be to have a transient ViewCriterion Items in the model.

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. If no value is defined then the default will be 300 px.

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

Emailable and Printable Modes

Note that when a collection is displayed in emailable or printable mode, only the collection rows currently present on the client will be included as part of the emailable or printable content. If you are looking for a way to provide all table rows, your best strategy is to provide an export data option for the collection (using an exportCollectionActionListener). However, an alternative to an export option would be to dynamically adjust the rows and fetchSize properties to a upper limit in printable mode. This would of course be subject to some good judgment. If the table contained one thousand rows, you would want to place a upper limit of maybe one hundred rows in print mode.

<af:table value="#{bindings.EmployeesView1.collectionModel}" var="row"
  emptyText="#{bindings.EmployeesView1.viewable ? 'No data to display.' : 'Access Denied.'}"
  rows="#{adfFacesContext.outputMode ne 'printable' ?  bindings.EmployeesView1.rangeSize : 100}"
  fetchSize="#{adfFacesContext.outputMode ne 'printable' ?  bindings.EmployeesView1.rangeSize : 100}"
  rowBandingInterval="0" ...
            

Geometry Management

• This component can be stretched by a parent layout component that stretches its children, e.g. panelStretchLayout.
• When stretching this component, the only valid setting for autoHeightRows is "-1" (a value of 0 will be treated as -1 when stretched).
• When NOT stretched, autoHeightRows="0" can be used to size the height to the fetch size, which is similar to dimensionsFrom="children". Please refer to 'autoHeightRows' attribute for more information.
• Use the columnStretching attribute to configure stretching of the children column components.

If the oracle.adf.view.rich.geometry.DEFAULT_DIMENSIONS context-param is set to "auto" in the project's web.xml, and the autoHeightRows value is set to 0, or is not set, the AFStretchWidth style class will be rendered for this component.

Screen Shot(s)

Table component.

Table component with editingMode attribute set to "editAll".

<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