A container that lays out child widgets in a set number of columns.
Each widget can have a 'label' or 'title' attribute which can
be configured to be displayed beside or above each widget.
The TableContainer has no default styling, as the base implementation
is designed to be a simple layout mechanism. However you can style the
labels and value cells and rows very easily. This page shows how four
different styling schemes, greyLNF, greyBlueLNF, greenLNF and innerLNF
can be applied to TableContainers.
A simple single column layout, with labels in the default horizontal alignment:
A two column layout, with labels in the default horizontal alignment, with custom styling:
A three column nested layout with custom styles, that you can configure using the drop down controls below:
Notice the two nested TableContainers, highlighted in blue.
One has the 'spanLabel' attribute set to "true"
so that it takes up both the value cell and the label cell.
The other has the label "Nested TableContainer" set.
This table also automatically changes the number of columns based on its width,
in order to maintain a minimum cell width. Try resizing the screen to
see this in action.
Set the number of columns:
Set the label layout:
Set the custom CSS:
This is a ContentPane with a label
This is just some text that fills a couple of cells,
look at it wrap around!!!!
This table tests the use of the 'colspan' attribute with labels enabled
colspan = 1
colspan = 1
colspan = 1
colspan = 2
colspan = 2
colspan = 1
colspan = 1
colspan = 1
colspan = 3
colspan = 4 (just takes up 3)
This table tests the use of the 'colspan' attribute with labels disabled
colspan = 1
colspan = 1
colspan = 1
colspan = 2
colspan = 2
colspan = 1
colspan = 1
colspan = 1
colspan = 3
colspan = 4 (just takes up 3)
This is a programmatically created TableContainer
Test resize of the TableContainer
Drag the splitter to resize the TableContainer in the right/center region and confirm the column widths resize correctly to their new width