cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<style scoped>

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* custom styles for this example */

c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example .yui3-datatable {

c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith margin-bottom: 1em;

c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith}

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* css to counter global site css */

c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example table {

c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith width: auto;

c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith}

c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example caption {

c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith display: table-caption;

c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith}

c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example th,

c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith.example td {

c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith text-transform: none;

c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith border: 0 none;

c7aeb2c8479a339ddcc01cf5973c31ddd6277b0dLuke Smith}

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly</style>

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<div class="intro">

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

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly</div>

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly

819e90d415ed17d59af3a247b2ad9d6feb0c21b5Luke Smith<div class="example yui3-skin-sam">

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {{>datatable-nestedcols-source}}

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly</div>

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h2>Using Nested Column Headers</h2>

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly

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

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly```

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {{>datatable-nestedcols-source}}

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly```

cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly