Example: Nested Column Headers

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", 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"}
],

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