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

expand all

#### 6.6.12.1. Description

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

Figure 6.40. <rich:extendedDataTable> component

#### 6.6.12.2. Key Features

- 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

#### 6.6.12.3. Details of Usage

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>

    ...

Figure 6.41. <rich:extendedDataTable> component with selected multiple lines

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.

## Note:

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:

Figure 6.42. Column menu

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:

Figure 6.43. <rich:extendedDataTable> component with grouped data

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']}"

    ...

Figure 6.44. <rich:extendedDataTable> component with Drag&Drop column 'Name'

In the component <rich:extendedDataTable> columns can hidden:

Figure 6.45. <rich:extendedDataTable> component with hidden column 'Id' and 'Group'

"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}">

    ...

#### 6.6.12.4. Reference Data

Table of <rich:extendedDataTable> attributes.

Table 6.57. 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.58. Facets

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

Table 6.59. 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.60. 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.61. 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

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

#### 6.6.12.5. Relevant Resources Links

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

- Prev6.6.11. < rich:subTable > ...
- Top of page
- Front page
- Next6.6.13. < a4j:repeat > ...