VCL table

Display tabular data.

Features

The following basic aspects of table formatting are supported through modifiers and other classes:

Cell and column highlighting

Single cells and columns can be highlighted by using the vclCellHighlight class on each tdin the respective column or on single cells only.

Column width

The column width can be defined in the table header using one of the layout spans vclSpan-5p - vclSpan-100p from the corresponding module.

Column sortability

Sortable columns are defined with the vclSortableCol class on the respective ths. This class gives the whole header a pointer cursor on hover to indicate an action. The application must register an appropriate event handler to change the sort order for the whole th accordingly. Also an icon which indicates sortability should be used as shown in the second column. The currently active sort order is indicated by a respective icon and the classes vclSortAsc or vclSortDesc on the th element.

Row and cell selectability

Rows can be styled to suggest their selectability (single or multiple) using the vclRowSelectability modifier which makes rows show a pointer cursor on hover.

Row and cell selection

Individual cells and thus rows can be visually selected using the vclSelected class.

Row hover highlighting

If a table row should be highlighted on hover, the vclRowHoverHighlight modifier class can be used. This hovering's intention is just for the sake of readability and should not indicate an action.

Disabled rows

Rows can be visually disabled with the vclDisabled modifier.

Alternating row color

Optionally an alternating row color can be defined by using the modifier vclAltRowColor.

Border configuration

The cell borders are removed with vclNoBorder. The border style can be changed from solid to dotted by using the vclDottedBorder modifier.

Padding style

If the default cell padding is too extensive, vclCondensed makes it more compact.

Borders style

By default, only horizontal borders are shown. For vertical borders, use the vclVerticalBorder modifier.

Text alignment

Left alignment is default, for centered text use class vclAlignCentered and for right aligned text vclAlignRight on tds.

Vertical alignment

Top alignment is default, for vertically centered content use class vclVAlignMiddle and for bottom aligned content vclVAlignBottom on a table or tds.

Pagination

The pagination component can be combined with the table.

Layout

The auto layout mode is used by default. For tables with toolbars however, the vclFixed class must be used to enable the fixed table layout mode.

Truncation

In conjunction with the fixed layout mode, the modifier vclNoWrap can be used to truncate all cell content which would span more than one line and show an ellipsis to indicate truncated content instead.

Individual cells can also be truncated using the general vclNoWrap and vclOverflowEllipsis modifiers from the utils module.

Wrapping behavior

To allow breaking words of textual cell content apart, use the modifier vclBreakWords. This works best in combination with the fixed layout mode.

Usage

basic example

With only examples it is impossible to show all possible permutation of modifiers.

Classes

• vclTable

Modifiers

Table

• vclCellHighlight
• vclRowSelectability
• vclRowHoverHighlight
• vclNoBorder
• vclCondensed
• vclAltRowColor
• vclAlignCentered
• vclAlignRight
• vclVAlignMiddle
• vclVAlignBottom
• vclNoWrap

Row

• vclNoWrap (from utils)
• vclOverflowEllipsis (from utils)
• vclSelected
• vclDisabled

Cell

• vclSortableCol
• vclSortAsc
• vclSortDesc
• vclSelected
• vclNoWrap (from utils)
• vclOverflowEllipsis (from utils)
• vclDisabled

Variables

• --table-color
• --table-disabled-color
• --table-border-color
• --table-bg-color
• --table-header-bg-color
• --table-header-color
• --table-header-button-hover-color
• --table-footer-bg-color
• --table-footer-color
• --table-alt-bg-color
• --table-highlight-bg-color
• --table-highlight-hover-bg-color
• --table-row-selected-color
• --table-row-selected-bg-color

Demo

example.html on GH-pages.