Customizing Table Column Headers and Rows

Styling > Using Cascading Style Sheets > Customizing Table Column Headers and Rows

Customizing Table Column Headers and Rows

The table component uses a default renderer to render the column header (an instance of IlpTableHeaderRenderer). This renderer is based on the CSS configuration of the business objects, the attributes, and the table component itself.

This section describes the properties used in the CSS configuration and shows how to customize them.

Customizing the Rendering of the Header

The following table lists the properties used by the JViews TGO default header renderer.

Table 2.5 CSS Properties for the Table Header

CSS Property	Type of Value	Default	Usage
`horizontalAlignment`	`SwingConstants`	`Center`	Horizontal position of the label and icon in the header cell. Possible values are: `Center` `Left` `Right`
`icon`	`Image`	`null`	Icon to be displayed.
`iconVisible`	`Boolean`	`true`	Determines whether the icon is displayed or not. If this value is `true` and `icon` is `null`, the icon will not be displayed.
`background`	`Color`	`null`	Color to be used for the label background. By default, the color is gray.
`foreground`	`Color`	`null`	Color to be used for the label foreground. By default, the color is black.
`labelFont`	`Font`	`null`	Font to be used for the label. By default, it is a sans serif font.
`labelInsets`	`Integer`	`1`	Space in pixels around the label and icon.
`labelPosition`	`IlvDirection`	`Right`	Position of the label relative to the icon. Possible values are: `Center` `Top` `Left` `Bottom` `Right`
`labelSpacing`	`Float`	`4.0f`	Spacing between the label and the icon.
`label`	`String`	`null`	Text to be displayed for the label. By default, there is no text.
`labelVisible`	`Boolean`	`true`	Determines whether the label string is displayed or not.
`toolTipText`	`String`	`null`	Tooltip text for the header cell. By default, there is no tooltip text.
`verticalAlignment`	`SwingConstants`	`Center`	Vertical position of the label and icon in the header cell. Possible values are: `Center` `Top` `Bottom`.
`preferredWidth`	`Integer`	`-1`	The table will attempt to use this as the width of the column corresponding to the attribute. The actual width may be different if you have set an autoresize mode other than `AUTO_RESIZE_OFF`.
`sortingPriority`	`Integer`	`0`	Determines the sort priority of the column. `0`=highest priority. If several columns have a `0` priority, the sort order will be random.
`sortingMode`	`IlpSortingMode`	`None`	Sorting mode of the column. Possible values are: `ASCENDING` `DESCENDING` `NONE`
`visible`	`Boolean`	`true`	Determines whether the corresponding column should be hidden or shown by default.
`index`	`Integer`	`-1`	Determines the index of the column that represents the attribute. This value takes precedence over the `tableColumnOrder` property.

How to Customize the Table Header

The following example shows you how you can customize the header of the table. It is based on the CSS file located in

<installdir>/samples/table/styling/data/table.css

where <installdir> is the directory where you have installed JViews TGO.

The CSS selectors used to customize the table header are formed by the CSS type attribute and the CSS class <business class name/attribute name>, as illustrated below:

attribute."Alarm/identifier" {
  label: "Alarm ID";
  toolTipText: "Alarm identifier";
  preferredWidth: 200;
  horizontalAlignment: Center;
  iconVisible: false;
}
 
attribute."Alarm/creationTime" {
  label: "Created";
  toolTipText: "Creation time";
  preferredWidth: 250;
  sortingMode: DESCENDING;
}

How to Customize Multiple Columns in the Table Header using Wildcards

The CSS selectors used to customize the table header are formed by the CSS type attribute and the CSS class <business class name/attribute name>, as illustrated in the example above. However, you can use the * wildcard to indicate that multiple attributes of a given business class should be configured using a single selector.

The following example illustrates how you can configure all the columns of the Alarm business class to have a specific horizontal alignment and icon visibility:

attribute."Alarm/*" {
  horizontalAlignment: Center;
  iconVisible: false;
}

Customizing the Table Column Order

The following property controls the order of columns in a table:

Table 2.6 CSS Property for the Table Column Order

CSS Property	Type of Value	Default	Usage
`tableColumnOrder`	`String`	`null`	Defines the column order for the business class represented in the table. Contains a list of attribute names. By default, no column order is defined.

How to Customize the Order of Columns in a Table

The order of the columns in a table is associated with the business class that is represented. The CSS selectors used to customize this accepted class are formed by the CSS type object and the CSS class <business class name>, as illustrated below:

object."Alarm" {
  tableColumnOrder: "identifier, creationTime, acknowledged, perceivedSeverity";
}

Customizing the Table Row Height

The following property controls the height of rows in a table:

Table 2.7 CSS Property for the Table Row Height

CSS Property	Type of Value	Default	Usage
`tableRowHeight`	`Integer`	`16`	Defines the row height for the business class represented in the table.

How to Customize the Height of Rows in a Table

The height of rows in a table is associated with the business class that is represented. The CSS selectors used to customize this accepted class are formed by the CSS type object and the CSS class <business class name>, as illustrated below:

object."ilog.tgo.model.IltLink" {
  tableRowHeight: 27;
}

PREVIOUS NEXT