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

DevExtreme Team Blog
05 February 2020

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:

Group Row Summaries

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.

Custom Group Row Summaries

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.

What’s New in v20.1

To explore the scope, breadth and capabilities of our new products/features, please visit: https://www.devexpress.com/Subscriptions/New-2020-1.xml.
CRM-dc89c894-309a-4800-9264-87a9aea332c4
Keith Thompson
Oliver, is there a way to "count" only the unique values of a grouped column?  
30 April 2020
Maxim (DevExpress)
Maxim (DevExpress)
Hi Keith Thompson,

You can achieve it by a custom algorithm. Follow this example.
30 April 2020
CRM-dc89c894-309a-4800-9264-87a9aea332c4
Keith Thompson
Thank you, I check it out
30 April 2020

Please login or register to post comments.