DevExtremeReactive
Version 2.7.4DemosDocsBlogGitHubBuy

TableGroupRow Plugin Reference

A plugin that renders group rows and enables them to expand and collapse.

Import

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

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

If you want to use custom components, you can import the themeless plugin:

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

User Reference

Dependencies

Properties

Name Type Default Description
showColumnsWhenGrouped? boolean false A Boolean value that specifies whether the grid's table displays a column by which data is grouped.
columnExtensions? Array<TableGroupRow.ColumnExtension> Additional column properties that the plugin can handle.
cellComponent ComponentType<TableGroupRow.CellProps> A component that renders a group cell.
rowComponent ComponentType<TableGroupRow.RowProps> A component that renders a group row.
contentComponent ComponentType<TableGroupRow.ContentProps> A component that renders a group cell content.
iconComponent ComponentType<TableGroupRow.IconProps> A component that renders a group expand icon.
indentCellComponent? ComponentType<TableGroupRow.IndentCellProps> null A component that renders a group indent cell.
inlineSummaryComponent ComponentType<TableGroupRow.InlineSummaryProps> A component that renders a container for group summary items in a group caption.
inlineSummaryItemComponent ComponentType<TableGroupRow.InlineSummaryItemProps> A component that renders a single group summary item in a group caption.
summaryCellComponent ComponentType<TableGroupRow.SummaryCellProps> A component that renders a cell for a group summary item in an appropriate column.
summaryItemComponent ComponentType<TableSummaryRow.ItemProps> A component that renders a group summary item in its column.
stubCellComponent ComponentType<TableGroupRow.StubCellProps> A component that renders a stub cell used to align summary items in their columns.
formatlessSummaryTypes Array<string> Summary types that the DataTypeProvider plugin should not format.
messages? TableGroupRow.LocalizationMessages Localization messages.
indentColumnWidth number 33 for Bootstrap4 and for Bootstrap; 48 for Material-UI The group indent column's width.
contentCellPadding string 0.75rem for Bootstrap4; 8px for Bootstrap and for Material-UI The group cell's left padding value.

Interfaces

TableGroupRow.ColumnExtension

Describes additional column properties that the plugin can handle.

Field Type Description
columnName string The name of a column to extend.
showWhenGrouped? boolean Specifies whether the grid displays the column by which data is grouped.

TableGroupRow.InlineSummaryItemInfo

Describes a summary item to be displayed in a group caption.

Field Type Description
columnTitle string The title of the column for which the summary item is calculated.
type SummaryType The summary type.
value number The summary value.
messageKey string A key used to get a localized message.
component ReactNode A React node used to render the summary value.

TableGroupRow.CellProps

Describes properties passed to a component that renders a group cell.

Extends Table.CellProps

Field Type Description
row GroupRow The group row.
column Column The column associated with the group.
expanded boolean Specifies whether the row is expanded.
onToggle () => void An event that initiates group row expanding or collapsing.
inlineSummaries Array<GroupInlineSummary> Summary items in this container.
inlineSummaryComponent ComponentType<TableGroupRow.InlineSummaryProps> A component that renders a container for group summary items in a group caption.
inlineSummaryItemComponent ComponentType<TableGroupRow.InlineSummaryItemProps> A component that renders an inline group summary item.
getMessage (messageKey: string) => string A function that uses the message ID to get a localized message.

TableGroupRow.RowProps

Describes properties passed to a component that renders a group row.

Extends Table.RowProps

Field Type Description
row GroupRow The group row.

TableGroupRow.ContentProps

Describes properties passed to a component that renders a group cell content.

Field Type Description
row GroupRow The group row.
column Column The column associated with the group.
children? ReactNode A React node to be rendered within the cell content.

TableGroupRow.IconProps

Describes properties passed to a component that renders a group expand icon.

Field Type Description
expanded boolean Specifies whether the row is expanded.

TableGroupRow.IndentCellProps

Describes properties passed to a component that renders a group indent cell.

Extends Table.CellProps

Field Type Description
row GroupRow The group row.
column Column A column associated with the group.

TableGroupRow.InlineSummaryProps

Describes properties passed to a component that renders a container for summary items to be displayed in a group caption.

Field Type Description
inlineSummaries Array<GroupInlineSummary> Summary items in this container.
inlineSummaryItemComponent ComponentType<TableGroupRow.InlineSummaryItemProps> A component that renders an inline group summary item.
getMessage (messageKey: string) => string A function that uses the message ID to get a localized message.

TableGroupRow.InlineSummaryItemProps

Describes properties passed to a component that renders a summary item in a group caption.

Field Type Description
summary SummaryItem The summary item.
getMessage (messageKey: string) => string A function that gets a localized message by message ID.

TableGroupRow.SummaryCellProps

Describes properties passed to a component that renders a cell for a summary item in an appropriate column.

Field Type Description
row GroupRow The group row.
column Column The column for which the summary is calculated.
onToggle () => void A function that is executed when the group row is expanded or collapsed.
children ReactNode A React node to be rendered within the cell.

TableGroupRow.StubCellProps

Describes properties passed to a component that renders a stub cell used to align summary items in their columns.

Extends Table.CellProps

Field Type Description
onToggle () => void A function that is executed when a group row is expanded or collapsed.

GroupRow

Describes the group row structure.

Field Type Description
key number | string The current group key.
value any The current group value.

Localization Messages

Field Type Default Description
count? string 'Count' Specifies a text for a count summary item when it is displayed in a column.
sum? string 'Sum' Specifies a text for a sum summary item when it is displayed in a column.
min? string 'Min' Specifies a text for a min summary item when it is displayed in a column.
max? string 'Max' Specifies a text for a max summary item when it is displayed in a column.
avg? string 'Avg' Specifies a text for a avg summary item when it is displayed in a column.
countOf? string 'Count: ' Specifies a text for a count summary item when it is displayed in a group caption.
sumOf? string 'Sum of {columnTitle} is' Specifies a text for a sum summary item when it is displayed in a group caption.
minOf? string 'Min of {columnTitle} is' Specifies a text for a min summary item when it is displayed in a group caption.
maxOf? string 'Max of {columnTitle} is' Specifies a text for a max summary item when it is displayed in a group caption.
avgOf? string 'Avg of {columnTitle} is' Specifies a text for a avg summary item when it is displayed in a group caption.

Plugin Components

Name Properties Description
TableGroupRow.Row TableGroupRow.RowProps A component that renders a group row.
TableGroupRow.Cell TableGroupRow.CellProps A component that renders a group cell.
TableGroupRow.Content TableGroupRow.ContentProps A component that renders a group cell content.
TableGroupRow.Icon TableGroupRow.IconProps A component that renders a group expand icon.
TableGroupRow.InlineSummary TableGroupRow.InlineSummaryProps A component that renders a container for group summary items in a group caption.
TableGroupRow.InlineSummaryItem TableGroupRow.InlineSummaryItemProps A component that renders a single group summary item in a group caption.
TableGroupRow.SummaryCell TableGroupRow.SummaryCellProps A component that renders a cell for a group summary item in an appropriate column.
TableGroupRow.SummaryItem TableSummaryRow.ItemProps A component that renders a group summary item in its column.

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

Static Fields

Field Type Description
COLUMN_TYPE symbol The group column type's identifier.
ROW_TYPE symbol The group row type's identifier.

Plugin Developer Reference

Imports

Name Plugin Type Description
columns Getter Array<Column> The grid columns.
tableColumns Getter Array<TableColumn> Table columns.
tableBodyRows Getter Array<TableRow> Table body rows.
grouping Getter Array<Grouping> Current grouping options.
draftGrouping Getter Array<Grouping> Grouping options used for the preview.
expandedGroups Getter Array<GroupKey> Expanded groups.
isGroupRow Getter (row: any) => boolean A function used to identify a group row within ordinary rows.
toggleGroupExpanded Action ({ groupKey: GroupKey }) => void Toggles the group's expanded state.
tableCell Template Table.CellProps A template that renders a table cell.
tableRow Template Table.RowProps A template that renders a table row.
valueFormatter Template DataTypeProvider.ValueFormatterProps A template that renders the formatted value.

Exports

Name Plugin Type Description
tableColumns Getter Array<TableColumn> Table columns, including the ones by which the table is grouped.
tableBodyRows Getter Array<TableRow> Table body rows with modified group rows.

Grid

Chart

Scheduler

Common Concepts

Core