Datadriven Table with responsive features.

The default reflow mode uses some clever CSS tricks to show each row of data in a mobile friendly way when displayed on small screens. Optionally you can make reflow trigger at medium or large displays instead, or turn it off by choosing none. Resize your screen to see it in action.

Row selection, keyboard nav, AJAX callback
1Star Wars: Episode I - The Phantom Menace
2Star Wars: Episode II - Attack of the Clones
3Star Wars: Episode III - Revenge of the Sith
Expand rows for detail view
1Star Wars: Episode I - The Phantom Menace
2Star Wars: Episode II - Attack of the Clones
3Star Wars: Episode III - Revenge of the Sith
Compact, bordered, title no reflow, hover
1Star Wars: Episode I - The Phantom Menace
2Star Wars: Episode II - Attack of the Clones
3Star Wars: Episode III - Revenge of the Sith

See the column documentation for column attributes and advanced reflow combinations.


<h5>Row selection, AJAX callback</h5>
<t:table id="moviesSelection" value="#{controller.movies}" var="movie" selectionMode="single" rowKey="#{}">
    <f:ajax event="rowSelect" listener="#{controller.onSelectMovie}" render="notification"/>
    <t:column headerText="ID" text="#{}"/>
    <t:column headerText="Title" text="#{movie.title}" />

<h5>Expand rows for detail view</h5>
<h:form id="f">
    <t:table id="movies" value="#{controller.movies}" var="movie" rowKey="#{}">
        <t:column headerText="More"><t:rowToggler/></t:column>
        <t:column headerText="ID" text="#{}"/>
        <t:column headerText="Title" text="#{movie.title}" />

<h5>Compact, bordered, title no reflow</h5>
<t:table id="moviesCompact" value="#{controller.movies}" var="movie" compact="true" bordered="true" selectionMode="single">
    <t:column headerText="ID" text="#{}"/>
    <t:column headerText="Title" text="#{movie.title}" reflow="none"/>

Datadriven Table with responsive features.

Tag name table
Component type io.tornadofaces.component.Table
Renderer type io.tornadofaces.component.TableRenderer
styleClassStyles to apply to the table element.false
rowClassStyles to apply to the current tr. A more dynamic alternative to the rowClasses attributefalse
emptyTextText to show when the table is empty.false
rowClassesComma-delimited list of CSS style classes that will be applied to the rows of this table. A space separated list of classes may also be specified for any individual row. These 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.false
selectionModeRow selection mode. Valid options are "single" or "multi". Defaults to null.false
rowKeyExpression used to extract a unique key for each row. This is required when a selection mode is set.false
selectionThe object or a collection of objects currently selected, if any.false
zebraApply zebra styling to the table. Defaults to false.false
clickFirstLinkOnEnterClick first link in the selected table row when the user presses enter. Requires selectionMode="single". Will override onEnter if present. Defaults to true.false
onEnterPressedJavaScript function to call when user presses enter on a selected row. Will be passed the the selected row as a JQuery object and the key event. Requires rowSelect="single". If present, clickFirstLinkOnEnter will take precedence over this.false
onSelectRowJavaScript function to call when user selects a row. Requires rowSelect="single".false
hoverChange background color on row hover. Defaults to false.false
compactCompact table styling. Defaults to false.false
borderedBordered table styling. Defaults to false.false
reflowAdd responsive reflow CSS to the table at the given breakpoint. Valid options are, small, medium, large and none. Defaults to small.false
reflowModeReflow mode determines label placement when the table is viewed in reflow mode. Valid options are "block", "span". Default is "span".false
filterFnA JavaScript function to filter the table when widget.filter() is called. The function is called with each item in the table false
valueThe List of elements, as a value expression.true
highlightFilterHighlight text in filtered elements. Default true.false
varThe variable that will refer to each element in the list. Defaults to "it"false
renderedShould this component be rendered?false
Ajax Behavior Events

rowSelect will be called when a row is selected. To enable selection you must also set rowKey to return a unique id per row and the selectionMode to either single or multi.

                    <f:ajax event="rowSelect" listener="#{controller.onSelect}">
public void onSelect(SelectionEvent<Movie> event) {
                    Table table = (Table) event.getSource();
                    Movie movie = event.getSelection();

The listener will be called with an instance of io.tornadofaces.event.SelectionEvent that contains a reference to the Table and the selected row object.

Client Side API

Widget: TornadoFaces.widget.Table

Method Params Return type Description
getSelectedRowKeys() array Get a list of the currently selected rowKeys
unselectAllRows() void Unselect all rows in the table
selectPreviousRow() void Select the previous row
selectNextRow() void Select the next row
selectFirstRow() void Select the first row
selectLastRow() void Select the last row
selectRow() tr jquery tr Select the supplied jquery object containing an html tr element
expandRow() tr jquery tr Expand the supplied jquery object containing an html tr element. Requires a RowExpansion element to be present.
filter() query string Filter rows by searching for the supplied text. You can supply a custom filter function via setFilterFn
setFilterFn() fn function Set a new filter function to use when filter() is called.