new ludo.layout.Table(config)

When layout.type is set to "table", children will be arranged in a table layout.
For demo, see Table layout demo.

Name Type Description
config Object
Name Type Description
columns Object

Column configuration for the table layout. These layout options are added to the parent View.

Name Type Description
width Number

Optional width of column

weight Number

Optional width weight of columns. "weight" means use remaining space.
In a view where width is 400, and you have three columns, one with fixed with of 100,
one with weight of 1 and one width weight of 2, the first column will use get its fixed with of 100.
The second one will get a width of 100(300(remaining width) 1(weight) / 3(total weight)) and last column a width of 200
(300(remaining width)
2(weight) / 3(total weight))

row Number

true to create a new row. (Option for child layout)

vAlign Number

Optional Vertical alignment of View(top|middle|bottom|baseline). Default: "top"(Option for child layout)

simple Number

true when there are no colspan or rowspan. When this option is true, you don't need to set row:true to specify new rows.

var w = new ludo.Window({
        title: 'Table layout',
        layout: {
            // position and size of this window
            left: 20, top: 20,width: 600, height: 600,
            // render children in a table layout
            type: 'table',
            // Define columns, weight means use remaining space
            columns: [
                {width: 100}, {width: 200}, {weight: 1}
        css: {
            border: 0
        children: [
            {html: 'First row 1 '},
            {html: 'First row 2 '},
            // Table picker below spans 3 rows
                type: 'calendar.TimePicker',
                layout: {
                    height: 200,
                    rowspan: 3
            // Place the cell below in a new row
            {html: 'Second row 1 ', layout: {row: true, vAlign : 'top' }},
            {html: 'Second row 2 '},
            {html: 'Third row 1 ', layout: {row: true, colspan : 2}}