JBoss.orgCommunity Documentation

Chapter 10. Tables and grids

10.1. <a4j:repeat>
10.1.1. Basic usage
10.1.2. Limited views and partial updates
10.1.3. Reference data
10.2. <rich:dataTable>
10.2.1. Basic usage
10.2.2. Customizing the table
10.2.3. Partial updates
10.2.4. JavaScript API
10.2.5. Reference data
10.2.6. Style classes and skin parameters
10.3. <rich:column>
10.3.1. Basic usage
10.3.2. Spanning columns
10.3.3. Spanning rows
10.3.4. Reference data
10.4. <rich:columnGroup>
10.4.1. Complex headers
10.4.2. Reference data
10.5. <rich:collapsibleSubTable>
10.5.1. Basic usage
10.5.2. Expanding and collapsing the sub-table
10.5.3. Reference data
10.5.4. Style classes
10.5.5. <rich:collapsibleSubTableToggler>
10.6. <rich:extendedDataTable>
10.6.1. Basic usage
10.6.2. Table appearance
10.6.3. Extended features
10.6.4. JavaScript API
10.6.5. Reference data
10.6.6. Style classes and skin parameters
10.7. <rich:dataGrid>
10.7.1. Basic usage
10.7.2. Customizing the grid
10.7.3. Partial updates
10.7.4. Reference data
10.7.5. Style classes and skin parameters
10.8. <rich:list>
10.8.1. Basic usage
10.8.2. Type of list
10.8.3. Bullet and numeration appearance
10.8.4. Customizing the list
10.8.5. Reference data
10.8.6. Style classes and skin parameters
10.9. <rich:dataScroller>
10.9.1. Basic usage
10.9.2. Appearance and interactivity
10.9.3. JavaScript API
10.9.4. Reference data
10.9.5. Style classes and skin parameters
10.10. Table filtering
10.11. Table sorting

This chapter covers all components related to the display of tables and grids.

The non-visual <a4j:repeat> component is used to iterate through a data model. The component renders child content for every iteration according to the current object data.

The <a4j:repeat> component extends the standard UIRepeat component to allow partial updates within iterations while sending Ajax requests. The component acts as a base for all the data iteration components detailed in this chapter.

The <a4j:repeat> component uses other attributes common to iteration components, such as the first attribute for specifying the first item for iteration, and the rows attribute for specifying the number of rows of items to display.

Specific cells, rows, and columns can be updated without sending Ajax requests for the entire collection. Components that cause the change can specify which part of the table to update through the render attribute. The render attribute specifies which part of a table to update. The updated parts relate to where the action component is placed relative to the table:

The <rich:dataTable> component is used to render a table, including the table's caption. It works in conjunction with the <rich:column> and <rich:columnGroup> components to list the contents of a data model.

The first attribute specifies which item in the data model to start from, and the rows attribute specifies the number of items to list. The header, footer, and caption facets can be used to display text, and to customize the appearance of the table through skinning. demonstrates a simple table implementation.

The keepSaved attribute defines whether this iteration component will reset saved children's state before rendering. By default, the state is reset if there are no faces messages with severity error or higher.


For details on filtering and sorting data tables, refer to Section 10.10, “Table filtering” and Section 10.11, “Table sorting”.

As <rich:dataTable> the component is based on the <a4j:repeat> component, it can be partially updated with Ajax. Refer to Section 10.1.2, “Limited views and partial updates” for details on partially updating the <rich:dataTable> component.

The <rich:dataTable> component supports master-detail markup with collapsible sub-table sections. Refer to Section 10.5, “<rich:collapsibleSubTable>” for full details on using the <rich:collapsibleSubTable> component.

Use the rows attribute to specify the number of rows to show at a time. The table is then presented in pages of rows. Pages can be navigated by using a control such as the <rich:dataScroller> component. Refer to Section 10.9, “<rich:dataScroller>” for full details on using the <rich:dataScroller> component.

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

Class (selector)Skin ParametersMapped CSS properties
.rf-dt

This class defines styles for the table.

tableBackgroundColor

background-color

tableBorderWidth

border-left-width, border-top-width

tableBorderColor

border-left-color, border-top-color

.rf-dt-cap

This class defines styles for the table caption.

No skin parameters.
.rf-dt-r

This class defines styles for a table row.

No skin parameters.
.rf-dt-fst-r

This class defines styles for the first row in a table.

No skin parameters.
.rf-dt-c

This class defines styles for a table cell.

tableBackgroundColor

background-color

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-dt-nd

This class defines styles for a node.

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-dt-hdr

This class defines styles for a table header.

No skin parameters.
.rf-dt-hdr-fst

This class defines styles for the first header.

No skin parameters.
.rf-dt-hdr-c

This class defines styles for a header cell.

tableHeaderBackgroundColor

background-color

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

tableHeaderTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-dt-shdr

This class defines styles for a table sub-header.

No skin parameters.
.rf-dt-shdr-fst

This class defines styles for the first sub-header.

No skin parameters.
.rf-dt-shdr-c

This class defines styles for a sub-header cell.

tableHeaderBackgroundColor

background-color

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

tableHeaderTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-dt-ftr

This class defines styles for a table footer.

No skin parameters.
.rf-dt-ftr-fst

This class defines styles for the first footer.

No skin parameters.
.rf-dt-ftr-c

This class defines styles for a footer cell.

tableFooterBackgroundColor

background-color

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-dt-sftr

This class defines styles for a table sub-footer.

No skin parameters.
.rf-dt-sftr-fst

This class defines styles for the first sub-footer.

No skin parameters.
.rf-dt-sftr-c

This class defines styles for a sub-footer cell.

tableFooterBackgroundColor

background-color

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size


The <rich:column> component facilitates columns in a table. It supports merging columns and rows, sorting, filtering, and customized skinning.

The <rich:columnGroup> component combines multiple columns in a single row to organize complex parts of a table. The resulting effect is similar to using the breakRowBefore attribute of the <rich:column> component, but is clearer and easier to follow in the source code.

The <rich:columnGroup> can also be used to create complex headers in a table. Example 10.8, “Complex headers using column groups” and the resulting Figure 10.5, “Complex headers using column groups” demonstrate how complex headers can be achieved.

Example 10.8. Complex headers using column groups


The <rich:collapsibleSubTable> component acts as a child element to a <rich:dataTable> component. The <rich:collapsibleSubTable> component iterates through the child collections in the currently iterated object to create master-detail tables.

Additionally, the detail part of the table can be collapsed or expanded through different modes. The <rich:collapsibleSubTable> component works with the <rich:collapsibleSubTableToggler> component, which expands and collapses the sub-tables.

The <rich:collapsibleSubTable> component requires the same basic attributes as the <rich:dataTable> component. The value attribute points to the collection, and the var attribute specifies a variable to use when iterating through the collection.

In addition, the <rich:collapsibleSubTable> component typically needs a corresponding <rich:collapsibleSubTableToggler> component to allow expanding and collapsing. Declare the id identifier on the <rich:collapsibleSubTable> element so that the <rich:collapsibleSubTableToggler> component can reference it. Refer to Section 10.5.5, “<rich:collapsibleSubTableToggler>” for details on the <rich:collapsibleSubTableToggler> component.

Example 10.9. Basic usage


<rich:dataTable value="#{carsBean.inventoryVendorLists}" var="list">
   <f:facet name="header">
      <rich:columnGroup>
         <rich:column colspan="6">
            <h:outputText value="Cars marketplace" />
         </rich:column>
         <rich:column breakRowBefore="true">
            <h:outputText value="Model" />
         </rich:column>
         <rich:column>
            <h:outputText value="Price" />
         </rich:column>
         <rich:column>
            <h:outputText value="Mileage" />
         </rich:column>
         <rich:column>
            <h:outputText value="VIN Code" />
         </rich:column>
         <rich:column>
            <h:outputText value="Items stock" />
         </rich:column>
         <rich:column>
            <h:outputText value="Days Live" />
         </rich:column>
      </rich:columnGroup>
   </f:facet>
   <rich:column colspan="6">
      <rich:collapsibleSubTableToggler for="sbtbl" />
      <h:outputText value="#{list.vendor}" />
   </rich:column>
   <rich:collapsibleSubTable value="#{list.vendorItems}" var="item" id="sbtbl"
      expandMode="client">
      <rich:column>
         <h:outputText value="#{item.model}" />
      </rich:column>
      <rich:column>
         <h:outputText value="#{item.price}" />
      </rich:column>
      <rich:column>
         <h:outputText value="#{item.mileage}" />
      </rich:column>
      <rich:column>
         <h:outputText value="#{item.vin}" />
      </rich:column>
      <rich:column>
         <h:outputText value="#{item.stock}" />
      </rich:column>
      <rich:column>
         <h:outputText value="#{item.daysLive}" />
      </rich:column>
      <f:facet name="footer">
         <h:outputText value="Total of #{list.vendor} Cars: #{list.count}" />
      </f:facet>
   </rich:collapsibleSubTable>
</rich:dataTable>

The resulting tables contains multiple sub-tables, grouping the list of cars by vendor. Each sub-table can be expanded or collapsed using the toggle with the vendor's name. The screenshot shows all sub-tables collapsed except for the sub-table for Ford cars.


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

Class (selector)Skin ParametersMapped CSS properties
.rf-cst

This class defines styles for the table.

No skin parameters.
.rf-cst-r

This class defines styles for a table row.

No skin parameters.
.rf-cst-fst-r

This class defines styles for the first row in a table.

No skin parameters.
.rf-cst-c

This class defines styles for a table cell.

tableBackgroundColor

background-color

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-cst-hdr

This class defines styles for a table header.

No skin parameters.
.rf-cst-hdr-fst

This class defines styles for the first header.

No skin parameters.
.rf-cst-hdr-fst-r

This class defines styles for the first row in the header.

No skin parameters.
.rf-cst-hdr-c

This class defines styles for a header cell.

tableSubHeaderBackgroundColor

background-color

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-cst-shdr

This class defines styles for a table sub-header.

No skin parameters.
.rf-cst-shdr-fst

This class defines styles for the first sub-header.

No skin parameters.
.rf-cst-shdr-c

This class defines styles for a sub-header cell.

tableSubHeaderBackgroundColor

background-color

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-cst-ftr

This class defines styles for a table footer.

No skin parameters.
.rf-cst-ftr-fst

This class defines styles for the first footer.

No skin parameters.
.rf-cst-ftr-c

This class defines styles for a footer cell.

tableSubFooterBackgroundColor

background-color

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-cst-sftr

This class defines styles for a table sub-footer.

No skin parameters.
.rf-cst-sftr-fst

This class defines styles for the first sub-footer.

No skin parameters.
.rf-cst-sftr-c

This class defines styles for a sub-footer cell.

tableSubFooterBackgroundColor

background-color

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size


The <rich:collapsibleSubTableToggler> component provides a toggle control for the user to expand and collapse sub-tables.

The <rich:collapsibleSubTableToggler> component requires the for attribute. The for attribute references the id identifier of the <rich:collapsibleSubTable> component to control.

Refer to Example 10.9, “Basic usage” for an example using the <rich:collapsibleSubTable> component. In the example, the toggle control is placed in a column that spans the width of the table. Output text next to the toggle control displays the car vendor's name for that sub-table.

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:

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

The example table shown in Example 10.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 10.9, “<rich:dataScroller>” for full details on using the <rich:dataScroller> component.

The example table shown in Example 10.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.

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

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

Example 10.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.UIExtendedDataTable;
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){
      UIExtendedDataTable dataTable = (UIExtendedDataTable)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;
   }
}

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 10.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 10.7, “Rearranged columns” shows the result of dragging the Price column.

Figure 10.6. Dragging columns


Figure 10.7. Rearranged columns


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

Class (selector)Skin ParametersMapped CSS properties
.rf-edt

This class defines styles for the table.

tableBorderWidth, tableBorderColor

border

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

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

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.

The <rich:dataGrid> component is used to arrange data objects in a grid. Values in the grid can be updated dynamically from the data model, and Ajax updates can be limited to specific rows. The component supports header, footer, and caption facets.

The <rich:dataGrid> component is similar in function to the JavaServer Faces <h:panelGrid> component. However, the <rich:dataGrid> component additionally allows iteration through the data model rather than just aligning child components in a grid layout.

Figure 10.8. The <rich:dataGrid> component


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

Class (selector)Skin ParametersMapped CSS properties
.rf-dg

This class defines styles for the grid.

tableBackgroundColor

background-color

tableBorderWidth

border-left-width, border-top-width

tableBorderColor

border-left-color, border-top-color

.rf-dg-cap

This class defines styles for the grid caption.

No skin parameters.
.rf-dg-r

This class defines styles for a grid row.

No skin parameters.
.rf-dg-c

This class defines styles for a grid cell.

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-dg-nd-c

This class defines styles for a node cell.

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-dg-th

This class defines styles for the grid header section.

tableBorderWidth

border-bottom-width

tableBorderColor

border-bottom-color

.rf-dg-h

This class defines styles for a grid header.

No skin parameters.
.rf-dg-h-f

This class defines styles for the first header.

No skin parameters.
.rf-dg-h-r

This class defines styles for a header row.

No skin parameters.
.rf-dg-h-c

This class defines styles for a header cell.

tableHeaderBackgroundColor

background-color

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

tableHeaderTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-dg-f

This class defines styles for a grid footer.

No skin parameters.
.rf-dg-f-f

This class defines styles for the first footer.

No skin parameters.
.rf-dg-f-c

This class defines styles for a footer cell.

tableFooterBackgroundColor

background-color

tableBorderWidth

border-bottom-width, border-right-width

tableBorderColor

border-bottom-color, border-right-color

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size


The <rich:list> component renders a list of items. The list can be an numerically ordered list, an un-ordered bullet-point list, or a data definition list. The component uses a data model for managing the list items, which can be updated dynamically.

The <rich:dataScroller> component is used for navigating through multiple pages of tables or grids.

Figure 10.14. The <rich:dataScroller> component


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

Class (selector)Skin ParametersMapped CSS properties
.rf-ds

This class defines styles for the data scroller.

generalFamilyFont

font-family

generalSizeFont

font-size

tableBackgroundColor

background

.rf-ds-btn

This class defines styles for buttons in the data scroller.

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

tableBorderColor

border-color

headerBackgroundColor

background-color

.rf-ds-btn-first

This class defines styles for the first button.

No skin parameters.
.rf-ds-btn-fastrwd

This class defines styles for the fast rewind button.

No skin parameters.
.rf-ds-btn-prev

This class defines styles for the previous button.

No skin parameters.
.rf-ds-btn-next

This class defines styles for the next button.

No skin parameters.
.rf-ds-btn-fastfwd

This class defines styles for the fast forward button.

No skin parameters.
.rf-ds-btn-last

This class defines styles for the last button.

No skin parameters.
.rf-ds-nmb-btn

This class defines styles for page number buttons in the data scroller.

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

tableBorderColor

border-color

tableBackgroundColor

background-color

.rf-ds-press

This class defines styles for a data scroller when a control is pressed.

tableBorderColor

border-color

tableBackgroundColor

background

 
.rf-ds-act

This class defines styles for an active data scroller.

tableBorderColor

color

.rf-ds-dis

This class defines styles for a disabled data scroller.

tableBorderColor

color


Use the filterExpression attribute to define an expression that can be evaluated as a boolean value. The expression checks if each table entry satisfies the filtering condition when the table is rendered. For example, the expression might be a JSTL (JavaServer Pages Standard Tag Library) function such as contains or equals.

Use the filter attribute to define a filter interface. The attribute must use EL (Expression Language) to point to an object which implements the org.richfaces.model.Filter<T> interface. The object must provide a single accept(T t) method. The method takes each iteration object as a parameter and returns a boolean value, which determines whether the object satisfies the filter. By defining a custom filter, you can implement complex business logic to filter a table.

Use the filterValue attribute to point to an object which holds the current filtering value for the column. The attribute can be used to store filtering conditions in a session. Alternatively, use the filterValue attribute when using the JavaScript API for filtering. The attribute can store a value to pass as parameter to a JavaScript filter method.

Example 10.16. Filtering example


<rich:dataTable value="#{capitalsBean.capitals}" var="cap" id="table">

    <f:facet name="header">
        <rich:columnGroup>
            <rich:column>
                <h:outputText value="State Name" />
            </rich:column>
            <rich:column>
                <h:outputText value="State Time Zone" />
            </rich:column>
        </rich:columnGroup>
    </f:facet>
    <rich:column filter="#{filteringBean.stateFilter}">
        <f:facet name="header">
            <h:inputText value="#{filteringBean.stateFilterValue}" id="input">
                <a4j:ajax event="keyup" render="table@body">
                    <a4j:attachQueue  requestDelay="700"
                        ignoreDupResponses="true" />
                </a4j:ajax>
            </h:inputText>
        </f:facet>
        <h:outputText value="#{cap.state}" />
    </rich:column>
    <rich:column filterExpression="#{fn:containsIgnoreCase(cap.timeZone, filteringBean.zoneFilterValue)}">
        <f:facet name="header">
            <h:selectOneMenu value="#{filteringBean.zoneFilterValue}">
                <f:selectItems value="#{filteringBean.zoneList}" />
                <a4j:ajax event="change" render="table@body" />
            </h:selectOneMenu>
        </f:facet>
        <h:outputText value="#{cap.timeZone}" />
    </rich:column>
</rich:dataTable>

The example uses a filter expression on the first column and a filter method on the second column.


Tables entries can be sorted by defining external sorting algorithms. Refer to Section 10.3, “<rich:column>” for details on using the <rich:column> component in tables.

Sorting non-English tables

To sort a table whose contents are not in English, add the org.richfaces.datatableUsesViewLocale context parameter to the project's web.xml settings file. Set the value of the context parameter to true.

Set the sortBy attribute to indicate which iteration object property to use when sorting the column. By default, the target will be sorted using the compare() method.

If using custom-defined rules for sorting, use the comparator attribute instead. Set the comparator attribute to point to your comparator method, which will be used when sorting the data model.

Bind the sortOrder attribute to bean properties to manage the sorting order. The bean must handle all the sorting algorithms. Example 10.17, “Sorting” demonstrates table sorting using an external control.

Example 10.17. Sorting


<rich:dataTable value="#{dataTableScrollerBean.allCars}"
                var="category" rows="20" id="table" reRender="ds2"
                sortPriority="#{sortingBean.prioritList}">
   <rich:column id="make" sortBy="#{category.make}"
                sortOrder="#{sortingBean.makeDirection}">
      <f:facet name="header">
         <h:outputText styleClass="headerText" value="Make" />
      </f:facet>
      <h:outputText value="#{category.make}" />
   </rich:column>
   <rich:column id="model" sortBy="#{category.model}"
                sortOrder="#{sortingBean.modelDirection}">
      <f:facet name="header">
         <h:outputText styleClass="headerText" value="Model" />
      </f:facet>
      <h:outputText value="#{category.model}" />
   </rich:column>
   <rich:column id="price" sortBy="#{category.price}"
                sortOrder="#{sortingBean.priceDirection}">
      <f:facet name="header">
         <h:outputText styleClass="headerText" value="Price" />
      </f:facet>
      <h:outputText value="#{category.price}" />
   </rich:column>
   <rich:column id="mileage" sortBy="#{category.mileage}"
                sortOrder="#{sortingBean.mileageDirection}">
      <f:facet name="header">
         <h:outputText styleClass="headerText" value="Mileage" />
      </f:facet>
      <h:outputText value="#{category.mileage}" />
   </rich:column>
</rich:dataTable>

The example uses an external control to manage the table's sorting.


When multiple columns are capable of being sorted at the same time, set the priority by which the columns are sorted with the sortPriorities attribute. The attribute must contain a list of column identifiers in the order of the sorting sequence.