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;
}
Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.
