⁠12.2. <rich:dataTable>

The <rich:dataTable> component is used to render a table, including the table's caption. It works in conjunction with the <rich:column> and <rich:columnGroup> components to list the contents of a data model.

Note

The <rich:dataTable> component does not include extended table features, such as data scrolling (including lazy Ajax loading), row selection, and column reordering. These features are available as part of the <rich:extendedDataTable> component; refer to Section 12.6, “<rich:extendedDataTable>” for further details.

⁠12.2.1. Basic usage

The value attribute points to the data model, and the var attribute specifies a variable to use when iterating through the data model.
In addition, the table requires a set of <rich:column> components to define the content of the table.

⁠12.2.2. Customizing the table

The first attribute specifies which item in the data model to start from, and the rows attribute specifies the number of items to list. The header, footer, and caption facets can be used to display text, and to customize the appearance of the table through skinning. demonstrates a simple table implementation.
The keepSaved attribute defines whether this iteration component will reset saved children's state before rendering. By default, the state is reset if there are no faces messages with severity error or higher.
⁠

Example 12.4. <rich:dataTable> example

​<rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5">
​    <f:facet name="caption">
​        <h:outputText value="United States Capitals" />
​    </f:facet>
​    <f:facet name="header">
​        <h:outputText value="Capitals and States Table" />
​    </f:facet>
​    <rich:column>
​        <f:facet name="header">State Flag</f:facet>
​            <h:graphicImage value="#{cap.stateFlag}"/>
​        <f:facet name="footer">State Flag</f:facet>
​    </rich:column>
​    <rich:column>
​        <f:facet name="header">State Name</f:facet>
​            <h:outputText value="#{cap.state}"/>
​        <f:facet name="footer">State Name</f:facet>
​    </rich:column>
​    <rich:column >
​        <f:facet name="header">State Capital</f:facet>
​            <h:outputText value="#{cap.name}"/>
​        <f:facet name="footer">State Capital</f:facet>
​    </rich:column>
​    <rich:column>
​        <f:facet name="header">Time Zone</f:facet>
​            <h:outputText value="#{cap.timeZone}"/>
​        <f:facet name="footer">Time Zone</f:facet>
​    </rich:column>
​    <f:facet name="footer">
​        <h:outputText value="Capitals and States Table" />
​    </f:facet>
​</rich:dataTable>
​
​				
​
⁠
<rich:dataTable> example

Figure 12.1. <rich:dataTable> example

For details on filtering and sorting data tables, refer to Section 12.10, “Table filtering” and Section 12.11, “Table sorting”.

⁠12.2.3. Partial updates

As <rich:dataTable> the component is based on the <a4j:repeat> component, it can be partially updated with Ajax. Refer to Section 12.1.2, “Limited views and partial updates” for details on partially updating the <rich:dataTable> component.
The <rich:dataTable> component supports master-detail markup with collapsible sub-table sections. Refer to Section 12.5, “<rich:collapsibleSubTable>” for full details on using the <rich:collapsibleSubTable> component.
Use the rows attribute to specify the number of rows to show at a time. The table is then presented in pages of rows. Pages can be navigated by using a control such as the <rich:dataScroller> component. Refer to Section 12.9, “<rich:dataScroller>” for full details on using the <rich:dataScroller> component.

⁠12.2.4. Meta-components

+The DataTable supports a number of meta-component ids that can be used as a shorthand for specifying execute and render targets. The following meta-components IDs are supported with the DataTable:
  • @scroll: The scrollable part of the table
  • @header: The table header
  • @footer: The table footer
  • @body: The table body

⁠12.2.5. JavaScript API

The <rich:dataTable> component can be controlled through the JavaScript API. The JavaScript API provides the following functions:
expandAllSubTables()
Expand any sub-tables contained in the data table.
collapseAllSubTables()
Collapse any sub-tables contained in the data table.
switchSubTable(subtableId)
Switch the expanded or collapsed state of any sub-tables contained in the data table.
filter(columnId, newFilterValue, [isClearPreviousFilters])
Filter the table based on the column specified with the columnId parameter. Use the newFilterValue parameter as the filter value. The optional isClearPreviousFilters parameter is a boolean value which, if set to true, will clear any previous filters applied to the table.
sort(columnId, [direction], [isClearPreviousSorting])
Sort the table based on the column specified with the columnId parameter. The option direction parameter specifies whether to sort in ascending or descending order. The optional isClearPreviousSorting parameter is a boolean value which, if set to true, will clear any previous sorting applied to the table.

⁠12.2.6. Reference data

  • component-type: org.richfaces.DataTable
  • component-class: org.richfaces.component.UIDataTable
  • component-family: org.richfaces.Data
  • renderer-type: org.richfaces.DataTableRenderer
  • handler-class: org.richfaces.taglib.DataTableHandler

⁠12.2.7. Style classes and skin parameters

⁠

Table 12.1. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-dt
This class defines styles for the table.
tableBackgroundColor
background-color
tableBorderWidth
border-left-width, border-top-width
tableBorderColor
border-left-color, border-top-color
.rf-dt-cap
This class defines styles for the table caption.
No skin parameters.
.rf-dt-r
This class defines styles for a table row.
No skin parameters.
.rf-dt-fst-r
This class defines styles for the first row in a table.
No skin parameters.
.rf-dt-c
This class defines styles for a table cell.
tableBackgroundColor
background-color
tableBorderWidth
border-bottom-width, border-right-width
tableBorderColor
border-bottom-color, border-right-color
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-dt-nd
This class defines styles for a node.
tableBorderWidth
border-bottom-width, border-right-width
tableBorderColor
border-bottom-color, border-right-color
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-dt-hdr
This class defines styles for a table header.
No skin parameters.
.rf-dt-hdr-fst
This class defines styles for the first header.
No skin parameters.
.rf-dt-hdr-c
This class defines styles for a header cell.
tableHeaderBackgroundColor
background-color
tableBorderWidth
border-bottom-width, border-right-width
tableBorderColor
border-bottom-color, border-right-color
tableHeaderTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-dt-shdr
This class defines styles for a table sub-header.
No skin parameters.
.rf-dt-shdr-fst
This class defines styles for the first sub-header.
No skin parameters.
.rf-dt-shdr-c
This class defines styles for a sub-header cell.
tableHeaderBackgroundColor
background-color
tableBorderWidth
border-bottom-width, border-right-width
tableBorderColor
border-bottom-color, border-right-color
tableHeaderTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-dt-ftr
This class defines styles for a table footer.
No skin parameters.
.rf-dt-ftr-fst
This class defines styles for the first footer.
No skin parameters.
.rf-dt-ftr-c
This class defines styles for a footer cell.
tableFooterBackgroundColor
background-color
tableBorderWidth
border-bottom-width, border-right-width
tableBorderColor
border-bottom-color, border-right-color
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-dt-sftr
This class defines styles for a table sub-footer.
No skin parameters.
.rf-dt-sftr-fst
This class defines styles for the first sub-footer.
No skin parameters.
.rf-dt-sftr-c
This class defines styles for a sub-footer cell.
tableFooterBackgroundColor
background-color
tableBorderWidth
border-bottom-width, border-right-width
tableBorderColor
border-bottom-color, border-right-color
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size