This project is deprecated. Use DevExtreme Vue instead.

DxGroupingState Plugin Reference

A plugin that manages the grouping state. It lists columns used for grouping and stores information about expanded/collapsed groups.

Import

Use the following statement to import the plugin:

import { DxGroupingState } from '@devexpress/dx-vue-grid';

User Reference

Dependencies

Properties

Name Type Default Description
grouping Array<Grouping>   Specifies columns to group by.
expandedGroups Array<GroupKey>   Specifies expanded groups.
columnGroupingEnabled? boolean true Specifies whether grouping is enabled for all columns.
columnExtensions? Array<DxGroupingState.ColumnExtension>   Additional column properties that the plugin can handle.

Events

Name Type Default Description
update:grouping? (grouping: Array<Grouping>) => void   Handles grouping option changes.
update:expandedGroups? (expandedGroups: Array<GroupKey>) => void   Handles expanded group changes.

Interfaces

Grouping

Describes grouping options.

Field Type Description
columnName string Specifies the name of the column by which the data is grouped.

GroupKey

Describes a group that can be nested in another one.

Type: string

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.

DxGroupingState.ColumnExtension

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.

Plugin Developer Reference

Imports

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.

Exports

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.