Column menu in Vue Grid component

22 Oct 202424 minutes to read

The column menu in the Syncfusion Vue Grid component provides options to enable features such as sorting, grouping, filtering, column chooser, and autofit. When users click on the column header’s menu icon, a menu will be displayed with these integrated features. To enable the column menu, you need to set the showColumnMenu property to true in the Grid configuration.

To use the column menu, inject the ColumnMenu in the provide section.

The default column menu items are displayed in following table.

Item	Description
SortAscending	Sort the current column in ascending order.
SortDescending	Sort the current column in descending order.
Group	Group the current column.
Ungroup	Ungroup the current column.
AutoFit	Autofit the current column.
AutoFitAll	Autofit all columns.
ColumnChooser	Choose the column visibility.
Filter	Show the filter option as given in filterSettings.type

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-grid :dataSource="data" id="gridcomp" :allowPaging='true' :allowGrouping='true' :allowSorting='true'
      :showColumnMenu='true' :groupSettings='groupOptions' :allowFiltering='true' :filterSettings='filterSettings'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
        <e-column field='Freight' headerText='Freight' format='C2' textAlign='Right' width='120'></e-column>
        <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'
          type='date'></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' :visible='false' width='150'></e-column>
        <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Group, Sort, Resize, ColumnMenu, Page, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const groupOptions = { showGroupedColumn: true };
const filterSettings = { type: "CheckBox" };
provide('grid', [Group, Sort, Resize, ColumnMenu, Page, Filter]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-grid :dataSource="data" id="gridcomp" :allowPaging='true' :allowGrouping='true' :allowSorting='true' :showColumnMenu='true'
        :groupSettings='groupOptions' :allowFiltering='true' :filterSettings='filterSettings'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
                <e-column field='Freight' headerText='Freight' format='C2' textAlign='Right' width='120'></e-column>
                <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right' type='date'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' :visible='false' width='150'></e-column>
                <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective, Group, Sort, Resize, ColumnMenu, Page, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
      groupOptions: { showGroupedColumn: true },
      filterSettings: { type: "CheckBox" }
    };
  },
  provide: {
      grid: [Group, Sort, Resize, ColumnMenu, Page, Filter]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

You can disable column menu for a particular column by defining the columns.showColumnMenu as false.

You can customize the default items by defining the columnMenuItems with required items.

Prevent column menu for particular column

The Syncfusion Vue Grid component provides the ability to prevent the appearance of the column menu for specific columns. This feature is useful when you want to restrict certain columns from being customizable through the column menu.

To prevent the column menu for a particular column, you can set the showColumnMenu property to false for that specific column configuration. This will disable the column menu options specifically for the designated column, while other columns will have the column menu enabled.

The following example demonstrates how to prevent the column menu for a specific column. In this example, the column menu is disabled for the OrderID column by setting the showColumnMenu property to false.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-grid :dataSource="data" id="gridcomp" :allowPaging="true" :allowGrouping="true" :allowSorting="true"
    :showColumnMenu="true" :groupSettings="groupOptions" :allowFiltering="true" :filterSettings="filterSettings">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="90" textAlign="Right" :showColumnMenu="false"></e-column>
        <e-column field="CustomerID" headerText="Customer Name" width="100"></e-column>
        <e-column field="Freight" headerText="Freight" format="C2" textAlign="Right" width="80"></e-column>
        <e-column field="ShipCity" headerText="Ship City" width="100"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Sort, Group, ColumnMenu, Page, Filter} from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";

const groupOptions = { showGroupedColumn: true };
const filterSettings = { type: 'CheckBox' };

provide('grid',  [Sort, Group, ColumnMenu, Page, Filter]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-grid :dataSource="data" id="gridcomp" :allowPaging="true" :allowGrouping="true" :allowSorting="true"
    :showColumnMenu="true" :groupSettings="groupOptions" :allowFiltering="true" :filterSettings="filterSettings">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="90" textAlign="Right" :showColumnMenu="false"></e-column>
        <e-column field="CustomerID" headerText="Customer Name" width="100"></e-column>
        <e-column field="Freight" headerText="Freight" format="C2" textAlign="Right" width="80"></e-column>
        <e-column field="ShipCity" headerText="Ship City" width="100"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>

<script>
import { GridComponent, ColumnsDirective, ColumnDirective,Sort, Group, ColumnMenu, Page, Filter} from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

export default {
  name: "App",
  components: {
    "ejs-grid": GridComponent,
    "e-columns": ColumnsDirective,
    "e-column": ColumnDirective,
  },
  data() {
    return {
      data: data,
      groupOptions : { showGroupedColumn: true },
      filterSettings : { type: 'CheckBox' }
    };
  },
  provide() {
    return {
      grid: [Sort, Group, ColumnMenu, Page, Filter],
    };
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Add custom column menu item

The custom column menu item feature allows you to add additional menu items to the column menu in the Syncfusion Grid. These custom menu items can be defined using the columnMenuItems property, which accepts a collection of columnMenuItemModel objects. You can define the actions for these custom items in the columnMenuClick event.

Consider the following example, which demonstrates how to add a custom column menu item to clear the sorting of the Grid:

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-grid ref='grid' :dataSource="data" id="gridcomp" :allowPaging='true' :allowSorting='true' :showColumnMenu='true'
      :sortSettings='sortSettings' :columnMenuItems='columnMenuItems' :columnMenuClick='columnMenuClick'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' width='140' textAlign="Right"></e-column>
        <e-column field='CustomerID' headerText='Customer Name' :showInColumnChooser='false'></e-column>
        <e-column field='Freight' headerText='Freight' format='C2' textAlign="Right"></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' :visible='false' width='150'></e-column>
        <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Sort, ColumnMenu, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const columnMenuItems = [{ text: 'Clear Sorting', id: 'gridclearsorting' }];
const sortSettings = { columns: [{ direction: "Ascending", field: "OrderID" }] };
const columnMenuClick = function (args) {
  if (args.item.id === 'gridclearsorting') {
    grid.value.clearSorting();
  }
}
provide('grid', [Sort, ColumnMenu, Page]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-grid ref='grid' :dataSource="data" id="gridcomp" :allowPaging='true' :allowSorting='true' :showColumnMenu='true'
      :sortSettings='sortSettings' :columnMenuItems='columnMenuItems' :columnMenuClick='columnMenuClick'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' width='140' textAlign="Right"></e-column>
        <e-column field='CustomerID' headerText='Customer Name' :showInColumnChooser='false'></e-column>
        <e-column field='Freight' headerText='Freight' format='C2' textAlign="Right"></e-column>
        <e-column field='ShipCountry' headerText='Ship Country' :visible='false' width='150'></e-column>
        <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective, Sort, ColumnMenu, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
  name: "App",
  components: {
    "ejs-grid": GridComponent,
    "e-columns": ColumnsDirective,
    "e-column": ColumnDirective
  },
  data() {
    return {
      data: data,
      columnMenuItems: [{ text: 'Clear Sorting', id: 'gridclearsorting' }],
      sortSettings: { columns: [{ direction: "Ascending", field: "OrderID" }] }
    };
  },
  methods: {
    columnMenuClick: function (args) {
      if (args.item.id === 'gridclearsorting') {
        this.$refs.grid.clearSorting();
      }
    }
  },
  provide: {
    grid: [Sort, ColumnMenu, Page]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Customize menu items for particular columns

Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the columnMenuOpenEventArgs.hide as true in the columnMenuOpen event.

The following sample, Filter item was hidden in column menu when opens for the OrderID column.

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource="data" id="gridcomp" :allowPaging='true' :allowSorting='true' :showColumnMenu='true' :filterSettings='filterSettings' :columnMenuOpen='columnMenuOpen' :allowFiltering='true' :allowGrouping='true'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='140' textAlign="Right"></e-column>
                <e-column field='CustomerID' headerText='Customer Name' :showInColumnChooser='false'></e-column>
                <e-column field='Freight' headerText='Freight' format='C2' textAlign="Right"></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' :visible='false' width='150'></e-column>
                <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Sort, ColumnMenu, Page, Group, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
      const filterSettings = {type: 'Menu'};
      const columnMenuOpen = function (args) {
        for (let item of args.items) {
            if (item.text === 'Filter' && args.column.field === 'OrderID') {
                item.hide = true;
            } else {
                item.hide = false;
            }
        }
    }
  provide('grid',  [Sort, ColumnMenu, Page, Group, Filter]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource="data" id="gridcomp" :allowPaging='true' :allowSorting='true' :showColumnMenu='true' :filterSettings='filterSettings' :columnMenuOpen='columnMenuOpen' :allowFiltering='true' :allowGrouping='true'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='140' textAlign="Right"></e-column>
                <e-column field='CustomerID' headerText='Customer Name' :showInColumnChooser='false'></e-column>
                <e-column field='Freight' headerText='Freight' format='C2' textAlign="Right"></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' :visible='false' width='150'></e-column>
                <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective, Sort, ColumnMenu, Page, Group, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
      filterSettings: {type: 'Menu'}
    };
  },
  methods: {
      columnMenuOpen: function (args) {
        for (let item of args.items) {
            if (item.text === 'Filter' && args.column.field === 'OrderID') {
                item.hide = true;
            } else {
                item.hide = false;
            }
        }
    }
  },
  provide: {
      grid: [Sort, ColumnMenu, Page, Group, Filter]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Render nested column menu

The nested column menu feature provides an extended menu option in the grid column headers, allows you to access additional actions and options related to the columns.

To enable the nested column menu feature, you need to define the columnMenuItems property in your component. The columnMenuItems property is an array that contains the items for the column menu. Each item can be a string representing a built-in menu item or an object defining a custom menu item.

Here is an example of how to configure the columnMenuItems property to include a nested menu:

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-grid :dataSource="data" id="gridcomp" :allowPaging='true' :allowGrouping='true' :allowResizing="true"
            :allowSorting='true' :showColumnMenu='true' :groupSettings='groupOptions' :allowFiltering='true'
            :filterSettings='filterSettings' :columnMenuClick='columnMenuClick' :columnMenuItems='columnMenuItems'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
                <e-column field='Freight' headerText='Freight' format='C2' textAlign='Right' width='120'></e-column>
                <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'
                    type='date'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' :visible='false' width='150'></e-column>
                <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Group, Sort, Resize, ColumnMenu, Page, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const groupOptions = { showGroupedColumn: true };
const filterSettings = { type: "CheckBox" };
const columnMenuItems = [
    'SortAscending',
    'SortDescending',
    'Group',
    'Ungroup',
    'Filter',
    {
        text: 'Sub Menu',
        items: [
            { text: 'Option 1', id: 'option1' },
            { text: 'Option 2', id: 'option2' },
            { text: 'Option 3', id: 'option3' },
            {
                text: 'Nested Sub Menu',
                items: [
                    { text: 'Nested Option 1', id: 'nestedoption1' },
                    { text: 'Nested Option 2', id: 'nestedoption2' },
                ],
            },
        ],
    },
];
provide('grid', [Group, Sort, Resize, ColumnMenu, Page, Filter]);
const columnMenuClick = function (args) {
    if (args.item.id === 'option1') {
        // custom function
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-grid :dataSource="data" id="gridcomp" :allowPaging='true' :allowGrouping='true' :allowResizing="true"
            :allowSorting='true' :showColumnMenu='true' :groupSettings='groupOptions' :allowFiltering='true'
            :filterSettings='filterSettings' :columnMenuClick='columnMenuClick' :columnMenuItems='columnMenuItems'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
                <e-column field='Freight' headerText='Freight' format='C2' textAlign='Right' width='120'></e-column>
                <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'
                    type='date'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' :visible='false' width='150'></e-column>
                <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Group, Sort, Resize, ColumnMenu, Page, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
    name: "App",
    components: {
        "ejs-grid": GridComponent,
        "e-columns": ColumnsDirective,
        "e-column": ColumnDirective
    },
    data() {
        return {
            data: data,
            groupOptions: { showGroupedColumn: true },
            filterSettings: { type: "CheckBox" },
            columnMenuItems: [
                'SortAscending',
                'SortDescending',
                'Group',
                'Ungroup',
                'Filter',
                {
                    text: 'Sub Menu',
                    items: [
                        { text: 'Option 1', id: 'option1' },
                        { text: 'Option 2', id: 'option2' },
                        { text: 'Option 3', id: 'option3' },
                        {
                            text: 'Nested Sub Menu',
                            items: [
                                { text: 'Nested Option 1', id: 'nestedoption1' },
                                { text: 'Nested Option 2', id: 'nestedoption2' },
                            ],
                        },
                    ],
                },
            ],
        };
    },
    provide: {
        grid: [Group, Sort, Resize, ColumnMenu, Page, Filter]
    },
    methods: {
        columnMenuClick: function (args) {
            if (args.item.id === 'option1') {
                // custom function
            }
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Customize the icon of column menu

To customize the column menu icon, you need to override the default grid class .e-icons.e-columnmenu with a custom CSS property called content. By specifying a Unicode character or an icon font’s CSS class, you can change the icon displayed in the column menu.

To customize the column menu icon, follow the below step:

1.Add the necessary CSS code to override the default grid class:

  .e-grid .e-columnheader .e-icons.e-columnmenu::before {
              content: "\e725";
      }

Here is an example that demonstrates how to customize the column menu icon in the Syncfusion Grid:

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-grid ref='grid' :dataSource='data' :showColumnMenu='true' height='315px'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' width=90></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='Freight' headerText='Freight' format='C2' width=90></e-column>
        <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, ColumnMenu, Resize } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
provide('grid', [ColumnMenu, Resize]);
</script>
<style>
.e-grid .e-columnheader .e-icons.e-columnmenu::before {
  content: "\e725";
}

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' :showColumnMenu='true' height='315px' >
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width=90></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' format='C2' width=90></e-column>
               <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective, ColumnMenu, Resize } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
    data() {
      return {
        data: data
      };
    },
  provide: {
    grid: [ColumnMenu, Resize]
    }
  }
</script>
<style>
  .e-grid .e-columnheader .e-icons.e-columnmenu::before {
              content: "\e725";
      }
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Column menu events

The column menu in Syncfusion vue Grid provides a set of events that allow customization of behavior and performing actions when the column menu is opened or clicked. The below events are helpful for adding additional functionality or implementing specific actions based on user interactions with the column menu.

1.The columnMenuOpen event triggers before the column menu opens.

2.The columnMenuClick event triggers when the user clicks the column menu of the grid.

Composition API (~/src/App.vue)

<template>
    <div id="app">
  <p style="color: red; text-align: center;" id="message">{{ message }}</p>
        <ejs-grid :dataSource="data" id="gridcomp" :allowPaging='true' :allowGrouping='true' :allowSorting='true' :showColumnMenu='true'
        :groupSettings='groupOptions' :allowFiltering='true' :filterSettings='filterSettings'
        :columnMenuClick='columnMenuClick' :columnMenuOpen='columnMenuOpen'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
                <e-column field='Freight' headerText='Freight' format='C2' textAlign='Right' width='120'></e-column>
                <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right' type='date'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' :visible='false' width='150'></e-column>
                <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script setup>
import { provide, ref} from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Group, Sort, Resize, ColumnMenu, Page,Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
      const groupOptions = { showGroupedColumn: true };
      const filterSettings = { type: "CheckBox" };
      var message = ref(null);
  provide('grid',  [Group, Sort, Resize, ColumnMenu, Page, Filter]);
      const columnMenuOpen = function(){
        message.value = 'columnMenuOpen event is Triggered';
      }
      const columnMenuClick = function(){
        message.value = 'columnMenuClick event is Triggered';
      }
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
  <p style="color: red; text-align: center;" id="message">{{ message }}</p>
        <ejs-grid :dataSource="data" id="gridcomp" :allowPaging='true' :allowGrouping='true' :allowSorting='true' :showColumnMenu='true'
        :groupSettings='groupOptions' :allowFiltering='true' :filterSettings='filterSettings'
        :columnMenuClick='columnMenuClick' :columnMenuOpen='columnMenuOpen'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
                <e-column field='Freight' headerText='Freight' format='C2' textAlign='Right' width='120'></e-column>
                <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right' type='date'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' :visible='false' width='150'></e-column>
                <e-column field='ShipCity' headerText='Ship City' width='150'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>

import { GridComponent, ColumnsDirective, ColumnDirective, Group, Sort, Resize, ColumnMenu, Page,Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data() {
    return {
      data: data,
      groupOptions: { showGroupedColumn: true },
      filterSettings: { type: "CheckBox" },
      message:''
    };
  },
  provide: {
      grid: [Group, Sort, Resize, ColumnMenu, Page, Filter]
  },
  methods: {
      columnMenuOpen: function(){
        this.message = 'columnMenuOpen event is Triggered';
      },
      columnMenuClick: function(){
        this.message = 'columnMenuClick event is Triggered';
      }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>