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
The component is meant for rendering tables. It allows choosing data from a model and obtains built-in support of Ajax updates.
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.
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.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.
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.
