+
+
+The DataTable widget supports nested column headers, which can be defined in the columns definition using the children configuration.
+
+
+
+
+
+
+Using Nested Column Headers
+ +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.
+Note: be sure to add the yui3-skin-sam classname to the
+page's <body> element or to a parent element of the widget in order to apply
+the default CSS skin. See Understanding Skinning.
+
<div id="nested" class="yui3-skin-sam dt-example"></div> <!-- You need this skin class -->
+
+<script type="text/javascript">
+YUI().use("datatable-base", function (Y) {
+var nestedCols = [
+ {label:"Train Schedule", children:[
+ {key: "track"},
+ {label:"Route", children: [
+ {key:"from"},
+ {key:"to"}
+ ]}
+ ]}
+],
+data = [
+ {track:"1", from:"Paris", to:"Amsterdam"},
+ {track:"2", from:"Paris", to:"London"},
+ {track:"3", from:"Paris", to:"Zurich"}
+],
+
+dt = new Y.DataTable({
+ columns: nestedCols,
+ data : data,
+ summary: "Train schedule",
+ caption:"Table with nested column headers"})
+.render("#nested");
+});
+</script>
+
+
+