React Grid - Summary Row

The Grid component can calculate a summary for all rows (total summary), row groups (group summary), and tree nodes that contain child nodes (tree summary). You can use the corresponding plugins to calculate the summary and manage its state.

The following plugins implement summary features:

Note that the plugin order is important.

Basic Setup

Use the SummaryState, IntegratedSummary (or CustomSummary) and TableSummaryRow plugins to set up a Grid that displays a data summary.

Calculate Built-in Data Summaries

The IntegratedSummary plugin performs the built-in summary calculation.

In the following example, the summary items array is passed to the SummaryState plugin's totalItems property to calculate the total summary internally.

To display group summaries, pass summary items to the SummaryState plugin's groupItems property. Group summaries are displayed in group footers. You can move the summaries to group captions (set the showInGroupFooter property to false) or display them in the column for which they are calculated (set the alignByColumn property to true).

The following example demonstrates tree summary rows. In this example, the summary items array is passed to the SummaryState plugin's treeItems property.

Calculate Custom Data Summaries

The CustomSummary plugin allows you to calculate a data summary on a remote server or local machine.

The following example demonstrates custom total summary calculation. In this example, the summary items array is passed to the SummaryState plugin's totalItems property and the calculated summary values to the totalValues property.

Select several rows to calculate a summary for them.

Use the CustomSummary plugin's groupValues and treeValues properties to calculate a custom group and tree summary.

Implement a Custom Algorithm

The IntegratedSummary plugin allows you to extend the built-in summary types (count, sum, max, min, avg) with custom types. The following example shows a custom median summary type:

Prevent Summary Formatting

If a DataTypeProvider plugin is assigned to a column, its value formatting component is applied to a summary row. Use the formattlessSummaryTypes property to specify summary types that should not be formatted. The following example shows a custom overprice summary type that is not formatted: