Usage

Initialisation and configuration of RowGroup is performed through the rowGroup initialisation option for DataTables. This option can be given as a simple boolean value to enable RowGroup with its default values, or as an object to provide more granular control.

Simple initialisation

In its most simple case, you can enable RowGroup by simply setting rowGroup: true as an option in the DataTables initialisation:

new DataTable('#myTable', {
    rowGroup: true
});

This will initialise RowGroup with its default options, which means a single level of grouping based on the data in array index 0 (see below if you are using object based data).

Options

For more complex cases, the rowGroup option can be used as an object allowing you to specify which data point to group on, grouping rendering functions and more. In the following case, rowGroup.dataSrc is used to operate on the value in the office property for the data source object, and orders the table by that column:

new DataTable('#myTable', {
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'office' },
        { data: 'extn' },
        { data: 'start_date' },
        { data: 'salary' }
    ],
    order: [[2, 'asc']],
    rowGroup: {
        dataSrc: 'office'
    }
});

Object based data

If you are using object based data, you must use rowGroup.dataSrc to tell the software what data point you want the grouping to happen on (the default is 0 which looks for an array - i.e. the table is being read from HTML, for Ajax tables you will most likely want to use rowGroup.dataSrc), as shown above.

Ordering

It is important to note that grouping is performed on the source data point based on the order of the data in the table at any one time. This is the reason order is specified in the example above, it will cause the table to order by the office data point, thus grouping all similar office labels together. If the ordering is changed by the end user to a different column, the grouping will still be performed by the dataSrc target, but the groups can be "disconnected".

For this reason, if you wish to force the grouping data point to always be the primary ordering for the table (i.e. ordering first, and can't be changed by the end user, although they can add other columns), use the init orderFixed option:

new DataTable('#example', {
    orderFixed: [2, 'asc'],
    rowGroup: {
        dataSrc: 2
    }
});

See this example to see the above code in action.

Reference

For a complete list of the options that RowGroup supports, please refer to the DataTables initialisation options reference. The RowGroup examples also demonstrate the options available.