#

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