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.

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.