12.6. <rich:extendedDataTable>

⁠12.6. `<rich:extendedDataTable>`

The <rich:extendedDataTable> component builds on the functionality of the <rich:dataTable> component, adding features such as scrolling for the table body (both horizontal and vertical), Ajax loading for vertical scrolling, frozen columns, row selection, and rearranging of columns. It also supports all the basic table features such as sorting, filtering, and paging using the <rich:dataScroller> component.

The <rich:extendedDataTable> component includes the following main attributes not included in the <rich:dataTable> component:

clientRows
frozenColumns
height
onselectionchange
selectedClass
selection
selectionMode

Note

Due to the complex mark-up involved in the <rich:extendedDataTable> component, it does not support the use of the <rich:collapsibleSubTable> component. The <rich:collapsibleSubTable> component is only available with the <rich:dataTable> component.

Similarly, complex row and column spanning using the breakRowBefore, colSpan, and rowSpan attributes is also not available with the <rich:extendedDataTable> component.

⁠12.6.1. Basic usage

Basic use of the <rich:extendedDataTable> component requires the value and var attributes, the same as with the <rich:dataTable> component. In addition, a set of columns must be included to define the table content. Refer to Section 12.2, “<rich:dataTable>” for details.

⁠12.6.2. Table appearance

As with the <rich:dataTable> component, the look of the <rich:extendedDataTable> component can be customized using the header and footer facets.

⁠12.6.3. Extended features

⁠

Example 12.10. <rich:extendedDataTable> example

This example <rich:extendedDataTable> component demonstrates horizontal and vertical scrolling and frozen columns. Each feature is detailed in this section.

<rich:extendedDataTable value="#{carsBean.allInventoryItems}"
                        var="car" id="table" frozenColumns="2"
                        style="height:300px; width:500px;" selectionMode="none">
   <f:facet name="header">
      <h:outputText value="Cars marketplace" />
   </f:facet>
   <rich:column>
      <f:facet name="header">
         <h:outputText value="vendor" />
      </f:facet>
      <h:outputText value="#{car.vendor}" />
   </rich:column>
   <rich:column>
      <f:facet name="header">
         <h:outputText value="Model" />
      </f:facet>
      <h:outputText value="#{car.model}" />
   </rich:column>
   <rich:column>
      <f:facet name="header">
         <h:outputText value="Price" />
      </f:facet>
      <h:outputText value="#{car.price}" />
   </rich:column>
   <rich:column>
      <f:facet name="header">
         <h:outputText value="Mileage" />
      </f:facet>
      <h:outputText value="#{car.mileage}" />
   </rich:column>
   <rich:column>
      <f:facet name="header">
         <h:outputText value="VIN Code" />
      </f:facet>
      <h:outputText value="#{car.vin}" />
   </rich:column>
   <rich:column>
      <f:facet name="header">
         <h:outputText value="Items stock" />
      </f:facet>
      <h:outputText value="#{car.stock}" />
   </rich:column>
   <rich:column>
      <f:facet name="header">
         <h:outputText value="Days Live" />
      </f:facet>
      <h:outputText value="#{car.daysLive}" />
   </rich:column>
</rich:extendedDataTable>

⁠12.6.3.1. Scrolling

The example table shown in Example 12.10, “<rich:extendedDataTable> example” features both horizontal and vertical scrolling. Scrolling occurs automatically when the contents of the table exceed the dimensions specified with the height and width attributes. Headers and footers remain in place and visible when the table is scrolled.

Large tables can use Ajax "lazy" loading to cache data on the client during scrolling. Use the clientRows attribute to specify the number of rows to load. The specified number of rows are loaded on the initial rendering and with every vertical scroll. If the clientRows attribute is not specified, all the rows are loaded on the client without the use of Ajax.

In addition to Ajax scrolling, the <rich:extendedDataTable> component can also be used with the <rich:dataScroller> component in the same way as a regular <rich:dataTable> component. If both the clientRows and rows attributes are included, Ajax loading occurs as defined by the clientRows attribute, but the loading is limited to the current table page as determined by the rows attribute. Refer to Section 12.9, “<rich:dataScroller>” for full details on using the <rich:dataScroller> component.

⁠12.6.3.2. Frozen columns

The example table shown in Example 12.10, “<rich:extendedDataTable> example” has the first two columns frozen so that they remain visible if the user scrolls horizontally through the table. Note that the horizontal scrollbar does not encompass these frozen columns. To freeze columns, use the frozenColumns attribute to specify the number of columns on the left-hand side of the table to freeze.

⁠12.6.3.3. Row selection

Row selection is determined by the selectionMode attribute. Setting the attribute to none allows for no row selection capability. The example table shown in Example 12.10, “<rich:extendedDataTable> example” does not allow row selection.

Setting the selectionMode attribute to single allows the user to select a single row at a time using the mouse. With the selectionMode attribute set to multiple, the user can select multiple rows. Holding down the Ctrl key while clicking selects additional rows with each click. Holding down the Shift key while clicking selects all the rows in a range. Using Ctrl+A will result in selecting all the rows throughout the table.

The selection attribute points to a collection of objects. It holds the rowKey identifiers to track which rows are selected. Example 12.11, “Selecting multiple rows” shows how to implement multiple row selection in the same table from Example 12.10, “<rich:extendedDataTable> example”.

⁠

Example 12.11. Selecting multiple rows

<rich:extendedDataTable value="#{extTableSelectionBean.inventoryItems}" 
                        var="car" selection="#{extTableSelectionBean.selection}"
                        id="table" frozenColumns="2" 
                        style="height:300px; width:500px;" selectionMode="multiple">
   ...

The accompanying ExtSelectionBean bean handles which rows are selected. The rows are identified by their rowKey identifiers.

package org.richfaces.demo.tables;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Collection;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.SessionScoped;
import javax.faces.event.AjaxBehaviorEvent;

import org.richfaces.component.AbstractExtendedDataTable;
import org.richfaces.demo.tables.model.cars.InventoryItem;

@ManagedBean
@SessionScoped

public class ExtTableSelectionBean implements Serializable{

   private Collection<Object> selection;
   @ManagedProperty(value = "#{carsBean.allInventoryItems}")
   private List<InventoryItem> inventoryItems;
   private List<InventoryItem> selectionItems = new ArrayList<InventoryItem>();

   public void selectionListener(AjaxBehaviorEvent event){
      AbstractExtendedDataTable dataTable = (AbstractExtendedDataTable)event.getComponent();
      Object originalKey = dataTable.getRowKey();
      selectionItems.clear();
      for (Object selectionKey: selection) {
         dataTable.setRowKey(selectionKey);
         if (dataTable.isRowAvailable()){
            selectionItems.add((InventoryItem)dataTable.getRowData());
         }
      }
      dataTable.setRowKey(originalKey);
   }

   public Collection<Object> getSelection() {
      return selection;
   }

   public void setSelection(Collection<Object> selection) {
      this.selection = selection;
   }

   public List<InventoryItem> getInventoryItems() {
      return inventoryItems;
   }

   public void setInventoryItems(List<InventoryItem> inventoryItems) {
      this.inventoryItems = inventoryItems;
   }

   public List<InventoryItem> getSelectionItems() {
      return selectionItems;
   }

   public void setSelectionItems(List<InventoryItem> selectionItems) {
      this.selectionItems = selectionItems;
   }
}

⁠12.6.3.4. Rearranging columns

Columns in a <rich:extendedDataTable> component can be rearranged by the user by dragging each column to a different position. A graphical representation of the column is displayed during dragging. Figure 12.6, “Dragging columns” illustrates the Price column being dragged to a new location. The small blue arrow indicates where the column will be moved to if it is dropped in the current position. Figure 12.7, “Rearranged columns” shows the result of dragging the Price column.

⁠

Figure 12.6. Dragging columns

⁠

Figure 12.7. Rearranged columns

⁠12.6.3.5. State saving

The tableState attribute of the <rich:extendedDataTable> component can be used to bind state of the table (column width, sequence, sorting, filtering) to a backing-bean string property, for a later use. This state can be for example saved to a database, and it is different from standard JSF state saving mechanism.

⁠12.6.3.6. Meta-components

The ExtendedDataTable supports a number of meta-component ids that can be used as a shorthand for specifying execute and render targets. The following meta-components IDs are supported with the ExtendedDataTable:

@scroll: The scrollable part of the table
@header: The table header
@footer: The table footer
@body: The table body

⁠12.6.3.7. Filtering and sorting

The <rich:extendedDataTable> component can include filtering and sorting in the same way as a regular <rich:dataTable> component. For full details on filtering tables, refer to Section 12.10, “Table filtering”. For full details on sorting tables, refer to Section 12.11, “Table sorting”.

⁠12.6.4. JavaScript API

The <rich:extendedDataTable> component can be controlled through the JavaScript API. The JavaScript API provides the following functions:

sort(): Sort the data table.
filter(): Filter the data table.
clearSorting(): Clear any sorting that is currently applied to the table.
clearFiltering(): Clear any filtering that is currently applied to the table.
selectRow(index): Select the row specified by the index parameter.
selectRows([startIndex, stopIndex]): Select all the rows in the table. Optionally, select only those rows between the indexes specified with the startIndex and stopIndex parameters.
deselectRow: Deselect the row that is currently selected.
setActiveRow(index): Set the active row to that specified by the index parameter.

⁠12.6.5. Reference data

component-type: org.richfaces.ExtendedDataTable
component-class: org.richfaces.component.UIExtendedDataTable
component-family: org.richfaces.Data
renderer-type: org.richfaces.ExtendedDataTableRenderer
handler-class: org.richfaces.taglib.ExtendedDataTableHandler

⁠12.6.6. Style classes and skin parameters

⁠

Table 12.3. Style classes (selectors) and corresponding skin parameters

Class (selector)	Skin Parameters	Mapped CSS properties
`.rf-edt` This class defines styles for the table.	`tableBorderWidth`, `tableBorderColor`	border
`.rf-edt` This class defines styles for the table.	`tableBackgroundColor`	background-color
`.rich-edt-cnt` This class defines styles for the table content.	No skin parameters.
`.rf-edt-c` This class defines styles for a table cell.	`tableBorderWidth`, `tableBorderColor`	border-bottom
`.rf-edt-c` This class defines styles for a table cell.	`tableBorderWidth`, `tableBorderColor`	border-right
`.rf-edt-c-cnt` This class defines styles for the contents of a cell.	`generalFamilyFont`	font-family
	`generalSizeFont`	font-size
`.rf-edt-tbl-hdr` This class defines styles for the table header.	`tableBorderWidth`, `tableBorderColor`	border-bottom
	`tableHeaderTextColor`	color
	`generalFamilyFont`	font-family
	`generalSizeFont`	font-size
	`tableHeaderTextColor`	color
`.rich-edt-hdr` This class defines styles for a header.	No skin parameters.
`.rf-edt-hdr-c` This class defines styles for a table header cell.	`tableBorderWidth`, `tableBorderColor`	border-bottom
	`tableBorderWidth`, `tableBorderColor`	border-right
`.rf-edt-hdr-c-cnt` This class defines styles for the contents of a header cell.	`generalFamilyFont`	font-family
	`generalSizeFont`	font-size
	`tableHeaderTextColor`	color
`.rf-edt-tbl-ftr` This class defines styles for the table footer.	`tableBorderWidth`, `tableBorderColor`	border-top
	`tableFooterBackgroundColor`	background-color
`.rich-edt-ftr` This class defines styles for a footer.	`tableBorderWidth`, `tableBorderColor`	border-top
`.rich-edt-ftr` This class defines styles for a footer.	`tableFooterBackgroundColor`	background-color
`.rich-edt-ftr-cnt` This class defines styles for the content of a footer.	No skin parameters.
`.rf-edt-ftr-c` This class defines styles for a table footer cell.	`tableBorderWidth`, `tableBorderColor`	border-bottom
	`tableBorderWidth`, `tableBorderColor`	border-right
`.rf-edt-ftr-c-cnt` This class defines styles for the contents of a footer cell.	`generalFamilyFont`	font-family
	`generalSizeFont`	font-size
	`generalTextColor`	color
`.rf-edt-ftr-emp` This class defines styles for an empty footer cell.	`tableBorderWidth`, `tableBorderColor`	border-right
`.rich-edt-ftr-fzn` This class defines styles for a frozen footer.	No skin parameters.
`.rich-edt-b` This class defines styles for the body of the table.	No skin parameters.
`.rf-edt-r-sel` This class defines styles for the selected row.	`tableBorderWidth`, `tableBorderColor`	border-right
`.rich-edt-r-act` This class defines styles for the active row.	No skin parameters.
`.rich-edt-rsz` This class defines styles for the table resizer.	No skin parameters.
`.rich-edt-rsz-cntr` This class defines styles for the resize container.	No skin parameters.
`.rich-edt-rsz-mkr` This class defines styles for the resize marker.	`generalTextColor`	border-left
`.rf-edt-rord` This class defines styles for the re-order functionality.	`tableBorderWidth`, `tableBorderColor`	border
	`tableHeaderBackgroundColor` / `tableBackgroundColor`	background-color
`.rich-edt-rord-mkr` This class defines styles for the re-order marker.	No skin parameters.
`.rich-edt-spcr` This class defines a spacer for Internet Explorer 7 compatibility.	No skin parameters.