GroupingPanel Plugin Reference

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.

Import

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';

User Reference

Dependencies

Properties

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.

Interfaces

GroupingPanelItem

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.

GroupingPanel.ContainerProps

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.

GroupingPanel.ItemProps

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.

GroupingPanel.EmptyMessageProps

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.

Localization Messages

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.

Plugin Components

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.

Plugin Developer Reference

Imports

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.

Exports

none