<style scoped>

/* custom styles for this example */

.dt-example {margin:1em;}

/* css to counter global site css */

.dt-example th {text-transform:none;}

.dt-example table {width:auto;}

.dt-example caption {display:table-caption;}

</style>

<div class="intro">

<p>The DataTable widget supports nested column headers, which can be defined in the columnset definition using the `children` configuration.</p>

</div>

<div class="example">

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

```

{{>datatable-nestedcols-source}}

```