DevExtreme - React Grid - Group Row Summaries (v19.2)

The most recent version of DevExtreme React Grid allows you to display group row summaries directly inside the group row. Users need not expand the row to view this information.

To configure a summary item that is displayed in a group row, set the property showInGroupFooter on the GroupSummaryItem to false. You can also set alignByColumn to true if you want the value to appear in the column the summary relates to. Group Summary Items are configured using the groupItems property of the SummaryState plugin.

Here is a sample setup:

The group summaries in the image are configured like this:

const groupSummaryItems = [
  {
    columnName: 'units',
    type: 'sum',
    showInGroupFooter: false,
    alignByColumn: true
  },
  {
    columnName: 'amount',
    type: 'max',
    showInGroupFooter: false,
    alignByColumn: true
  },
  { columnName: 'amount', type: 'sum', showInGroupFooter: false }
];

The example combines summaries displayed in their respective colums with the sum calculated for the amount column, which is displayed as part of the main group header. Please click here for the summary row documentation, which includes the same sample extended with some additional summaries.

Custom Appearance

The TableGroupRow plugin supports four components you can override to control the appearance of summary elements in group rows. For summaries inside the main group header, use inlineSummaryComponent and inlineSummaryItemComponent. If you display summaries aligned to columns, the relevant components are summaryCellComponent and summaryItemComponent.

Let Us Know What You Think

Please feel free to comment below, or follow this link to our GitHub repository, where you can take part in discussions or submit issues. Your feedback is always appreciated.