<style scoped>
/* 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 — therefore parent columns may have a `label` value but a `key` value is unnecessary.</p>
```
{{>datatable-nestedcols-source}}
```