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.

How to customize the table header

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

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.

The following example shows you how you can customize the header of the table.

It is based on a CSS file provided as part of the JViews TGO demonstration software at <installdir> /samples/table/styling/data/table.css.

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;

}

How to customize the order of columns in a table

The property listed in the following table controls the order of columns in a table.

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.

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";

}

How to customize the height of rows in a table

The property listed in the following table controls the height of rows in a table.

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.

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;

}