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

.notice {

background: #faf3d1;

border: 1px solid #eac9a9;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: px;

padding: 0 1em;

-moz-box-shadow: 0 0 5px #ccc8b3;

-webkit-box-shadow: 0 0 5px #ccc8b3;

box-shadow: 0 0 5px #ccc8b3;

margin-bottom: 1em;

}

</style>

<div class="notice">

<p>

<strong>NOTICE</strong>: This example is for the <strong>deprecated

version of DataTable</strong>. The components referred to here will be

removed in future versions of YUI</strong>. If you are unable to

upgrade to <a href="../datatable/index.html">the latest DataTable

version</a> due to unresolvable feature conflicts from version 3.4.1 or

prior, please <a href="../../../projects/yui3/newticket/">file a

ticket</a>.

</p>

</div>

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

```

{{>datatable-nestedcols-source}}

```