DataTable: Nested Column Headers
The DataTable widget supports nested column headers, which can be defined in the columnset definition using the children configuration.
Using Nested Column Headers
Use nested columns to visually group related column headers. The children attribute associates a parent column to its descendants. Note that only bottom-level columns will have data values. Any parent columns are there for presentation purposes only and do not hold any data values directly — therefore parent columns may have a label value but a key value is unnecessary.
YUI().use("datatable-base", function (Y) { var nestedCols = [ { label: "Train Schedule", children: [ { key: "track" }, { label: "Route", children: [ {key:"from"}, {key:"to"} ] } ] } ], data = [ {track:"1", from:"Paris", to:"Amsterdam"}, {track:"2", from:"Paris", to:"London"}, {track:"3", from:"Paris", to:"Zurich"} ], table = new Y.DataTable.Base({ columnset: nestedCols, recordset: data, summary: "Train schedule", caption: "Table with nested column headers" }).render("#nested"); ...
