Table

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

ID	Title
1	Star Wars: Episode I - The Phantom Menace
2	Star Wars: Episode II - Attack of the Clones
3	Star Wars: Episode III - Revenge of the Sith

Expand rows for detail view

More	ID	Title
	1	Star Wars: Episode I - The Phantom Menace
	2	Star Wars: Episode II - Attack of the Clones
	3	Star Wars: Episode III - Revenge of the Sith

Compact, bordered, title no reflow, hover

ID	Title
1	Star Wars: Episode I - The Phantom Menace
2	Star Wars: Episode II - Attack of the Clones
3	Star Wars: Episode III - Revenge of the Sith

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

Example

Documentation


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

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

<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="#{movie.id}"/>
    <t:column headerText="Title" text="#{movie.title}" reflow="none"/>
</t:table>

Datadriven Table with responsive features.

Info

Tag name	table
Component type	io.tornadofaces.component.Table
Renderer type	io.tornadofaces.component.TableRenderer

Attributes

Name	Description	Required
styleClass	Styles to apply to the table element.	false
rowClass	Styles to apply to the current tr. A more dynamic alternative to the rowClasses attribute	false
emptyText	Text to show when the table is empty.	false
rowClasses	Comma-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
selectionMode	Row selection mode. Valid options are "single" or "multi". Defaults to null.	false
rowKey	Expression used to extract a unique key for each row. This is required when a selection mode is set.	false
selection	The object or a collection of objects currently selected, if any.	false
zebra	Apply zebra styling to the table. Defaults to false.	false
clickFirstLinkOnEnter	Click first link in the selected table row when the user presses enter. Requires selectionMode="single". Will override onEnter if present. Defaults to true.	false
onEnterPressed	JavaScript 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
onSelectRow	JavaScript function to call when user selects a row. Requires rowSelect="single".	false
hover	Change background color on row hover. Defaults to false.	false
compact	Compact table styling. Defaults to false.	false
bordered	Bordered table styling. Defaults to false.	false
reflow	Add responsive reflow CSS to the table at the given breakpoint. Valid options are, small, medium, large and none. Defaults to small.	false
reflowMode	Reflow mode determines label placement when the table is viewed in reflow mode. Valid options are "block", "span". Default is "span".	false
filterFn	A JavaScript function to filter the table when widget.filter() is called. The function is called with each item in the table	false
value	The List of elements, as a value expression.	true
highlightFilter	Highlight text in filtered elements. Default true.	false
var	The variable that will refer to each element in the list. Defaults to "it"	false
rendered	Should 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.

<t:table>
                    <f:ajax event="rowSelect" listener="#{controller.onSelect}">
                    </t:table>

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.