<style>
/* custom styles for this example */
.example .yui3-datatable {
    margin-bottom: 1em;
}

/* css to counter global site css */
.example table {
    width: auto;
}
.example caption {
    display: table-caption;
}
.example th,
.example td {
    text-transform: none;
    border: 0 none;
}
</style>

<div class="intro">
    <p>The DataTable widget supports nested column headers, which can be defined in the columns definition using the `children` configuration.</p>
</div>

<div class="example yui3-skin-sam">
    {{>datatable-nestedcols-source}}
</div>

<h2>Using Nested Column Headers</h2>

<p>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 &mdash; therefore parent columns may have a `label` value but a  `key` value is unnecessary.</p>
{{>need-skin-note}}
```
    {{>datatable-nestedcols-source}}
```

