dojox.layout.TableContainer

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 - actual colspan = null
colspan = 1 - actual colspan = null
colspan = 1 - actual colspan = null
colspan = 2 - actual colspan = 3
colspan = 2 - actual colspan = 3
colspan = 1 - actual colspan = null
colspan = 1 - actual colspan = null
colspan = 1 - actual colspan = null
colspan = 3 - actual colspan = 5
colspan = 4 (just takes up 3) - actual colspan = 5

This table tests the use of the 'colspan' attribute with labels disabled

colspan = 1 - actual colspan = null
colspan = 1 - actual colspan = null
colspan = 1 - actual colspan = null
colspan = 2 - actual colspan = 2
colspan = 2 - actual colspan = 2
colspan = 1 - actual colspan = null
colspan = 1 - actual colspan = null
colspan = 1 - actual colspan = null
colspan = 3 - actual colspan = 3
colspan = 4 (just takes up 3) - actual colspan = 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

(left)
Width: 242
Width: 242
Nested BC region width: 503
Nested BC region width: 241