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.52.  < rich:extendedDataTable >

The component for tables extending standard component <rich:dataTable> .


Table 6.223. rich : extendedDataTable attributes

Attribute NameDescription
activeClassCSS class for active row
activeRowKeyRequest scope attribute under which the activeRowKey will be accessible
ajaxKeysThis attribute defines row keys that are updated after an AJAX request
alignDeprecated. This attribute specifies the position of the table with respect to the document. The possible values are "left", "center" and "right". The default value is "left".
bgcolorDeprecated. This attribute sets the background color for the document body or table cells. This attribute sets the background color of the canvas for the document body (the BODY element) or for tables (the TABLE, TR, TH, and TD elements). Additional attributes for specifying text color can be used with the BODY element. This attribute has been deprecated in favor of style sheets for specifying background color information
bindingThe attribute takes a value-binding expression for a component property of a backing bean
borderThis attributes specifies the width of the frame around a component. Default value is "0"
captionClassSpace-separated list of CSS style class(es) that are be applied to caption for this component
captionStyleCSS style(s) is/are to be applied to caption when this component is rendered
cellpaddingThis attribute specifies the amount of space between the border of the cell and its contents. Default value is "0"
cellspacingThis attribute specifies the amount of space between the border of the cell and its contents. The attribute also specifies the amount of space to leave between cells. Default value is "0"
columnClassesComma-delimited list of CSS style classes that are be applied to the columns of this table. A space separated list of classes may also be specified for any individual column. If the number of elements in this list is less than the number of columns specified in the "columns" attribute, no "class" attribute is output for each column greater than the number of elements in the list. If the number of elements in the list is greater than the number of columns specified in the "columns" attribute, the elements at the position in the list after the value of the "columns" attribute are ignored
componentStateIt defines EL-binding for a component state for saving or redefinition
dirDirection indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left)
enableContextMenuIf set to true, table header context menu will be enabled
firstA zero-relative row number of the first row to display
footerClassSpace-separated list of CSS style class(es) that are be applied to footer for this component
frameThis attribute specifies which sides of the frame surrounding a table will be visible. Possible values: "void", "above", "below", "hsides", "lhs", "rhs", "vsides", "box" and "border". The default value is "void".
groupingColumnDefines an id of column which the data is grouped by.
headerClassSpace-separated list of CSS style class(es) that are be applied to header for this component
heightDefines a height of the component. Default value is "500px"
idEvery component may have a unique id that is automatically created if omitted
langCode describing the language used in the generated markup for this component
noDataLabelDefines label to be displayed in case there are no data rows.
onclickHTML: a script expression; a pointer button is clicked
ondblclickHTML: a script expression; a pointer button is double-clicked
onkeydownHTML: a script expression; a key is pressed down
onkeypressHTML: a script expression; a key is pressed and released
onkeyupHTML: a script expression; a key is released
onmousedownHTML: script expression; a pointer button is pressed down
onmousemoveHTML: a script expression; a pointer is moved within
onmouseoutHTML: a script expression; a pointer is moved away
onmouseoverHTML: a script expression; a pointer is moved onto
onmouseupHTML: script expression; a pointer button is released
onRowClickHTML: a script expression; a pointer button is clicked on row
onRowDblClickHTML: a script expression; a pointer button is double-clicked on row
onRowMouseDownHTML: script expression; a pointer button is pressed down on row
onRowMouseMoveHTML: a script expression; a pointer is moved within of row
onRowMouseOutHTML: a script expression; a pointer is moved away of row
onRowMouseOverHTML: a script expression; a pointer is moved onto of row
onRowMouseUpHTML: script expression; a pointer button is released on row
onselectionchangeHTML: script expression to invoke on changing of rows selection
renderedIf "false", this component is not rendered
rowClassesA comma-delimited list of CSS style classes that is applied to popup table rows. A space separated list of classes may also be specified for any individual row. The styles are applied, in turn, to each row in the table. For example, if the list has two elements, the first style class in the list is applied to the first row, the second to the second row, the first to the third row, the second to the fourth row, etc. In other words, we keep iterating through the list until we reach the end, and then we start at the beginning again
rowKeyConverterConverter for a row key object
rowKeyVarThe attribute provides access to a row key in a Request scope
rowsA number of rows to display, or zero for all remaining rows in the table
rulesThis attribute specifies which rules will appear between cells within a table. The rendering of rules is user agent dependent. Possible values: * none: No rules. This is the default value. * groups: Rules will appear between row groups (see THEAD, TFOOT, and TBODY) and column groups (see COLGROUP and COL) only. * rows: Rules will appear between rows only. * cols: Rules will appear between columns only. * all: Rules will appear between all rows and columns
selectedClassCSS class for selected rows
selectionValue binding representing selected rows
selectionModeSingle row can be selected. multi: Multiple rows can be selected. none: no rows can be selected. Default value is "single"
sortModeDefines mode of sorting. Possible values are 'single' for sorting of one column and 'multi' for some.
sortPriorityDefines a set of column ids in the order the columns could be set
stateVarThe attribute provides access to a component state on the client side
styleCSS style(s) is/are to be applied when this component is rendered
styleClassCorresponds to the HTML class attribute
tableStateValueBinding pointing at a property of a String to hold table state
titleAdvisory title information about markup elements generated for this component
valueThe current value for this component
varA request-scope attribute via which the data object for the current row will be used when iterating
widthThis attribute specifies the desired width of the entire table and is intended for visual user agents. When the value is percentage value, the value is relative to the user agent's available horizontal space. In the absence of any width specification, table width is determined by the user agent

Table 6.224. Component identification parameters

NameValue
component-typeorg.richfaces.ExtendedDataTable
component-classorg.richfaces.component.html.HtmlExtendedDataTable
component-familyorg.richfaces.ExtendedDataTable
renderer-typeorg.richfaces.ExtendedDataTableRenderer
tag-classorg.richfaces.taglib.ExtendedDataTableTag

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>
...

Example:

import org.richfaces.component.html.HtmlExtendedDataTable;

...
HtmlExtendedDataTable myTable = new HtmlExtendedDataTable();
...

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 here.

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 here.

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:


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

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 <rich:extendedDataTable> components at once:







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





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

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