<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html" order="12">

<css lib="datatables" />
<css><![CDATA[
tr.group,
tr.group:hover {
	background-color: #ddd !important;
}
]]></css>
<js lib="jquery" />
<js lib="datatables" />

<title>Row grouping</title>
<js><![CDATA[

$(document).ready(function() {
	var groupColumn = 2;
	var table = $('#example').DataTable({
		"columnDefs": [
			{ "visible": false, "targets": groupColumn }
		],
		"order": [[ groupColumn, 'asc' ]],
		"displayLength": 25,
		"drawCallback": function ( settings ) {
			var api = this.api();
			var rows = api.rows( {page:'current'} ).nodes();
			var last=null;

			api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
				if ( last !== group ) {
					$(rows).eq( i ).before(
						'<tr class="group"><td colspan="5">'+group+'</td></tr>'
					);

					last = group;
				}
			} );
		}
	} );

	// Order by the grouping
	$('#example tbody').on( 'click', 'tr.group', function () {
		var currentOrder = table.order()[0];
		if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
			table.order( [ groupColumn, 'desc' ] ).draw();
		}
		else {
			table.order( [ groupColumn, 'asc' ] ).draw();
		}
	} );
} );

]]></js>

<info><![CDATA[

Although DataTables doesn't have row grouping built-in (picking one of the many methods available would overly limit the DataTables core), it is most certainly possible to give the look and feel of row grouping.

In the example below the 'group' is the office location, which is based on the information in the third column (which is set to hidden). The grouping indicator is added by the `dt-init drawCallback` function, which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found. A `click` event handler is added for the grouping rows to allow the grouping order to be restored as well as ordering by any other column.


### RowGroup extension

Important note: DataTables now has a [RowGroup](https://datatables.net/extensions/rowgroup) extension that provides a formal API for the abilities in this demo and extends upon them in a number of significant and useful ways. This example is retained as a useful demonstration of how the `-init drawCallback` option can be used, but for new sites that make use of row grouping, it is suggested that you use the new RowGroup extension.

]]></info>

</dt-example>
