DevExtremeReactive
Version 2.7.4DemosDocsBlogGitHubBuy

TableSummaryRow Plugin Reference

A plugin that renders table rows that display a total, group, and tree summary.

Import

Use the following statement to import a plugin with embedded theme components:

import { TableSummaryRow } from '@devexpress/dx-react-grid-material-ui';
// import { TableSummaryRow } from '@devexpress/dx-react-grid-bootstrap4';
// import { TableSummaryRow } from '@devexpress/dx-react-grid-bootstrap3';

You can import the themeless plugin to use custom components:

import { TableSummaryRow } from '@devexpress/dx-react-grid';

User Reference

Dependencies

Properties

Name Type Default Description
formatlessSummaryTypes Array<string> An array of summary types that the DataTypeProvider plugin should not format.
totalRowComponent ComponentType<Table.RowProps> A component that renders the total summary row.
groupRowComponent ComponentType<Table.RowProps> A component that renders a group summary row.
treeRowComponent ComponentType<Table.RowProps> A component that renders a tree summary row.
totalCellComponent ComponentType<TableSummaryRow.CellProps> A component that renders a total summary cell.
groupCellComponent ComponentType<TableSummaryRow.CellProps> A component that renders a group summary cell.
treeCellComponent ComponentType<TableSummaryRow.CellProps> A component that renders a tree summary cell.
treeColumnCellComponent ComponentType<TableSummaryRow.CellProps> A component that renders a summary cell within a tree column.
treeColumnContentComponent ComponentType<TableSummaryRow.ContentProps> A component that renders a summary cell's content within a tree column.
treeColumnIndentComponent ComponentType<TableSummaryRow.IndentProps> A component that renders an indent used to identify a tree row level within a tree column.
itemComponent ComponentType<TableSummaryRow.ItemProps> A component that renders a summary item.
messages? TableSummaryRow.LocalizationMessages An object that specifies localization messages.

Interfaces

TableSummaryRow.CellProps

Describes properties passed to a component that renders a cell in a summary row.

Extends Table.CellProps

Field Type Description
column Column Specifies the cell's column.
children? ReactNode A React node to be rendered within the cell.

TableSummaryRow.ContentProps

Describes properties passed to a component that renders a cell's content.

Field Type Description
children? ReactNode A React node to be rendered within the cell's content.

TableSummaryRow.IndentProps

Describes properties passed to a component that renders an indent used to identify a row's level.

Field Type Description
level number Specifies the row's level.

TableSummaryRow.ItemProps

Describes properties passed to a component that renders a summary item.

Field Type Description
value? number The summary value
type SummaryType The summary type
children? ReactNode A React node used to render the summary value.
getMessage (messageKey: string) => string Returns a localization message by the message key.

Localization Messages

Field Type Default Description
count? string 'Count' Specifies the count type's text.
sum? string 'Sum' Specifies the summary type's text.
min? string 'Min' Specifies the minimum type's text.
max? string 'Max' Specifies the maximum type's text.
avg? string 'Avg' Specifies the average type text.

Plugin Components

Name Properties Description
TableSummaryRow.Cell TableSummaryRow.CellProps A component that renders a cell within a data row.
TableSummaryRow.TotalRow Table.RowProps A component that renders the total summary row.
TableSummaryRow.GroupRow Table.RowProps A component that renders a group summary row.
TableSummaryRow.TreeRow Table.RowProps A component that renders a tree summary row.
TableSummaryRow.TotalCell TableSummaryRow.CellProps A component that renders a total summary cell.
TableSummaryRow.GroupCell TableSummaryRow.CellProps A component that renders a group summary cell.
TableSummaryRow.TreeCell TableSummaryRow.CellProps A component that renders a tree summary cell.
TableSummaryRow.TreeColumnCell TableSummaryRow.CellProps A component that renders a summary cell within a tree column.
TableSummaryRow.TreeColumnContent TableSummaryRow.ContentProps A component that renders a summary cell's content within a tree column.
TableSummaryRow.TreeColumnIndent TableSummaryRow.IndentProps A component that renders an indent used to identify a tree row's level in a tree column.
TableSummaryRow.Item object A component that renders a summary item.

Additional properties are added to the component's root element.

Static Fields

Field Type Description
TREEROWTYPE symbol The tree summary row type's indentifier.
GROUPROWTYPE symbol The group summary row type's indentifier.
TOTALROWTYPE symbol The total row type's indentifier.

Plugin Developer Reference

Imports

Name Plugin Type Description
tableBodyRows Getter Array<TableRow> Table body rows.
tableFooterRows Getter Array<TableRow> Table footer rows.
tableTreeColumnName Getter string The name of a column that is displayed as a tree.
getTreeRowLevel Getter (row: any) => number A function used to identify a node level in tree data structure.
getRowId Getter (row: any) => number | string A function used to get a unique row identifier.
totalSummaryItems Getter Array<SummaryItem> Total summary items.
groupSummaryItems Getter Array<SummaryItem> Group summary items.
treeSummaryItems Getter Array<SummaryItem> Summary items applied to rows that contain child rows.
totalSummaryValues Getter Array<any> Total summary values.
groupSummaryValues Getter { [key: GroupKey]: Array<any> } Group summary values.
treeSummaryValues Getter { [key: number | string]: Array<any> } Tree summary values.
tableCell Template Table.CellProps A template that renders a table cell.
tableRow Template Table.RowProps A template that renders a table row.

Exports

Name Plugin Type Description
tableBodyRows Getter Array<TableRow> Table body rows with group and tree summaries.
tableFooterRows Getter Array<TableRow> Table footer rows with the total summary.

Grid

Chart

Scheduler

Common Concepts

Core