A Table Column component is part of a Table component and is always associated with a Table Row Group component in the table. When you add a Table component to a Visual Web JSF page, a Table Row Group component containing three Table Column components is automatically added to the Table Component. You can drag a Table Column component to a Visual Web JSF page in the Visual Designer and drop it on an existing Table Column in a Table Row Group, or you can drop it on a Table Row Group node in the Navigator window.
Table Column components are the equivalent of <td>
tags in HTML and are always associated with Table Row Group components. The Table Column component is called a tableColumn
in the JSP code, and the associated Java class in the page bean is TableColumn
.
To work with a Table Column component, you can select it either in the Visual Designer or in the Navigator window and then edit its properties. With the Table Column selected in the Visual Designer, you can right-click and choose a number of options from the pop-up menu, some of which are described below:
You can add components other than those in the menu, but first you must add a Group Panel component, and then you can put the component in the Group Panel. It is easiest to drop components on the Group Panel in the Navigator window. You might have to drop the component and then move it in the Navigator window to ensure that it is actually in the Group Panel.
The Table Column component is used to define attributes for XHTML <td>
elements, which are used to display table data cells. However, the rendering of column headers and footers is handled by the Table Row Group component. The following table shows the layout of a Table component, with the areas defined with Table Column properties in blue and the rest of the Table component in gray.
Title Bar | ||||||||||||
Action Bar (top) | ||||||||||||
|
||||||||||||
Action Bar (bottom) | ||||||||||||
Footer |
The Column Header area displays a header for each table column. If you specify the text of a column header with the headerText
property, the default implementation of the header is rendered. You can add extra HTML code to the header's rendered <td>
element with the extraHeaderHtml
property.
The following Column properties can be used to change the appearance and behavior of sorting of the Column Header:
sort
- Specifies a sort key and makes a column sortable.
sortIcon
- Specifies a theme identifier to select a different image to use as the sort icon that is displayed in the header of a sortable column.
sortImageURL
- Specifies the path to an image to use as the sort icon that is displayed in the header of a sortable column.
descending
- When set to true
causes the column to be sorted in descending order.
severity
- Specifies the severity of an alarm in each cell and causes the column to sort on the severity value if used with the sort
attribute. footerText
property, the default implementation of the footer is rendered. You can add extra HTML code to the footer's rendered <td>
element with the extraFooterHtml
property.The Table Column Footers area displays column footers at the bottom of the table. Table column footers are useful in tables with multiple groups of rows. If you specify the text of table column footers with the tableFooterText
property, the default implementation of the footer is rendered. You can add extra HTML code to the table footer's rendered <td>
element with the extraTableFooterHtml
property.