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.12.  < rich:extendedDataTable > available since 3.2.2

The component is meant for rendering tables and differs from the standard <rich:dataTable> component in that supports some extended features.


The <rich:extendedDataTable> component is similar to the <rich:dataTable> , but <rich:extendedDataTable> supports some extended features (see the "Key Features" section above). The data in the 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 the <rich:extendedDataTable> component supports the "filter" facet for <rich:column> . 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 in the RichFaces Developer Guide section on filtering.

In the example the "selection" attribute contains an object with selected rows.

Note:

The "height" attribute is mandatory. The default value is "500px" .

Menu on the right side of the column header is used to perform actions like 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']}"
...

The <rich:extendedDataTable> component columns can be hidden:


The "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 from standard JSF state saving mechanisms.

Example:


...
<rich:extendedDataTable tableState="#{extendedDT.tableState}">
...

Table of <rich:extendedDataTable> attributes.



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

Class (selector) nameDescriptionSkin ParametersCSS properties mapped
.extdt-empty-cellDefines styles for empty cells of the componenttableBorderWidth, tableBorderColorborder-bottom
.extdt-table-layoutDefines styles for the table layouttableBackgroundColorbackground-color
.extdt-cellDefines styles for the table cellstableBorderWidth, tableBorderColorborder-right, border-bottom
generalSizeFontfont-size
generalTextColorcolor
generalFamilyFontfont-family
.extdt-headerDefines styles for the headerheaderBackgroundColorbackground-color
.extdt-header-continueDefines styles for all header lines after the firstheaderBackgroundColorbackground-color
.extdt-headercellDefines styles for the header cellstableBorderWidth, tableBorderColorborder-right, border-bottom
generalSizeFontfont-size
headerTextColorcolor
headerWeightFontfont-weight
generalFamilyFontfont-family
.extdt-subheaderDefines styles for the subheaderadditionalBackgroundColorbackground-color
.extdt-table-filterrowDefines styles for the filter rowadditionalBackgroundColorbackground-color
tableBorderWidth, tableBorderColorborder-top
.extdt-subheadercellDefines styles for the subheader cellstableBorderWidth, tableBorderColorborder-right, border-bottom
generalSizeFontfont-size
generalTextColorcolor
generalFamilyFontfont-family
.extdt-captionDefines styles for the table captiontableBorderWidth, tableBorderColorborder-bottom
generalSizeFontfont-size
headerWeightFontfont-weight
generalTextColorcolor
generalFamilyFontfont-family
additionalBackgroundColorbackground-color
.extdt-footercellDefines styles for the footer celltableBorderWidth, tableBorderColorborder-right, border-bottom
generalSizeFontfont-size
generalTextColorcolor
headerWeightFontfont-weight
generalFamilyFontfont-family
.extdt-subfootercellDefines styles for the subfooter celltableBorderWidth, tableBorderColorborder-right, border-bottom
generalSizeFontfont-size
generalTextColorcolor
generalFamilyFontfont-family
.extdt-row-selectedDefines styles for the selected rowadditionalBackgroundColorbackground-color
.extdt-row-activeDefines styles for the active rowtabDisabledTextColorcolor


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

Some additional information about the component usage can be found on its LiveDemo page.