6.6.14. < rich:scrollableDataTable > available since 3.1.0

### 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.14. < rich:scrollableDataTable > available since 3.1.0

expand all

#### 6.6.14.1. Description

The <rich:scrollableDataTable> component is used for the table-like component creation. The component just adds the set of additional features described below in comparison with the standard table.

Figure 6.46. <rich:scrollableDataTable> component

#### 6.6.14.2. Key Features

- Highly customizable look and feel

- Variable content of the table cells

- Dynamically fetching the rows from the server when the table is scrolled up and down

- Resizing columns by mouse dragging the column bar

- Sorting column by clicking the header

- Fixed one or more left columns when table is scrolled horizontally

- One and multi-selection rows mode

- Built-it drag-n-drop support

- Sorting column values

<rich:scrollableDataTable> includes the following attributes not included with <rich:dataTable>:

- activeClass
- activeRowKey
- bypassUpdates
- data
- eventsQueue
- frozenColCount
- height
- hideWhenScrolling
- ignoreDupResponses
- onselectionchange
- requestDelay
- scriptVar
- selectedClass
- selection
- selectionMode
- similarityGroupingId
- sortOrder
- status
- timeout

<rich:scrollableDataTable> does not include the following attributes available with <rich:dataTable>:

- align
- bgcolor
- border
- captionClass
- captionStyle
- cellpadding
- cellspacing
- columns
- columnsWidth
- dir
- frame
- lang
- onRowContextMenu
- onRowMouseMove
- onRowMouseOut
- onRowMouseOver
- onclick
- ondblclick
- onkeydown
- onkeypress
- onkeyup
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- rules
- sortPriority
- title

## Using <rich:column>

The relative width of <rich:column> is not supported by <rich:scrollableDataTable>. It is, however, supported by <rich:dataTable> and <rich:extendedDataTable>.

#### 6.6.14.3. Details of Usage

The component represents on a page as a scrollable table with some fixed (non-scrollable) rows ( with header and footer) and columns. Like other tables <rich:scrollableDataTable> also has optional footer and header that could be implemented using the corresponding facets. Columns of the table are optionally resizable. Resizing is available using "drag and drop" of the column vertical borders. You can define the number of the fixed columns from the left side using the "frozenColCount" attribute that is not scrolled via horizontal scroll.

There is possibility to increase component performance using the "hideWhenScrolling" attribute. If the attribute value is "true" data is hidden during scrolling.

It's possible to select the whole row with onclick on the row or some set of rows. Selection is optional and availability of such feature is defined on the component. There are two ways to select a few rows:

- Just clicking the columns one by one.

- Clicking some row with the SHIFT button hold. In this case all the rows starting from last selected up to clicked should be selected.

It's possible to sort the table content after clicks on the header. The feature is optional (to disable it, use the "sortable" attribute in <rich:column>). Every column should be pointed to the comparator method that is used for sorting the table. In case the <rich:scrollableDataTable> is already sorted by some column and the header of this column has been clicked again - the sorting is reversed.

The typical variant of using:

    ...

    <rich:scrollableDataTable value="#{modelBuilder.model}" var="issues"

                frozenColCount="1"

                first="0"

                rows="40"

                width="300px"

                height="396px">

        <rich:column width="100px">

            <f:facet name="header" >

                <h:outputText value="State"/>

            </f:facet>

            <h:outputText value="#{issues.cell1}"/>

            <f:facet name="footer">

                <h:outputText value="State"/>

            </f:facet>

        </rich:column>

        <!--Set of columns and header/footer facets-->

    </rich:scrollableDataTable>

    ...

The "selection" attribute allows to get the row data when using one and multi-selection rows mode.

This attribute is a reference to object to the instance of `org.richfaces.model.selection.Selection` interface, containing the current collection of objects selected by you.

In the following example when you submit the form, the current collection of the selected objects is placed in the object's property. Then on complete action the <rich:modalPanel> with selected data is shown.

Example:

    ...

    <h:form>

            <rich:spacer height="30" />

                    <rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="200px"

                            width="300px" id="carList" rows="40" columnClasses="col"

                            value="#{dataTableScrollerBean.allCars}" var="category" sortMode="single"

                            selection="#{dataTableScrollerBean.selection}">

                            <rich:column id="make">

                                    <f:facet name="header"><h:outputText styleClass="headerText" value="Make" /></f:facet>

                                    <h:outputText value="#{category.make}" />

                            </rich:column>

                            <rich:column id="model">

                                    <f:facet name="header"><h:outputText styleClass="headerText" value="Model" /></f:facet>

                                    <h:outputText value="#{category.model}" />

                            </rich:column>

                            <rich:column id="price">

                                    <f:facet name="header"><h:outputText styleClass="headerText" value="Price" /></f:facet>

                                    <h:outputText value="#{category.price}" />

                            </rich:column>

                    </rich:scrollableDataTable>

                    <rich:spacer height="20px"/>

                    <a4j:commandButton value="Show Current Selection" reRender="table"

                            action="#{dataTableScrollerBean.takeSelection}"

                            oncomplete="javascript:Richfaces.showModalPanel('panel');"/>

    </h:form>

    <rich:modalPanel id="panel" autosized="true">

            <f:facet name="header">

                    <h:outputText value="Selected Rows"/>

            </f:facet>

            <f:facet name="controls">

                    <span style="cursor:pointer" onclick="javascript:Richfaces.hideModalPanel('panel')">X</span>

            </f:facet>

            <rich:dataTable value="#{dataTableScrollerBean.selectedCars}" var="sel" id="table">

                    <rich:column>

                            <f:facet name="header"><h:outputText value="Make" /></f:facet>

                            <h:outputText value="#{sel.make}" />

                    </rich:column>

                    <rich:column id="model">

                            <f:facet name="header"><h:outputText value="Model" /></f:facet>

                    <h:outputText value="#{sel.model}" />

                    </rich:column>

                    <rich:column id="price">

                            <f:facet name="header"><h:outputText value="Price" /></f:facet>

                            <h:outputText value="#{sel.price}" />

                    </rich:column>

            </rich:dataTable>

    </rich:modalPanel>

    ...

This is a result:

Figure 6.47. The "selection" attribute usage

On RichFaces LiveDemo page you can find the fuller example of usage of this attribute as well as the example bean.

The <rich:scrollableDataTable> component has the following extra attributes for event processing on the client:

- "onselectionchange"

- "onRowClick"

- "onRowDblClick"

- "onRowMouseUp"

- "onRowMouseDown"

Starting with the 3.3.1 version of the components framework it becomes possible to switch selection mode with the "selectionMode" attribute.

Information about sorting and filtering you can find in the RichFaces Developer guide section about sorting.

Information on the "process" attribute usage you can find in the "Decide what to process" guide section.

## Note:

If you want to use specific features such as pagination on database level you should pass to the "value" of the <rich:scrollableDataTable> component an object which class extends `org.richfaces.model.ScrollableTableDataModel`.

#### 6.6.14.4. Reference Data

Table of <rich:scrollableDataTable> attributes.

Table 6.64. Component Identification Parameters

Name | Value
--- | ---
component-type | org.richfaces.component.ScrollableDataTable
component-class | org.richfaces.component.html.HtmlScrollableDataTable
component-family | org.richfaces.component.ScrollableDataTable
renderer-type | org.richfaces.renderkit.html.ScrollableDataTableRenderer
tag-class | org.richfaces.taglib.ScrollableDataTableTag

Table 6.65. Facets

Facet | Description
--- | ---
header | Defines the header content
footer | Defines the footer content

Table 6.66. Style classes (selectors) with the corresponding skin parameters

Class (selector) name | Description | Skin Parameters | CSS properties mapped
--- | --- | --- | ---
.rich-sdt | Defines styles for a component appearance | tableBackgroundColor | background-color
tableBorderColor | border-color
tableBorderWidth | border-width
.rich-std-header-row | Defines styles for a header raw | headerBackgroundColor | background-color
.rich-sdt-header-cell | Defines styles for header cells | tableBorderWidth | border-bottom-width, border-right-width
tableBorderColor | border-bottom-color, border-right-color
headerTextColor | color
generalFamilyFont | font-family
generalSizeFont | font-size
.rich-sdt-hsplit |  | tipBorderColor | border-right-color
.rich-std-footer-row | Defines styles for a footer raw | tableSubfooterBackgroundColor | background-color
.rich-sdt-footer-cell | Defines styles for footer cells | tableBorderColor | border-right-color
.rich-sdt-column-cel | Defines styles for column cells | tableBorderColor | border-bottom-color, border-right-color
.rich-sdt-row-selected | Defines styles for a selected row | additionalBackgroundColor | background-color
.rich-sdt-row-active | Defines styles for an active row | tabDisabledTextColor | color
.rich-sdt-header-cell-body, .rich-sdt-column-cell-body, .rich-sdt-footer-cell-body | Define styles for the component cells body | generalFamilyFont | font-family
generalSizeFont | font-size

Table 6.67. Style classes (selectors) without skin parameters

Class name | Description
--- | ---
.rich-sdt-hsep | Defines styles for header separators
.rich-sdt-column-sort-up | Defines styles for ascending sorted column
.rich-sdt-column-sort-down | Defines styles for descending sorted column

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

#### 6.6.14.5. Relevant Resources Links

On the component LiveDemo page you can see the example of <rich:scrollableDataTable> usage.

Cookbook article Scrollable dataTable Selection Usage provides a simple example of how you can use the "selection" attribute in order to get row selection in <rich:scrollableDataTable>.

- Prev6.6.13. < a4j:repeat > ...
- Top of page
- Front page
- Next6.7. Drag-Drop Support