Since: RowGroup RowGroup 1.0.0

Provide a function that can be used to control the data shown in the start grouping row. Please note - this property requires the RowGroup extension for DataTables.


It can be really useful to modify the contents of the grouping row that is displayed by RowGroup. By default it simply shows the grouping data value, but often you might wish to show more complex data, such as aggregations, counts and other summary information. This option provides that ability by letting you specify a function that with return the data to be shown for the group's starting row.

The function defined by this option will be called once for every group shown in the DataTables' current page, and will be called again every time the page is changed (e.g. paging, search or sort) to keep the grouping information current. As such it is important that the function used should be relatively fast in its execution - e.g. do not make any asynchronous Ajax calls!




If given as null the grouping start row is not shown in the table.

function startRender( rows, group )


The information returned by the rendering function may be one of:

  • A string, in which case RowGroup will create tr and td elements for the grouping row, with a colspan value to have the single cell spanning the width of the table.
  • A tr node which contains a row that will be injected into the table as the group start row. This is useful if you wish to use multiple cells in the grouping row - e.g. to provide alignment with the host data.
  • A jQuery object containing a tr node. This acts in exactly the same way as a tr element and is provided for convenience.


  • Value: function (rows, data) { return data; }

The default function simply shows the grouping data point's value.


Show the number of rows in the group along with the group data value:

$('#myTable').DataTable( {
	rowGroup: {
		startRender: function ( rows, group ) {
			return group +' ('+rows.count()+' rows)';
} );