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 for tables extending standard component <rich:dataTable> .
Possibility to scroll data
Possibility to add an attribute to set the kind of selection (none, single line or multiple lines)
Possibility to change the sequence of the displayed columns by dragging the column-header to another position
Possibility to show or hide columns by selecting or deselecting them in a context menu
Possibility to save the current settings (visible columns, column width, sequence of the columns) to be reused the next time the page will be shown
Possibility to combine rows to groups
The <rich:extendedDataTable> component is similar to the <rich:dataTable> . The data in component is scrollable. You can also set the type of selection ( "none", "single" or "multi" lines). Selection of multiple lines is possible using Shift and Ctrl keys.
Here is an example:
Example:
...
<rich:extendedDataTable id="edt" value="#{extendedDT.dataModel}" var="edt" width="500px" height="500px" selectedClass="dataTableSelectedRow" sortMode="single" selectionMode="multi" selection="#{extendedDT.selection}" rowKeyVar="rkvar" tableState="#{extendedDT.tableState}">
<rich:column id="id" headerClass="dataTableHeader" width="50" label="Id" sortable="true" sortBy="#{edt.id}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
<f:facet name="header">
<h:outputText value="Id" />
</f:facet>
<h:outputText value="#{edt.id}" />
</rich:column>
<rich:column id="name" width="300" headerClass="dataTableHeader" label="Name" sortable="true" sortBy="#{edt.name}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon" filterBy="#{edt.name}" filterEvent="onkeyup" visible="false">
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{edt.name}" />
</rich:column>
<rich:column id="date" width="100" headerClass="dataTableHeader" label="Date" sortable="true" comparator="#{extendedDT.dateComparator}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
<f:facet name="header">
<h:outputText value="Date" />
</f:facet>
<h:outputText value="#{edt.date}"><f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" />
</h:outputText>
</rich:column>
<rich:column id="group" width="50" headerClass="dataTableHeader" label="Group" sortable="true" sortBy="#{edt.group}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
<f:facet name="header">
<h:outputText value="Group" />
</f:facet>
<h:outputText value="#{edt.group}" />
</rich:column>
</rich:extendedDataTable>
...
Information about sorting and filtering can be found in RichFaces Developer Guide section on sorting.
For external filtering <rich:extendedDataTable> component supports "filter" facet for <rich:column> component. In this facet you can define your own controls for filtering which will be positioned like built-in filter controls. Rest of the filter scenario is the same as described RichFaces Developer Guide section on filtering.
In the example "selection" attribute contains object with selected rows.
Attribute "height" is mandatory. The default value is "500px" .
Menu on the right side of the column header is used to perform action: sorting, grouping, hiding columns.
This is an example:
After selecting a "Group by this column" option, you can see the data grouped. You can collapse and expand groups by clicking on a group header.
This is an example:
The "label" attribute in <rich:column> sets the name of the column, which is used when dragging columns (in drag window) and in context menu, in "Columns" submenu.
Example:
...
<rich:column id="name" label="#{msg['name']}"
...
In the component <rich:extendedDataTable> columns can hidden:
"tableState" attribute can be used to bind state of the table (column width, column position, visible, sequence, grouping...) to a backing-bean string property, for a later used. This state can be for example saved to a database, and it is different form standard JSF state saving mechanisms.
Example:
...
<rich:extendedDataTable tableState="#{extendedDT.tableState}">
...
Table of <rich:extendedDataTable> attributes.
Table 6.59. Component Identification Parameters
| Name | Value |
|---|---|
| component-type | org.richfaces.ExtendedDataTable |
| component-class | org.richfaces.component.html.HtmlExtendedDataTable |
| component-family | org.richfaces.ExtendedDataTable |
| renderer-type | org.richfaces.ExtendedDataTableRenderer |
| tag-class | org.richfaces.taglib.ExtendedDataTableTag |
Table 6.60. Facets
| Facet | Description |
|---|---|
| header | Redefines the header content |
| footer | Redefines the footer content |
| caption | Redefines the caption content |
Table 6.61. Classes names that define a whole component appearance
| Class name | Description |
|---|---|
| rich-extdt | Defines styles for all table |
| rich-extdt-caption | Defines styles for a "caption" facet element |
Table 6.62. Classes names that define header and footer elements
| Class name | Description |
|---|---|
| rich-extdt-header | Defines styles for a table header row |
| rich-extdt-header-continue | Defines styles for all header lines after the first |
| rich-extdt-subheader | Defines styles for a column header |
| rich-extdt-footer | Defines styles for a footer row |
| rich-extdt-footer-continue | Defines styles for all footer lines after the first |
| rich-extdt-subfooter | Defines styles for a column footer |
Table 6.63. Classes names that define rows and cells of a table
| Class name | Description |
|---|---|
| rich-extdt-headercell | Defines styles for a header cell |
| rich-extdt-subheadercell | Defines styles for a column header cell |
| rich-extdt-cell | Defines styles for a table cell |
| rich-extdt-row | Defines styles for a table row |
| rich-extdt-firstrow | Defines styles for a table start row |
| rich-extdt-footercell | Defines styles for a footer cell |
| rich-extdt-subfootercell | Defines styles for a column footer cell |
| rich-extdt-group-cell | Defines styles for a grouping row cell |
Some additional information about usage of component can be found on its LiveDemo page.
