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

Column Menu

The Native Vue Grid enables you to show a menu with quick actions for its columns.

The column menu provides flexible options for high-level customization. For example, the regular sorting and filtering features are represented by individual components which allows you to implement complex scenarios and meet the specific requirements of your project.

Basic Usage

To configure the column menu, use the columnMenu option of the columns.

The following example demonstrates how to utilize the components for sorting and filtering while you implement the column menu in the Grid.

Example
View Source
Change Theme:

Styling the Column Menu Icon

The following example demonstrates:

  • How to change the column menu icon using the columnMenuIcon property of the Grid.
  • How to add an active style to the column menu icon when sorting and/or filtering are applied. To achieve this functioanlity, we use the filterGroupByField and sortGroupByField static methods
Example
View Source
Change Theme: