Controlling table rendering

Table rendering can be controlled by the use of presentation styles and table attributes.

Table width

By default, the width of a TABLE container is defined by the number of visible columns in its layout.
Note: Table column fields defined as HIDDEN will not contribute to computing the default table width.

In this example, the table is defined with three visible columns, which in turn define individual field widths. The sum of the field widths defines the default table width.

<TABLE t1           >
[c1  |c2       |c3  ]
To specify explicitly the width of a table, use the WIDTH attribute:
TABLE t1 : table1, WIDTH = 5 COLUMNS, ... ;
Note: The COLUMNS unit means a number of fields/columns in the TABLE, not grid-columns.

Table height

The height of a TABLE container is by default defined by the number of rows in its layout. In the example, the default table height will be three rows:
<TABLE t1           >
[c1  |c2       |c3  ]
[c1  |c2       |c3  ]
[c1  |c2       |c3  ]
<                   >
To specify explicitly the height of a table, use the HEIGHT attribute:
TABLE t1 : table1, HEIGHT = 10 LINES, ... ;
Note: The LINES unit means a number of lines in the TABLE, not grid-lines.

Showing table grid lines

By default, the grid lines of TABLE container are shown, when the table is controlled by an INPUT ARRAY. The table grid lines are hidden when using a DISPLAY ARRAY.

Define the showGrid style attribute, to indicate if the table widget must show horizontal and/or vertical grid lines:
<Style name="Table.custom_style">
  <StyleAttribute name="showGrid" value="vertical"/>

Alternate background color of odd/even rows

A TABLE container can automatically display odd/even rows with a different background color. This is the default rendering, and it can be disabled with the alternateRows style attribute:
<Style name="Table.custom_style">
  <StyleAttribute name="alternateRows" value="no"/>

Consider using alternateRows instead of :odd/:even pseudo selectors.

Distinguish row on mouse hover

By default, when the mouse hovers over a row, it gets a specific background color to distinguish the row from others. This rendering can be controller with the rowHover style attribute:
<Style name="Table.custom_style">
  <StyleAttribute name="rowHover" value="no"/>

Current row / current cell rendering

In a TABLE container, the highlighting of the current row (or current cell, when focus granularity is at the cell level) can be controlled with style attributes.

Note: The current row / current cell style attributes apply also to stretchable SCROLLGRID containers.

For more details, see Row and cell highlighting in TABLE.

Frozen columns

When the Table style attribute tableType is set to frozenTable, you can define a number of fixed columns on the left and right, respectively with the leftFrozenColumns and rightFrozenColumns style attributes:
<Style name="Table.custom_style">
  <StyleAttribute name="tableType" value="frozenTable"/>
  <StyleAttribute name="leftFrozenColumns" value="2"/>
  <StyleAttribute name="rightFrozenColumns" value="1"/>
Note: With some front-ends (GBC), frozen columns can also be used in Treeviews.

See the reference topics Table style attributes, Tree style attributes.

Stretchable columns

The form items defining columns in a TABLE or TREE container can use a STRETCH=X attribute, to have the column stretch when the container width changes.

To make all columns stretchable, define the TABLE/TREE form item with the STRETCHCOLUMNS attribute. Some columns can then be made non-stretchable individually with STRETCH=NONE.

For stretchable columns, a minimum and maximum stretch width can be defined with the STRETCHMIN and STRETCHMAX attributes. The value for these attributes represents a number of grid layout cells.

STRETCH, STRETCHCOLUMNS, STRETCHMIN and STRETCHMAX can be combined with a @screen-size modifier, to enable these stretching attributes for specific screen sizes.

TABLE definition example using stretchable columns:
[c1  |c2    |c3      ]
EDIT c1 = customer.cust_num;
EDIT c2 = customer.cust_name, STRETCH=X,
EDIT c3 = customer.cust_zipcoe;

In the above example, only the c2 (cust_name) column will stretch, when the table width increases. For small screens, the minimum stretch width will be 5 grid cells, and for large screens the maximum stretch width will be 30 cells.

See also Horizontal stretching.

Flip columns into rows

TABLE containers can define the FLIPPED attribute, to render the table in a way that all cells of a given row get packed vertically. In this rendering mode, the table is thinner and can be displayed on small screens.

The FLIPPED attribute can be combined with a @screen-size modifier, to get this rendering for specific screen sizes (typically with small screens):

Mobile-style list view rendering

Important: FGL-5587: tableType listView will be certainly deprecated: Must use FLIPPED attribute, plus some new style attribute to hide the column headers, then you get a mobile listview rendering.
TABLE containers can be rendered with a mobile list view look and feel, by setting the tableType style attribute to "listView":
<Style name="Table.custom_style">
  <StyleAttribute name="tableType" value="listView"/>
Note: With the classical table rendering, the default physical event to trigger a row choice action is the double-click. When using the listView mode with the tableType style attribute, the physical event to trigger a row selection action is by default a single-click. This can be changed with the rowSelectionAction style attribute.

For the complete list of style attributes, see Table style attributes.

Current row visibility after dialog execution

When the dialog controlling the table has finished, the current row may be deselected, depending on the KEEP CURRENT ROW dialog attribute.