{hero}

rowGroup().dataSrc()

Since: RowGroup 1.0.0

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

Description

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.

As of RowGroup 1.6.0, if this method is used on a DataTable that was not initialised with a rowGroup property, RowGroup will be initialised and enabled automatically. This provides the flexibility of starting the DataTable without grouping and then enabling it.

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.

Types

rowGroup().dataSrc()

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

Returns:

number or string or array: The data point (property or index) in the data source object or array for the row's data.

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.

Parameters:

Returns:

DataTables.Api: DataTables API instance

Example

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) {
	e.preventDefault();

	table.rowGroup().dataSrc($(this).data('column'));
});

Related

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