Example: Nested Column Headers

NOTICE: This example is for the deprecated version of DataTable. The components referred to here will be removed in future versions of YUI. If you are unable to upgrade to the latest DataTable version due to unresolvable feature conflicts from version 3.4.1 or prior, please file a ticket.

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.

<div id="nested" class="yui3-skin-sam dt-example"></div>

<script type="text/javascript">
YUI().use("datatable-base-deprecated", 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"}
],

cs = new Y.Columnset({definitions:nestedCols}),
dt = new Y.DataTable.Base({columnset:nestedCols, recordset:data, summary:"Train schedule", caption:"Table with nested column headers"}).render("#nested");
});
</script>

Examples