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.
indentColumnWidth number   The group indent column’s width.

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.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.

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.

GroupRow

Describes the group row structure.

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

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.

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.