New: Multi-level nesting. The -init rowGroup.dataSrc option can now be used to nest multiple levels of data by providing this option as an array of values. A new example shows this ability.

New: Classes applied by RowGroup are prefixed by `dtrg-` (DataTables RowGroup) to match the similar styling used by other DataTables extensions.

Author: Allan Jardine

css/rowGroup.dataTables.scss

@@ -1,9 +1,27 @@
 
 
 $table-rowgroup-background: #e0e0e0 !default;
+$table-rowgroup-background-level-1: #f0f0f0 !default;
+$table-rowgroup-background-level-2: #f3f3f3 !default;
 
-table.dataTable tr.group td {
-	font-weight: bold;
+table.dataTable tr.dtrg-group td {
 	background-color: $table-rowgroup-background;
 }
 
+table.dataTable tr.dtrg-group.dtrg-level-0 td {
+	font-weight: bold;
+}
+
+table.dataTable tr.dtrg-group.dtrg-level-1 td,
+table.dataTable tr.dtrg-group.dtrg-level-2 td {
+	background-color: $table-rowgroup-background-level-1;
+	padding-top: 0.25em;
+	padding-bottom: 0.25em;
+	padding-left: 2em;
+	font-size: 0.9em;
+}
+
+table.dataTable tr.dtrg-group.dtrg-level-2 td {
+	background-color: $table-rowgroup-background-level-2;
+}
+

docs/api/rowGroup().dataSrc().xml

@@ -10,16 +10,18 @@
 		<description>
 			Get the property currently being used as the grouping data source.
 		</description>
-		<returns type="number|string">Data source property</returns>
+		<returns type="number|string|array">Data source property</returns>
 	</type>
 
 	<type type="function">
 	<name>rowGroup().dataSrc()</name>
 		<signature>rowGroup().dataSrc( prop )</signature>
 		<description>
 			Set the property to be used as the grouping data source.
+
+			As of RowGroup 1.1.0 it is possible to set this value to be an array, allowing multiple levels of row grouping.
 		</description>
-		<parameter name="prop" type="number|string">
+		<parameter name="prop" type="number|string|array">
 
 		</parameter>
 		<returns type="DataTables.Api">DataTables API instance</returns>

docs/option/rowGroup.dataSrc.xml

@@ -10,6 +10,12 @@
 		</description>
 	</type>
 
+	<type type="array" since="1.1.0">
+		<description>
+			As of RowGroup 1.1.0 it is possible to nest multiple levels of data by providing this parameter as an array of values. The values can be numbers or strings as defined above. The top level of nesting is array index 0, and progressively gets deeper with the array indexes.
+		</description>
+	</type>
+
 	<default value="0"/>
 
 	<description>
@@ -30,6 +36,19 @@ $('#myTable').DataTable( {
 	}
 } );
 
+]]></example>
+
+	<example title="Nested data"><![CDATA[
+
+$('#myTable').DataTable( {
+	rowGroup: {
+		dataSrc: [
+			'group',
+			'date'
+		]
+	}
+} );
+
 ]]></example>
 
 </dt-option>

examples/initialisation/multipleGroups.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html" order="7">
+
+<css lib="datatables rowgroup">
+
+tr.odd td:first-child,
+tr.even td:first-child {
+	padding-left: 4em;
+}
+
+</css>
+<js lib="jquery datatables rowgroup">
+<![CDATA[
+
+$(document).ready(function() {
+	$('#example').DataTable( {
+		order: [[2, 'asc'], [1, 'asc']],
+		rowGroup: {
+			dataSrc: [ 2, 1 ]
+		},
+		columnDefs: [ {
+			targets: [ 1, 2 ],
+			visible: false
+		} ]
+	} );
+} );
+
+]]>
+</js>
+
+<title lib="RowGroup">Multi-level grouping</title>
+
+<info><![CDATA[
+
+RowGroup provides the ability to group data a multiple levels. This example shows the `-init rowGroup.dataSrc` option being used as an array to specify the _Office_ as the top level group and _Position_ as the second level.
+
+A little CSS is used to indent the first column to reflect the visual nesting of data (click the "CSS" tab below to view).
+
+]]></info>
+
+</dt-example>
+