A plugin that renders the Grouping Panel in the Grid's header. This panel displays grouped columns and allows a user to modify grouping options.
Optionally, the plugin allows an end-user to change grouped columns' sorting order and render sorting indicators.
Use the following statement to import a plugin with embedded theme components:
import { GroupingPanel } from '@devexpress/dx-react-grid-material-ui';
// import { GroupingPanel } from '@devexpress/dx-react-grid-bootstrap4';
// import { GroupingPanel } from '@devexpress/dx-react-grid-bootstrap3';If you want to use custom components, you can import the themeless plugin:
import { GroupingPanel } from '@devexpress/dx-react-grid';| Name | Type | Default | Description |
|---|---|---|---|
| showSortingControls? | boolean | false | Specifies whether to render controls that toggle the column's sorting state. Requires the SortingState dependency. |
| showGroupingControls? | boolean | false | Specifies whether column headers display a button that cancels grouping by that column. |
| containerComponent | ComponentType<GroupingPanel.ContainerProps> | A component that renders a group panel container. | |
| itemComponent | ComponentType<GroupingPanel.ItemProps> | A component that renders a group panel item. | |
| emptyMessageComponent | ComponentType<GroupingPanel.EmptyMessageProps> | A component that renders an empty group panel message. | |
| messages? | GroupingPanel.LocalizationMessages | An object that specifies the localization messages. |
Describes the grouping panel item properties.
| Field | Type | Description |
|---|---|---|
| column | Column | A column associated with the item. |
| draft? | boolean | Specifies if the item is in preview mode. |
Describes properties passed to a component that renders a group panel container.
| Field | Type | Description |
|---|---|---|
| children? | ReactNode | A React node to be placed in the root layout. |
| forwardedRef? | React.RefObject<typeof Element> | (ref: React.RefObject<typeof Element>) => void | A reference to the group panel container or a function that accepts it. |
Describes properties passed to a group panel item template when it is being rendered.
| Field | Type | Description |
|---|---|---|
| item | GroupingPanelItem | The Grouping Panel item. |
| showGroupingControls | boolean | Specifies whether to display a button that cancels grouping by column. |
| showSortingControls | boolean | Specifies whether to render controls that toggle the column's sorting state. |
| groupingEnabled | boolean | Specifies whether grouping by a column is enabled. |
| sortingEnabled | boolean | Specifies whether sorting by a column is enabled. |
| sortingDirection? | 'asc' | 'desc' | Specifies the sorting direction. |
| onSort | (parameters: { direction?: 'asc' | 'desc' | null, keepOther?: boolean }) => void | An event that initiates changing the column sorting direction. Cancels sorting by the current column if direction is set to null. |
| onGroup | () => void | An event that initiates grouping by column. |
| forwardedRef? | React.RefObject<typeof Element> | (ref: React.RefObject<typeof Element>) => void | A reference to the group panel item or a function that accepts it. |
Describes properties passed to a component that renders an empty group panel message.
| Field | Type | Description |
|---|---|---|
| getMessage | (messageKey: string) => string | Returns the text displayed in the group panel if grid data is not grouped. |
| forwardedRef? | React.RefObject<typeof Element> | (ref: React.RefObject<typeof Element>) => void | A reference to the group panel message or a function that accepts it. |
| Field | Type | Default | Description |
|---|---|---|---|
| groupByColumn? | string | 'Drag a column header here to group by that column' | The text displayed in the group panel if the grid is not grouped. |
| Name | Properties | Description |
|---|---|---|
| GroupingPanel.Container | GroupingPanel.ContainerProps | A component that renders a grouping panel container. |
| GroupingPanel.Item | GroupingPanel.ItemProps | A component that renders a grouping panel item. |
| GroupingPanel.EmptyMessage | GroupingPanel.EmptyMessageProps | A component that renders an empty grouping panel message. |
Additional properties are added to the component's root element.
| Name | Plugin | Type | Description |
|---|---|---|---|
| columns | Getter | Array<Column> | Grid columns. |
| draftGrouping | Getter | Array<DraftGrouping> | Grouping options used for the preview. |
| 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. |
| sorting | Getter | Array<Sorting> | The current sorting state. |
| changeColumnSorting | Action | ({ columnName: string, direction?: 'asc' | 'desc' | null, keepOther?: boolean | Array<String>, sortIndex: number }) => void | Changes the column 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. |
| isColumnSortingEnabled | Getter | (columnName: string) => boolean | A function that returns a Boolean value that defines if sorting by a column is enabled. |
| isColumnGroupingEnabled | Getter | (columnName: string) => boolean | A function that returns a Boolean value that defines if grouping by a column is enabled. |
| draggingEnabled | Getter | boolean | Specifies whether drag-and-drop is enabled. |
| toolbarContent | Template | object? | A template that renders the toolbar content. |
none