Data Table

Data Table

Creates a table of data in which the rows correspond to data records and the columns correspond to fields or categories. Features include paging controls, headers and footers, and support for row selection and actions.

Component at design time

Drag and drop a
Data Table component onto the page:

The
Data Table component on the page at design time:

Restriction: Absolute positioning and the scrolling feature can not be used in the same data table.

Component at runtime

The
Data Table component on the page at runtime:

Properties and All Attributes views

The Properties view for a component shows the most common set of attributes you can set on a component, and, depending on the component, you might also see options for adding controls, actions, or other components. To open the Properties view, click

Window | Show View | Properties.

These common attributes for the Data Table component display on the h:dataTable, Display Options, and Row Actions tabs in the Properties view. See the All Data Table attributes table for a complete list of attributes. Additional configuration options to add actions and change the table display and navigation are on theh:dataTable>Display Options and h:dataTable>Row Actions tabs:
Table 1. Data Table configuration options

Configuration option

Description

Add an action that is performed when a row is clicked

Allows you to create a runtime action that happens when a row is clicked.

Add an edit column that brings up a form for in-place editing of row content

Allows you to provide in-row editing at runtime.

Add deluxe pager

Adds a component to the footer area that uses arrows to move between pages.

Add goto pager

Adds a component to the footer area that lets you select a page from a drop-down list.

Add page information

Adds a component to the footer area that displays statistics on the pages.

Add selection column to the table

Allows you to add a column with choices related to the table contents.

Add action that manipulates selection to header

Allows you to create an action that manipulates the header information.

Add simple pager

Adds a component to the footer that creates a simple drop down menu for moving to the next page.

Add a Web style pager

Adds each page number to the footer area so that the desired page can be clicked on by the user.

Categorization>Add column to categorize table rows
Categorization>Remove column to categorize table rows

Adds a column with a row categorization component where you can set table sort values and add icons or text to the column. Once added, the Categorization icon changes to Remove.

Columns

Adds or removes column components from the table. You can set the label, width, and ID for each column and move them within the table.

Show footer

Checking this box inserts a footer region, f:facet (footer) and h:panelBox, into the data table which can then be populated with other components.

Show header

Checking this box inserts a header region, f:facet (header) and h:panelBox, into the data table which can then be populated with other components.

Click to create/edit custom validation code

Switches to the Quick Edit view so that scripts or snippets of code may be entered for various user initiated events.

The All Attributes view shows a table of all the attributes you can set on a component, which includes those attributes you can access from the Properties view. To switch to the All Attributes view, click the
All Attributes icon in the upper right corner of the Properties view.

Table 2. All Data Table attributes

Attribute name

Represented in Properties view by

Description

bgcolor

Background color

Specifies the background color in 6 digit hexadecimal RGB values beginning with a # symbol, or by entering a color name, for example, black, white, or blue.

border

Border

Specifies, in pixels, the size of the border for the table.

binding

Not represented

An expression that binds the component's instance (usually a user interface component) to a bean property (usually in the backing file).

cellpadding

Padding

Specifies the amount of space between the border of the cell and the cell contents. If the value of this attribute is a pixel length, all four margins should be this distance from the contents.

cellspacing

Spacing

Specifies, in pixels, the amount of space to leave between cells.

columnClasses

Column Classes

Assigns a defined CSS stylesheet style for the columns of the data table component. The CSS stylesheet file must be linked into the component's JSP before it can be used. This may be entered manually, or by clicking the button and selecting the desired classes from within the window.

dir

Not represented

Specifies the component's direction when rendered at runtime. The values can be either:

ltr - left to right

rtl - right to left
If the direction is not specified, a direction appropriate to the encoding of the component is used.

first

Not represented

Index of the first row to be displayed.

footerClass

Footer Class

Assigns a defined CSS stylesheet style for the column headers of the data table component. The CSS stylesheet file must be linked into the component's JSP before it can be used. This may be entered manually, or by clicking the button and selecting the desired class from within the window.

frame

Not represented

Specifies which sides of the frame surrounding a grid will be visible.

headerClass

Header Class

Assigns a defined CSS stylesheet style for the column headers of the data table component. The CSS stylesheet file must be linked into the component's JSP before it can be used. This may be entered manually, or by clicking the button and selecting the desired class from within the window.

id

ID

Assigns a name to a component. Should be a unique name within a JSP.

lang

Not represented

The language of the component's value(s) and text content. If omitted, the language is inherited from the containing tags (notably the view. Specified as an ISO-standard language abbreviation code. For example, "en" for English, "en-US" for American English, "fr" for French, "de" for German.

Note: This does not "translate" the text in the component, rather, it identifies the language of the component so that operations such as searching, sorting, collating and the like are done correctly.

rendered

Not represented

Can be set to true or false:

false - Component will not be rendered to the browser at runtime.

true - Component will get rendered. This is the default value.

rowClasses

Row Classes

A set of classes which are cycled through as the rows are displayed. This may be defined manually, or by clicking the button and selecting the desired classes from within the window.

rows

Rows per page

Specifies the number of rows displayed at runtime.

rules

Not represented

Specifies which rules will appear between cells within a table:

none

groups

rows

cols

all

style

Style: Props

Specifies CSS style information for the component (for example, style="font-size : 8pt ; color : red"). Defines the properties (such as font and color) of the selected component. This may be done manually, or by clicking the button and selecting the desired properties from within the window.

styleClass

Style: Classes

Space-separated list of CSS style classes to be applied when this element is rendered. This value must be passed through as the class attribute on generated markup. Defines the classes (such as style sheets) of the selected component. This may be done manually, or by clicking the button and selecting the desired Classes from within the window.

summary

Not represented

Specifies a summary details string for user agents rendering to non-visual media.

title

Not represented

Specifies the title text, shown in browser as a tooltip at runtime. Used by a browser as the alternative text of a component if the alternative text is not specified.

value

Value

Specifies the initial text value for the component displayed at runtime. Contains information to be displayed, in the form of a specified value or a pointer to a dynamic value.

var

Not represented

Specifies the reference variable name for the data available using the value attribute.

width

Width

Specifies the width of the component in either pixels or percentage. To specify percentage is to be used append % to the value.

Configuration option	Description
Add an action that is performed when a row is clicked	Allows you to create a runtime action that happens when a row is clicked.
Add an edit column that brings up a form for in-place editing of row content	Allows you to provide in-row editing at runtime.
Add deluxe pager	Adds a component to the footer area that uses arrows to move between pages.
Add goto pager	Adds a component to the footer area that lets you select a page from a drop-down list.
Add page information	Adds a component to the footer area that displays statistics on the pages.
Add selection column to the table	Allows you to add a column with choices related to the table contents.
Add action that manipulates selection to header	Allows you to create an action that manipulates the header information.
Add simple pager	Adds a component to the footer that creates a simple drop down menu for moving to the next page.
Add a Web style pager	Adds each page number to the footer area so that the desired page can be clicked on by the user.
Categorization>Add column to categorize table rows Categorization>Remove column to categorize table rows	Adds a column with a row categorization component where you can set table sort values and add icons or text to the column. Once added, the Categorization icon changes to Remove.
Columns	Adds or removes column components from the table. You can set the label, width, and ID for each column and move them within the table.
Show footer	Checking this box inserts a footer region, f:facet (footer) and h:panelBox, into the data table which can then be populated with other components.
Show header	Checking this box inserts a header region, f:facet (header) and h:panelBox, into the data table which can then be populated with other components.
Click to create/edit custom validation code	Switches to the Quick Edit view so that scripts or snippets of code may be entered for various user initiated events.

Attribute name	Represented in Properties view by	Description
bgcolor	Background color	Specifies the background color in 6 digit hexadecimal RGB values beginning with a # symbol, or by entering a color name, for example, black, white, or blue.
border	Border	Specifies, in pixels, the size of the border for the table.
binding	Not represented	An expression that binds the component's instance (usually a user interface component) to a bean property (usually in the backing file).
cellpadding	Padding	Specifies the amount of space between the border of the cell and the cell contents. If the value of this attribute is a pixel length, all four margins should be this distance from the contents.
cellspacing	Spacing	Specifies, in pixels, the amount of space to leave between cells.
columnClasses	Column Classes	Assigns a defined CSS stylesheet style for the columns of the data table component. The CSS stylesheet file must be linked into the component's JSP before it can be used. This may be entered manually, or by clicking the button and selecting the desired classes from within the window.
dir	Not represented	Specifies the component's direction when rendered at runtime. The values can be either: ltr - left to right rtl - right to left If the direction is not specified, a direction appropriate to the encoding of the component is used.
first	Not represented	Index of the first row to be displayed.
footerClass	Footer Class	Assigns a defined CSS stylesheet style for the column headers of the data table component. The CSS stylesheet file must be linked into the component's JSP before it can be used. This may be entered manually, or by clicking the button and selecting the desired class from within the window.
frame	Not represented	Specifies which sides of the frame surrounding a grid will be visible.
headerClass	Header Class	Assigns a defined CSS stylesheet style for the column headers of the data table component. The CSS stylesheet file must be linked into the component's JSP before it can be used. This may be entered manually, or by clicking the button and selecting the desired class from within the window.
id	ID	Assigns a name to a component. Should be a unique name within a JSP.
lang	Not represented	The language of the component's value(s) and text content. If omitted, the language is inherited from the containing tags (notably the view. Specified as an ISO-standard language abbreviation code. For example, "en" for English, "en-US" for American English, "fr" for French, "de" for German. Note: This does not "translate" the text in the component, rather, it identifies the language of the component so that operations such as searching, sorting, collating and the like are done correctly.
rendered	Not represented	Can be set to true or false: false - Component will not be rendered to the browser at runtime. true - Component will get rendered. This is the default value.
rowClasses	Row Classes	A set of classes which are cycled through as the rows are displayed. This may be defined manually, or by clicking the button and selecting the desired classes from within the window.
rows	Rows per page	Specifies the number of rows displayed at runtime.
rules	Not represented	Specifies which rules will appear between cells within a table: none groups rows cols all
style	Style: Props	Specifies CSS style information for the component (for example, style="font-size : 8pt ; color : red"). Defines the properties (such as font and color) of the selected component. This may be done manually, or by clicking the button and selecting the desired properties from within the window.
styleClass	Style: Classes	Space-separated list of CSS style classes to be applied when this element is rendered. This value must be passed through as the class attribute on generated markup. Defines the classes (such as style sheets) of the selected component. This may be done manually, or by clicking the button and selecting the desired Classes from within the window.
summary	Not represented	Specifies a summary details string for user agents rendering to non-visual media.
title	Not represented	Specifies the title text, shown in browser as a tooltip at runtime. Used by a browser as the alternative text of a component if the alternative text is not specified.
value	Value	Specifies the initial text value for the component displayed at runtime. Contains information to be displayed, in the form of a specified value or a pointer to a dynamic value.
var	Not represented	Specifies the reference variable name for the data available using the value attribute.
width	Width	Specifies the width of the component in either pixels or percentage. To specify percentage is to be used append % to the value.