6.6.10. < rich:dataTable > available since 3.0.0

### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.6.10. < rich:dataTable > available since 3.0.0

expand all

#### 6.6.10.1. Description

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

Figure 6.37. <rich:dataTable> component

#### 6.6.10.2. Key Features

- A completely skinned table and child elements

- Possibility to insert the complex subcomponents "colGroup" and "subTable"

- Possibility to update a limited set of strings with Ajax

- Sorting and filtering functionalities for a table columns

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.

#### 6.6.10.3. Details of Usage

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:

Figure 6.38. <rich:dataTable> component with facets

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.

#### 6.6.10.4. Reference Data

Table of <rich:dataTable> attributes.

Table 6.51. Component Identification Parameters

Name | Value
--- | ---
component-type | org.richfaces.DataTable
component-class | org.richfaces.component.html.HtmlDataTable
component-family | org.richfaces.DataTable
renderer-type | org.richfaces.DataTableRenderer
tag-class | org.richfaces.taglib.DataTableTag

Table 6.52. Facets

Facet | Description
--- | ---
header | Redefines the header content
footer | Redefines the footer content
caption | Defines the caption content

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

Class (selector) name | Description | Skin Parameters | CSS properties mapped
--- | --- | --- | ---
.rich-table | Defines styles for a table | tableBackgroundColor | background-color
.rich-table-cell | Defines styles for a table cell | generalSizeFont | font-size
generalTextColor | color
generalFamilyFont | font-family
.rich-table-header | Defines styles for a table header row | headerBackgroundColor | background-color
.rich-table-header-continue | Defines styles for all header lines after the first | headerBackgroundColor | background-color
.rich-table-headercell | Defines styles for a header cell | tableBorderWidth, tableBorderColor | border-right, border-bottom
headerTextColor | color
headerWeightFont | font-weight
generalSizeFont | font-size
generalFamilyFont | font-family
.rich-table-subheader | Defines styles for a column header | additionalBackgroundColor | background-color
.rich-table-thead |  | tableBorderWidth, tableBorderColor | border-bottom
.rich-table-subheadercell | Defines styles for a column header cell | tableBorderWidth, tableBorderColor | border-right
generalTextColor | color
generalSizeFont | font-size
generalFamilyFont | font-family
.rich-table-footer | Defines styles for a footer row | tableFooterBackgroundColor | background-color
.rich-table-footer-continue | Defines styles for all footer lines after the first | tableFooterBackgroundColor | background-color
.rich-table-footercell | Defines styles for a footer cell | tableBorderWidth, tableBorderColor | border-right, border-bottom
generalTextColor | color
headerWeightFont | font-weight
generalSizeFont | font-size
generalFamilyFont | font-family
.rich-table-subfooter | Defines styles for a column footer | tableSubfooterBackgroundColor | background-color
.rich-table-subfootercell | Defines styles for a column footer cell | tableBorderWidth, tableBorderColor | border-right, border-bottom
generalTextColor | color
generalSizeFont | font-size
generalFamilyFont | font-family

Table 6.54. Style classes (selectors) without skin parameters

Class name | Description
--- | ---
.rich-table-caption | Defines styles for a "caption" facet element
.rich-table-row | Defines styles for a table row
.rich-table-firstrow | Defines styles for a table's first row

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

#### 6.6.10.5. Relevant Resources Links

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.

- Prev6.6.9. < rich:datascroller > ...
- Top of page
- Front page
- Next6.6.11. < rich:subTable > ...