Parent Project
Project Documentation

Summary

Tag name: <tr:table>
UIComponent class: org.apache.myfaces.trinidad.component.core.data.CoreTable
Component type: org.apache.myfaces.trinidad.CoreTable

Naming container: Yes. When referring to children of this component ("partialTriggers", findComponent(), etc.), you must prefix the child's ID with this component's ID and a colon (':').

The Trinidad Table is used to display tabular data. It also supports selection (both single and multiple), sorting, record navigation and detail-disclosure.

Table Model

The Trinidad Table component uses a model to access the data in the underlying list. The specific model class is org.apache.myfaces.trinidad.model.CollectionModel. You may also use other model instances, e.g., java.util.List , array, and javax.faces.model.DataModel. The Table will automatically convert the instance into a CollectionModel.

Columns

The immediate children of a Table component must all be <tr:column> components. Each visible Trinidad Column component creates a separate column in the Table. For more information see the documentation for <column>

Range Navigation

When the list being displayed by a Table is huge, you can enable the Table to break up the list into ranges and display a single range at a time. Range controls are provided on the Table to let the user scroll to the next range, or to go back to the previous range. If the total size of the list is known, a control to let the user jump directly to a particular part of the list is also provided on the Table. Use the Table attributes "rows" and "first" to control the range navigation feature. When the user changes the range, the Table fires a RangeChangeEvent.

Displaying Details

You can configure the Table to display or hide additional details of a particular row in response to a user gesture. When the details feature is enabled, a new column containing a toggle (per row) will render in the Table. When a toggle is activated, the details for that row are displayed. When a toggle is deactivated, the details for the row are hidden. The user can also display or hide the details for all rows at the same time (the controls for this feature are enabled by setting the "allDetailsEnabled" property to true.) To enable the details feature set the "detailStamp" facet on the Table. Place the components that are used to show the details (of a row), inside this facet. In the following example, the Person's age is displayed in the details section:
    <tr:table var="row">
      <f:facet name="detailStamp">
        <tr:outputText value="#{row.age}"/>
      </f:facet>
    </tr:table>
            
When a detail row is shown or hidden the Table generates a DisclosureEvent. If all detail rows are shown or hidden the Table fires a DisclosureAllEvent.

Selection

The selection feature of a Table lets the user select one or more rows in the list. The user can then perform some operation on the selected rows by activating an appropriate ActionSource component (e.g., by clicking on a commandButton).

There are two types of selection - single and multiple. The type of selection is determined by the "rowSelection" attribute, which can be set to "single" or "multiple".

Sorting

The Table component supports sorting columns in ascending or descending order. A special 3D border on a column header lets the user know that the column is sortable. When the user clicks on a column header to sort a previously unsorted column, the Table sorts the column data in ascending order. Subsequent clicks on the same header sorts the data in the reverse order.

There are three requirements to enable sorting: the underlying table model must support sorting, the "sortProperty" and "sortable" attributes must be set on the column to enable the sort capability for that column.

To support sorting, the CollectionModel instance must implement the following methods:
    public boolean isSortable(String propertyName)
    public void setSortCriteria(List criteria)
    public List getSortCriteria()
            
If the underlying model is not a CollectionModel, the Table automatically examines the actual data to determine which properties are sortable. Any column that has data that implements java.lang.Comparable is sortable. This automatic support cannot be nearly as efficient as coding sorting directly into a CollectionModel (for instance, by translating the sort into an "ORDER BY" SQL clause), but is sufficient for small data sets. To associate a column with a particular property-name to be used for sorting purposes, use the "sortProperty" attribute on the column. To enable the UI for sorting a particular column, set the "sortable" property to true. For more information see the documentation for <column>. In the following example, both columns are sortable. Sorting the first column sorts by the "firstname" property; sorting the second column sorts by the "lastname" property.
    <tr:table value="...">
      <tr:column sortProperty="firstname" sortable="true">
        <f:facet name="header">
          <tr:outputText value="Firstname" />
        </f:facet>
        ...
      </tr:column>
      <tr:column sortProperty="lastname" sortable="true">
        <f:facet name="header">
          <tr:outputText value="Lastname" />
        </f:facet>
        ...
      </tr:column>
    </tr:table>
          

Banding

Banding is a technique where groups of rows (or columns) are displayed with alternating background colors. This helps to differentiate between adjacent rows (or columns). The "banding" attribute on the Table controls the type of banding to use. The "bandingInterval" attribute controls the number of consecutive rows (or columns) that are colored the same. Note that the above banding attributes on the Table are ignored when the "bandingShade" attribute is used on the Column.

Code Example(s)

<tr:table value="#{myManagedBean.allEmployees}"
          bandingInterval="2" banding="row" var="emp">
  <tr:column>
    <f:facet name="header">
      <tr:outputText value="Name"/>
    </f:facet>
    <tr:outputText value="#{emp.ename}"/>
  </tr:column>
  <tr:column>
    <f:facet name="header">
      <tr:outputText value="Department Number"/>
    </f:facet>
    <tr:outputText value="#{emp.deptno}"/>
  </tr:column>
</tr:table>

Supported Client Events for Client Behaviors

  • click (default)
  • dblclick
  • keydown
  • keypress
  • keyup
  • mousedown
  • mousemove
  • mouseout
  • mouseover
  • mouseup

Events

Type Phases Description
org.apache.myfaces.trinidad.event.RowDisclosureEvent Apply Request Values,
Invoke Application
The expansion event is generated for a table when the detail facet of a row is expanded or collapsed. For tree or a treeTable, the expansion event is generated when tree nodes are expanded or collapsed.
org.apache.myfaces.trinidad.event.SelectionEvent Apply Request Values,
Invoke Application
The selection event is delivered when the table selection changes.
org.apache.myfaces.trinidad.event.RangeChangeEvent Apply Request Values,
Invoke Application
The range change event is delivered when the user navigates.
org.apache.myfaces.trinidad.event.SortEvent Apply Request Values,
Invoke Application
The sort event is delivered when the table column sort criteria is changed.
org.apache.myfaces.trinidad.event.AttributeChangeEvent Invoke Application,
Apply Request Values
Event delivered to describe an attribute change. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change event might include the width of a column that supported client-side resizing.

Supported Facets

Name Description
actions content to be rendered inline with the navigation bar.
detailStamp the component to stamp below every row which is disclosed. Adding a detail facet will automatically cause the detail column to be displayed.
footer the component used to render the table footer.
header the component used to render the table header.

Attributes

Name Type Supports EL? Description
allDetailsEnabled boolean Yes Default Value: false

whether or not to enable the show/hide all links above the table, which allow the user to show/hide all the detail rows. To enable the detail rows, a "detailStamp" facet must be set on this Table.
attributeChangeListener javax.el.MethodExpression Only EL a method reference to an attribute change listener. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing.
autoSubmit boolean Yes Default Value: false

If set to TRUE on a form element, the component will automatically submit the enclosing form when an appropriate action takes place (a click, text change, etc.). This only takes effect if rowSelection attribute enabled.
binding org.apache.myfaces.trinidad.component.core.data.CoreTable Only EL an EL reference that will store the component instance on a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean.
columnBandingInterval int Yes Default Value: 0

the interval between which the column banding alternates. For example, a columnBandingInterval of 1 would display alternately banded columns.
disclosedRowKeys org.apache.myfaces.trinidad.model.RowKeySet Yes the set of disclosed rows for this component. Each entry in the set is a rowKey.
emptyText String Yes text displayed when a table is empty.
first int Yes Default Value: 0

the index of the first row in the currently range of rows. This index is zero-based. This attribute is used to control which range of rows to display to the user.
height String Yes Sets a height to the content of the table. This generates a scrollbar to access all rows in the current range.
horizontalGridVisible boolean Yes Default Value: true

if the horizontal grid lines will be drawn.
id String No the identifier for the component. Every component may be named by a component identifier that must conform to the following rules:
  • They must start with a letter (as defined by the Character.isLetter() method) or underscore ( _ ).
  • Subsequent characters must be letters (as defined by the Character.isLetter() method), digits as defined by the Character.isDigit() method, dashes ( - ), or underscores ( _ ). To minimize the size of responses generated by JavaServer Faces, it is recommended that component identifiers be as short as possible. If a component has been given an identifier, it must be unique in the namespace of the closest ancestor to that component that is a NamingContainer (if any).
immediate boolean Yes Default Value: false

whether or not data validation - client-side or server-side - should take place when events are generated by this component. When immediate is true, the default ActionListener provided by the JavaServer Faces implementation should be executed during Apply Request Values phase of the request processing lifecycle, rather than waiting until the Invoke Application phase.
inlineStyle String Yes the CSS styles to use for this component.
onclick String Yes an onclick Javascript handler.
ondblclick String Yes an ondblclick Javascript handler.
onkeydown String Yes an onkeydown Javascript handler.
onkeypress String Yes an onkeypress Javascript handler.
onkeyup String Yes an onkeyup Javascript handler.
onmousedown String Yes an onmousedown Javascript handler.
onmousemove String Yes an onmousemove Javascript handler.
onmouseout String Yes an onmouseout Javascript handler.
onmouseover String Yes an onmouseover Javascript handler.
onmouseup String Yes an onmouseup Javascript handler.
partialTriggers String[] Yes the IDs of the components that should trigger a partial update.

This component will listen on the trigger components. If one of the trigger components receives an event that will cause it to update in some way, this component will request to be updated too.

Separate multiple triggers with a space. e.g., partialTriggers="cmp1 cmp2"

Identifiers must account for NamingContainers. You can use a single colon to start the search from the root, or use multiple colons to move up through the NamingContainer. For example, "::" will pop out of this component's naming container (it pops out of itself if it is a naming container), ":::" will pop out of two naming containers, etc. The search for the partialTrigger begins from there. e.g., partialTriggers=":::commandButton1" the search begins for the component with id = commandButton1 after popping out of two naming containers relative to this component. To go into naming containers, you separate the naming containers with ':', e.g.,partialTriggers= "nc1:nc2:nc3:componentId".

rangeChangeListener javax.el.MethodExpression Only EL a method reference to a rangeChange listener that will be called when a new range is selected.
rendered boolean Yes Default Value: true

whether the component is rendered. When set to false, no output will be delivered for this component (the component will not in any way be rendered, and cannot be made visible on the client). If you want to change a component's rendered attribute from false to true using PPR, set the partialTrigger attribute of its parent component so the parent refreshes and in turn will render this component.
rowBandingInterval int Yes Default Value: 0

the interval between which the row banding alternates. For example, rowBandingInterval=1 would displayalternately banded rows in the Grid.
rowDisclosureListener javax.el.MethodExpression Only EL a method reference to an ExpansionListener
rowSelection String Yes Valid Values: none, single, multiple
Default Value: none

whether rows in this table selectable. Valid values are "none", "single", "multiple"
rows int Yes Default Value: 25

the maximum number of rows to display in a single range of rows. Some ranges might have fewer than the number of rows specified by this attribute (eg: the last range might have an insufficient number of rows). To display all rows at once, set this attribute to 0. The default is 25.
selectedRowKeys org.apache.myfaces.trinidad.model.RowKeySet Yes the selection state for this component.
selectionListener javax.el.MethodExpression Only EL a method reference to a selection listener
shortDesc String Yes The short description of the component. This text is commonly used by user agents to display tooltip help text.
sortListener javax.el.MethodExpression Only EL a method reference to a sort listener
styleClass String Yes a CSS style class to use for this component.
summary String Yes the summary of this table's purpose and structure for user agents rendering to non-visual media.
value Object Yes the data model being used by this component. The specific model class is org.apache.myfaces.trinidad.model.CollectionModel. You may also use other model instances, e.g., java.util.List , array, and javax.faces.model.DataModel. This component will automatically convert the instance into a CollectionModel.
var String No Name of the EL variable used to reference each element of this collection. Once this component has completed rendering, this variable is removed (or reverted back to its previous value).
varStatus String No Name of the EL variable used to reference the varStatus information. Once this component has completed rendering, this variable is removed (or reverted back to its previous value). The VarStatus provides contextual information about the state of the component to EL expressions. For components that iterate, varStatus also provides loop counter information. Please see the this component's documentation for the specific properties on the varStatus. The common properties on varStatus include:
  • "model" - returns the CollectionModel for this component.
  • "index" - returns the zero based row index.
  • "hierarchicalIndex" - returns an array containing zero based row index.
  • "hierarchicalLabel" - returns a string label representing 1 based index of this row.
  • "rowKey" - returns the current rowKey in the collection.
  • "current" - returns the current row in the collection.
verticalGridVisible boolean Yes Default Value: true

if the vertical grid lines will be drawn.
width String Yes the width of the table. The value must either be a number of pixels or a percentage - it is not a CSS width.