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.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
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.