Create new RichFaces Documentation Jira issue

This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.orgCommunity Documentation

6.6.10.  < rich:dataTable > available since 3.0.0

expand all
6.6.10.1. Description
6.6.10.2. Key Features
6.6.10.3. Details of Usage
6.6.10.4. Reference Data
6.6.10.5. Relevant Resources Links

The component is meant for rendering tables. It allows choosing data from a model and obtains built-in support of Ajax updates.


Extended table features, such as scrollable data, row selection, and column re-ordering, require the use of the <rich:extendedDataTable> component instead of <rich:dataTable>. Refer to the <rich:extendedDataTable> section for details on the differences between the two components.

The <rich:dataTable> component is similar to the <h:dataTable> one, except Ajax support and skinnability. Ajax support is possible, because the component was created basing on the <a4j:repeat> component and as a result it could be partially updated with Ajax. The "ajaxKeys" attribute allows to define row keys which are updated after an Ajax request. You can find an example which demonstrate the usage of the "ajaxKeys" attributes for data iteration components in the RichFaces Cookbook article.

Note:

If you need to render a table with some extended features like data scrolling, hiding the columns with the help of the context menu and some others, then use the <rich:extendedDataTable> component instead.

The component allows to use "header" , "footer" and "caption" facets for output. See an example below:

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

This is a result:


Information about sorting and filtering you can find in the corresponding section.

You can find information how to remove header's gradient in the "How to remove rich:dataTable header background " article.

Table of <rich:dataTable> attributes.



Table 6.53. Style classes (selectors) with the corresponding skin parameters

Class (selector) nameDescriptionSkin ParametersCSS properties mapped
.rich-tableDefines styles for a tabletableBackgroundColorbackground-color
.rich-table-cellDefines styles for a table cellgeneralSizeFontfont-size
generalTextColorcolor
generalFamilyFontfont-family
.rich-table-headerDefines styles for a table header rowheaderBackgroundColorbackground-color
.rich-table-header-continueDefines styles for all header lines after the firstheaderBackgroundColorbackground-color
.rich-table-headercellDefines styles for a header celltableBorderWidth, tableBorderColorborder-right, border-bottom
headerTextColorcolor
headerWeightFontfont-weight
generalSizeFontfont-size
generalFamilyFontfont-family
.rich-table-subheaderDefines styles for a column headeradditionalBackgroundColorbackground-color
.rich-table-thead tableBorderWidth, tableBorderColorborder-bottom
.rich-table-subheadercellDefines styles for a column header celltableBorderWidth, tableBorderColorborder-right
generalTextColorcolor
generalSizeFontfont-size
generalFamilyFontfont-family
.rich-table-footerDefines styles for a footer rowtableFooterBackgroundColorbackground-color
.rich-table-footer-continueDefines styles for all footer lines after the firsttableFooterBackgroundColorbackground-color
.rich-table-footercellDefines styles for a footer celltableBorderWidth, tableBorderColorborder-right, border-bottom
generalTextColorcolor
headerWeightFontfont-weight
generalSizeFontfont-size
generalFamilyFontfont-family
.rich-table-subfooterDefines styles for a column footertableSubfooterBackgroundColorbackground-color
.rich-table-subfootercellDefines styles for a column footer celltableBorderWidth, tableBorderColorborder-right, border-bottom
generalTextColorcolor
generalSizeFontfont-size
generalFamilyFontfont-family


You can find all necessary information about style classes redefinition in Definition of Custom Style Classes section.

On the component LiveDemo page you can see the example of <rich:dataTable> usage and sources for the given example.

The article about <rich:dataTable> flexibility can be found in the "rich:dataTable Flexibility " article .

Article on dataTable skinability provides you a simple example of skinnability.

More information about using <rich:dataTable> and <rich:subTable> could be found on the RichFaces Users Forum.

How to use <rich:dataTable> and <rich:datascroller> in a context of Extended Data Model see on the RichFaces Users Forum.

From "rich:dataTable border to 0px " article you'll figure out how to set rich:dataTable border to 0px

dataTable Background Out tells you how to remove rich:dataTable header background

"Richfaces Datatable Checkbox" article helps you to create a Richface Datatable with Checkbox Column and an CheckAll Checkbox in Header.