JSF HTML Tag Reference - Data Table

Documentation

Search

Contents

	1.	Introduction
	2.	Getting Started
	3.	Developing Web Sites
	4.	Using Components
	5.	Internationalization
	6.	Code View Support
	7.	Design View Support
	8.	Keyboard Shortcuts
	9.	Tag Object Toolbars
	10.	JSF Server Behaviors
	11.	Property Inspectors
	12.	JSF Tag Reference

12. JSF Tag Reference

Contents > JSF Tag Reference > JSF HTML Tags

10. JSF HTML Tag Reference

Contents > JSF HTML Tag Reference > h:dataTable

h:dataTable

The dataTable tag renders an HTML 4.01 compliant table element that can be associated with a backing bean to obtain its data as well as for event handling purposes.

The table can be customized extensively using cascading stylesheet (CSS) classes and definitions to enhance the appearance of the table's headers, footers, columns and rows. Common formatting techniques, such as alternating row colors, can be accomplished quite easily with this tag.

The dataTable tag typically contains one or more column tags that define the columns of the table. A column component is rendered as a single "td" element. For more information about columns, see the column tag documentation.

A dataTable tag can also contain header and footer facets. These are rendered as a single "th" element in a row at the top of the table and as a single "td" element in a row at the bottom of the table, respectively.

Example:

<h:dataTable id="table1" value="#{shoppingCartBean.items}" var="item">
  <f:facet name="header">
    <h:outputText value="Your Shopping Cart" />
  </f:facet>
  <h:column>
    <f:facet name="header">
      <h:outputText value="Item Description" />
    </f:facet>
    <h:outputText value="#{item.description}" />
  </h:column>
  <h:column>
    <f:facet name="header">
      <h:outputText value="Price" />
    </f:facet>
    <h:outputText value="#{item.price}" />
  </h:column>
  <f:facet name="footer">
    <h:outputText value="Total: #{shoppingCartBean.total}" />
  </f:facet>
</h:dataTable>

HTML Output

<table id="table1">
  <thead>
    <tr><th scope="colgroup" colspan="2">Your Shopping Cart</th></tr>
    <tr><th>Item Description</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Delicious Apple</td><td>$5.00</td></tr>
    <tr><td>Juicy Orange</td><td>$5.00</td></tr>
    <tr><td>Tasty Melon</td><td>$5.00</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">Total: $15.00</td></tr>
  </tfoot>
</table>

Tag Attributes

bgcolor	String

The bgcolor attribute sets the background color for the table. This value can be the name or the hexadecimal value of the color.

binding	String

The value-binding expression linking this component tag to a backing bean property.

border	String

The border attribute sets the pixel width of the border to be drawn around the table.

cellpadding	String

The cellpadding attribute sets the width between the border of each cell and its contents.

cellspacing	String

The cellspacing attribute sets the width of the space between the outside and inside edges of the table as well as the space between cells.

columnClasses

String

The columnClasses attribute accepts a comma-delimited list of CSS style classes that will be applied to the columns of the table. Style classes for an individual column may also be defined in a space separated list. A style class is applied to a table column as the value for the class attribute of rendered td or th element.

The algorithm used to apply the CSS style classes to the table columns is simple. In the table rendering process, style classes are applied to columns one at a time until (a) there are no more columns to display or (b) there are no more style classes to apply.

If (a) happens at the same time as (b), the next row in the table is rendered.
If (a) happens before (b), the remaining style classes are ignored.
If (b) happens before (a), the remaining columns will not have style classes.

dir	String

The dir attribute is a standard HTML attribute that overrides the default text directionality for this component. The values accepted for this component are "LTR" (left-to-right) and "RTL" (right-to-left).

first	String

The first attribute sets the zero-relative row number of the first row to display in the data table. This allows you to set the starting position in the underlying list or array from which to begin rendering rows of data.

footerClass	String

The footerClass attribute accepts a space-separated list of CSS style classes (or simply a style class) to be applied to the table footer if one has been defined.

frame

String

The frame attribute sets the code specifying which sides of the frame around this table will be visible. The valid values for this attribute are:

none (no sides, default value)
above (top side only)
below (bottom side only)
hsides (top and bottom sides only)
vsides (right and left sides only)
lhs (left hand side only)
rhs (right hand side only)
box (all four sides) and
border (all four sides)

headerClass	String

The headerClass attribute accepts a space-separated list of CSS style classes (or a single style class) to be applied to any header generated for this table.

id	String

The unique identifier value for this component. The value must be unique within the closest naming container.

lang	String

The lang attribute is a standard HTML attribute that sets the code describing the language to be used in the markup generated by this component.

onclick	String

The onclick attribute sets the JavaScript code to execute when the mouse pointer is clicked over this element.

ondblclick	String

The ondblclick attribute sets the JavaScript code to execute when the mouse pointer is double-clicked over this element.

onkeydown	String

The onkeydown attribute sets the JavaScript code to execute when a key is pressed down over this element.

onkeypress	String

The onkeypress attribute sets the JavaScript code to execute when a key is pressed and released over this element.

onkeyup	String

The onkeyup attribute sets the JavaScript code to execute when a key is released over this element.

onmousedown	String

The onmousedown attribute sets the JavaScript code to execute when the mouse pointer is pressed down over this element.

onmousemove	String

The onmousemove attribute sets the JavaScript code to execute when the mouse pointer is moved within this element.

onmouseout	String

The onmouseout attribute sets the JavaScript code to execute when the mouse pointer is moved away from this element.

onmouseover	String

The onmouseover attribute sets the JavaScript code to execute when the mouse pointer is moved onto this element.

onmouseup	String

The onmouseup attribute sets the JavaScript code to execute when the mouse button is released over this element.

rendered	String

A value-binding expression that evaluates to a Boolean condition indicating if this component should be rendered.

rowClasses

String

The rowClasses attribute accepts a comma-delimited list of CSS style classes to be applied to the rows of the table. Style classes for an individual row may also be defined in a space separated list. A style class is applied to a table row as the value for the class attribute of rendered tr element.

Style classes are applied to rows in the same order that they are defined. For example, if there are two style classes, the first is applied to the first row, the second is applied to the second row, the first is applied to the third row, the second is applied to the fourth row, and so on. The list of styles is looped over from the beginning until there are no more rows to display.

rows	String

The rows attribute sets the number of rows to display, starting from the row identified by the "first" attribute. If the value of the rows attribute is set to zero, all available rows in the underlying data model will be displayed.

rules

String

The rules attribute specifies which lines will appear between cells in the table. The valid values for this attribute are:

none (no rules, default value)
groups (between row groups)
rows (between rows only)
cols (between columns only)
and all (between all rows and columns)

style	String

The style attribute sets the CSS style definition to be applied to this component when it is rendered.

styleClass	String

The styleClass attribute sets the CSS class to apply to this component when it is rendered.

summary	String

The summary attribute describes the purpose and structure of the table for accessibility support for assistive devices and non-visual user agents.

title	String

The title attribute is a standard HTML attribute that sets the tooltip text to display for the rendered component.

value	String

The value attribute sets the current value for this component.

var	String

The var attribute sets the name of a request-scope attribute exposing the data for each iteration over the rows in the underlying data model for this table.

width	String

The width attribute sets the width of the entire table for visual user agents.