rowGroup.endRender

Since: RowGroup RowGroup 1.0.0

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

Description

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!

Types

null

Description:

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

function endRender( rows, group )

Parameters:
Returns:

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 end 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.

Default

  • Value: null

A grouping end row is not shown.

Examples

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

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

Disable the start grouping row:

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

Show aggregate data in the footer:

$('#myTable').DataTable( {
	rowGroup: {
		endRender: function ( rows, group ) {
			var avg = rows
				.data()
				.pluck('salary')
				.reduce( function (a, b) {
					return a + b.replace(/[^\d]/g, '')*1;
				}, 0) / rows.count();

			return 'Average salary in '+group+': '+
				$.fn.dataTable.render.number(',', '.', 0, '$').display( avg );
		}
	}
} );