Since: RowGroup 1.0.0

Get / set the data source for the row grouping.
Please note - this property requires the RowGroup extension for DataTables.


RowGroup needs to know what data point in your data source objects or arrays to use as the grouping parameter (e.g. all rows with the Location of "Edinburgh" should be grouped together), and the rowGroup.dataSrc property provides that ability when the table is initialised. This method provides the ability to change the data source at run time.

Note that the data source property does not need to be used in the DataTable as a column - particularly when objects are used as the data source, however, it can sometimes be useful to have the data in a column to allow sorting by that data point.

When this method is used as a setter it will trigger the rowgroup-datasrc event, allowing listeners to modify the DataTable settings based on the new grouping data source.

Please note that the visual effect for grouping data point being changed is not shown until the DataTable is redrawn. This would typically be done by calling the draw() method.


function rowGroup().dataSrc()


Get the property currently being used as the grouping data source.


Data source property

function rowGroup().dataSrc( prop )


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.


DataTables API instance


Change the data source based on a data point, allowing the end user to easily change between groupings:

var table = new DataTable('#myTable', {
	orderFixed: [[2, 'asc']],
	rowGroup: {
		dataSrc: 2

// Change the fixed ordering when the data source is updated
table.on('rowgroup-datasrc', function (e, dt, val) {
	table.order.fixed({ pre: [[val, 'asc']] }).draw();

$('a.group-by').on('click', function (e) {



The following options are directly related and may also be useful in your application development.