DxGroupingPanel 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 { DxGroupingPanel } from '@devexpress/dx-vue-grid-bootstrap4';
If you want to use custom components, you can import the themeless plugin:
import { DxGroupingPanel } from '@devexpress/dx-vue-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 DxSortingState dependency. |
| showGroupingControls? |
boolean |
false |
Specifies whether column headers display a button that cancels grouping by that column. |
| containerComponent |
DxGroupingPanel.DxContainer |
|
A component that renders a group panel container. |
| itemComponent |
DxGroupingPanel.DxItem |
|
A component that renders a group panel item. |
| emptyMessageComponent |
DxGroupingPanel.DxEmptyMessage |
|
A component that renders an empty group panel message. |
| messages? |
DxGroupingPanel.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. |
Component Types
DxGroupingPanel.DxContainer
Slots
| Field |
Description |
| default |
The default Vue slot |
DxGroupingPanel.DxItem
Props
| 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. |
Events
| Field |
Type |
Description |
| group |
() => void |
An event that initiates grouping by column. |
| sort |
(parameters: { direction?: ‘asc’ | ‘desc’ | null }) => void |
An event that initiates changing the column sorting direction. Cancels sorting by the current column if direction is set to null. |
DxGroupingPanel.DxEmptyMessage
Props
| Field |
Type |
Description |
| getMessage |
(messageKey: string) => string |
Returns the text displayed in the group panel if grid data is not grouped. |
Localization Messages
| Field |
Type |
Default |
Description |
| groupByColumn? |
string |
’’ |
The text displayed in the group panel if the grid is not grouped. |
Plugin Components
Plugin Developer Reference
Imports
| Name |
Plugin |
Type |
Description |
| columns |
Getter |
Array<Column> |
Grid columns. |
| 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. |
| 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