New to Kendo UI for Vue? Start a free 30-day trial

Grouping Basics

Updated on Aug 14, 2026

The Kendo UI Native DataGrid enables you to display grouped table data.

Enabling Grouping

The Kendo UI for Vue Grid supports grouping in two modes:

Built-in State Management: The Grid manages its own grouping state internally.
Controlled Mode: You manage the grouping state externally by handling events and updating the state.

Using the Built-in State Management for Grouping

To use grouping with the built-in state management, follow these steps:

Enable the autoProcessData prop to let the Grid handle grouping automatically.
Set the groupable prop of the Grid to enable grouping features.
Set the dataItemKey prop to a unique value field from the data in the Grid.
(Optional) Set the defaultGroup prop to add initial grouping for the Grid.

vue

<Grid :auto-process-data="true" :groupable="true" />

The following example shows how to use grouping with the built-in state management of the Kendo UI for Vue Grid.

Loading ...

Using the Grouping in Controlled Mode

To use grouping in the Kendo UI for Vue Grid with controlled mode, follow these steps:

Set the groupable and group props of the Grid.
Handle the groupchange or datastatechange event. Use datastatechange when the Grid has other data operations because it provides the complete State object in one event.
Group data on the client with groupBy or process. You can also group data on the server by using the event parameters. Provide the Grid with a collection of GroupResult items.

Use groupBy with groupchange, and use process with datastatechange.

For more information, see the Data Query process helpers documentation.

The following example shows how to use grouping in controlled mode where you manage the grouping state by handling events.

Loading ...

Grouping Columns Dynamically

By default, you can group all Grid columns multiple times. To enable grouping for specific columns and control it dynamically, use a function or variable for the groupable property.

vue

<Grid :columns="[
  { field: 'ProductID', filterable: false, title: 'ID', width: '50px', groupable: isGroupable('ProductID') }
]" />

vue

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { GroupDescriptor } from '@progress/kendo-data-query';

const group = ref<GroupDescriptor[]>(initialGroup);

const isGroupable = (field: string) => {
  return !((group.value || []).find((groupDescriptor) => groupDescriptor.field === field));
};
</script>

Persist Groups Collapsed State

The Data Tools setGroupIds utility creates unique group item IDs. Use these IDs with the groupExpand state to preserve the expanded or collapsed state of grouped items.

The following example demonstrates how to preserve the expanded and collapsed state of grouped items while the processed data changes. It uses setGroupIds from Data Tools, groupBy from Data Query, and a ref for the groupExpand state.

Loading ...

Expand and Collapse All Groups

Store group expansion state in the groupExpand prop. To collapse all groups, set expanded to false in the descriptors for each group. To restore the default expanded state, clear the groupExpand descriptors.

The following example demonstrates how to expand and collapse all group items by clicking a toggle button. It updates the groupExpand descriptors for every visible group.

Loading ...