A plugin that manages the grouping state. It lists columns used for grouping and stores information about expanded/collapsed groups.
Use the following statement to import the plugin:
import { GroupingState } from '@devexpress/dx-react-grid';| Name | Type | Default | Description |
|---|---|---|---|
| grouping? | Array<Grouping> | Specifies columns to group by. | |
| defaultGrouping? | Array<Grouping> | [] | Specifies initial grouping options in the uncontrolled mode. |
| onGroupingChange? | (grouping: Array<Grouping>) => void | Handles grouping option changes. | |
| expandedGroups? | Array<GroupKey> | Specifies expanded groups. | |
| defaultExpandedGroups? | Array<GroupKey> | [] | Specifies initially expanded groups in the uncontrolled mode. |
| columnGroupingEnabled? | boolean | true | Specifies whether grouping is enabled for all columns. |
| columnExtensions? | Array<GroupingState.ColumnExtension> | Additional column properties that the plugin can handle. | |
| onExpandedGroupsChange? | (expandedGroups: Array<GroupKey>) => void | Handles expanded group changes. |
Describes grouping options.
| Field | Type | Description |
|---|---|---|
| columnName | string | Specifies the name of the column by which the data is grouped. |
Type: string
Describes a group that can be nested in another one.
A string value that consists of values by which rows are grouped, separated by the | character. For example, the expanded group 'Male' is described as Male and 'Male'/'Audi' as Male|Audi and so on.
Describes additional column properties that the plugin can handle.
| Field | Type | Description |
|---|---|---|
| columnName | string | The name of a column to extend. |
| groupingEnabled | boolean | Specifies whether grouping is enabled for a column. |
| Name | Plugin | Type | Description |
|---|---|---|---|
| columns | Getter | Array<Column> | Grid columns. |
| sorting? | Getter | Array<Sorting> | Applied column sorting. |
| changeColumnSorting? | Action | ({ columnName: string, direction?: 'asc' | 'desc' | null, keepOther?: boolean | Array<String>, sortIndex?: number }) => void | Changes the column's sorting direction. keepOther accepts true (keeps existing sorting), a column name array (keeps sorting by specified columns) and false (resets sorting). Set direction to null to cancel sorting by the current column. If sortIndex is omitted, the sorting is added to the end of the sorting list. |
| Name | Plugin | Type | Description |
|---|---|---|---|
| grouping | Getter | Array<Grouping> | The current grouping state. |
| draftGrouping | Getter | Array<Grouping> | Grouping options used for the preview. |
| isColumnGroupingEnabled | Getter | (columnName: string) => boolean | A function that returns a Boolean value that defines if grouping by a column is enabled. |
| changeColumnGrouping | Action | ({ columnName: string, groupIndex?: number }) => void | Groups data by a specified column or cancels grouping. If groupIndex is omitted, the group is added to the last position. |
| draftColumnGrouping | Action | ({ columnName: string, groupIndex?: number }) => void | Sets or clears grouping options used for the preview. If groupIndex is omitted, the group is added to the last position. |
| cancelColumnGroupingDraft | Action | () => void | Cancels changes to the column grouping options used for the preview. |
| expandedGroups | Getter | Array<GroupKey> | Expanded groups. |
| toggleGroupExpanded | Action | ({ groupKey: GroupKey }) => void | Toggles the expanded group state. |