table &extDataTable; HtmlDataTable

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

## Creating the Component with a Page Tag

Here is a simple example as it could be used on a page:

Example:

    ...
    <rich:extendedDataTable value="#{extendedDT.dataModel}" var="edt">
           <rich:column>
             ...
           </rich:column>
    </rich:extendedDataTable>
    ...

## Creating the Component Dynamically from Java

Example:

    import org.richfaces.component.html.HtmlExtendedDataTable;
    ...
    HtmlExtendedDataTable myTable = new HtmlExtendedDataTable();
    ...

## Details of Usage

The <&extDataTable;> 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>
    ...

<&extDataTable;> component with selected multiple lines

Information about sorting and filtering can be found in RichFaces Developer Guide section on sorting.

For external filtering <&extDataTable;> 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:

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:

<&extDataTable;> 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']}"
    ...

<&extDataTable;> component with Drag&Drop column 'Name'

In the component <&extDataTable;> columns can hidden:

<&extDataTable;> 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}">
    ...

## Facets

Facets

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

## Look-and-Feel Customization

For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.

There are two ways to redefine the appearance of all <&extDataTable;> components at once:

- Redefine the corresponding skin parameters

- Add to your style sheets style classes used by a <&extDataTable;> component

## Skin Parameters Redefinition

Skin parameters redefinition for a table

Skin parameters | CSS properties
--- | ---
tableBackgroundColor | background-color

Skin parameters redefinition for a header

Skin parameters | CSS properties
--- | ---
headerBackgroundColor | background-color

Skin parameters redefinition for a footer

Skin parameters | CSS properties
--- | ---
tableFooterBackgroundColor | background-color

Skin parameters redefinition for a column header

Skin parameters | CSS properties
--- | ---
additionalBackgroundColor | background-color

Skin parameters redefinition for a column footer

Skin parameters | CSS properties
--- | ---
tableSubfooterBackgroundColor | background-color

Skin parameters redefinition for cells

Skin parameters | CSS properties
--- | ---
generalSizeFont | font-size
generalTextColor | color
generalFamilyFont | font-family

## Definition of Custom Style Classes

On the screenshot there are classes names that define styles for component elements.

<&extDataTable;> class names

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

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

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

An example of use the styles for component <&extDataTable;> is similar to <rich:dataTable>

## Relevant resources links

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