Version 3.17.2

Example: Nested Column Headers

The DataTable widget supports nested column headers, which can be defined in the columns 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.

Note: be sure to add the yui3-skin-sam classname to the page's <body> element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning. 

<div id="nested" class="yui3-skin-sam dt-example"></div>  <!-- You need this skin class -->

<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>