Vue Data Grid - Toolbar

The DataGrid includes an integrated toolbar that displays predefined and custom controls. To add or remove toolbar items, declare the toolbar.items[] array.

If toolbar.items[] is specified, DataGrid does not display controls missing from the array. Ensure this array includes controls for all enabled features.

Backend API

<template> <DxDataGrid id="gridContainer" ref="dataGridRef" :data-source="orders" key-expr="ID" :show-borders="true" > <DxGrouping :auto-expand-all="expandAll"/> <DxColumnChooser :enabled="true"/> <DxLoadPanel :enabled="true"/> <DxColumn data-field="OrderNumber" caption="Invoice Number" /> <DxColumn data-field="OrderDate"/> <DxColumn data-field="Employee"/> <DxColumn data-field="CustomerStoreCity" caption="City" /> <DxColumn :group-index="0" data-field="CustomerStoreState" caption="State" /> <DxColumn data-field="SaleAmount" alignment="right" format="currency" /> <DxToolbar> <DxItem location="before" template="totalCountTemplate" /> <DxItem location="before" locateInMenu="auto" template="groupingTemplate" /> <DxItem location="before" locateInMenu="auto" widget="dxButton" :options="toggleButtonOptions" /> <DxItem location="after" locateInMenu="auto" showText="inMenu" widget="dxButton" :options="refreshButtonOptions" /> <DxItem name="columnChooserButton" /> </DxToolbar> <template #totalCountTemplate> <div class="informer"> <div class="count">{{ totalCount }}</div> <span>Total Count</span> </div> </template> <template #groupingTemplate> <DxSelectBox width="225" :items="groupingValues" :input-attr="{ 'aria-label': 'Group' }" display-expr="text" value-expr="value" value="CustomerStoreState" @value-changed="toggleGroupColumn" /> </template> </DxDataGrid> </template> <script setup lang="ts"> import { computed, ref } from 'vue'; import { DxDataGrid, DxColumn, DxGrouping, DxColumnChooser, DxLoadPanel, DxToolbar, DxItem, } from 'devextreme-vue/data-grid'; import { DxSelectBox, type DxSelectBoxTypes } from 'devextreme-vue/select-box'; import { query } from 'devextreme-vue/common/data'; import { orders } from './data.ts'; const getGroupCount = (groupField: string) => query(orders) .groupBy(groupField) .toArray().length; const dataGridRef = ref<DxDataGrid | null>(null); const expandAll = ref(true); const totalCount = ref(getGroupCount('CustomerStoreState')); const groupingValues = [{ value: 'CustomerStoreState', text: 'Grouping by State', }, { value: 'Employee', text: 'Grouping by Employee', }]; const toggleGroupColumn = (e: DxSelectBoxTypes.ValueChangedEvent) => { dataGridRef.value!.instance!.clearGrouping(); dataGridRef.value!.instance!.columnOption(e.value, 'groupIndex', 0); totalCount.value = getGroupCount(e.value); }; const toggleExpandAll = () => { expandAll.value = !expandAll.value; }; const toggleButtonOptions = computed(() => ({ text: expandAll.value ? 'Collapse All' : 'Expand All', width: 136, onClick: toggleExpandAll, })); const refreshButtonOptions = { icon: 'refresh', text: 'Refresh', onClick: () => { dataGridRef.value!.instance!.refresh(); }, }; </script> <style> #gridContainer .informer { display: grid; width: 120px; grid-template-columns: 100%; padding-right: 20px; text-align: center; } #gridContainer .count { font-size: 18px; font-weight: 500; } #gridContainer .dx-toolbar-items-container { min-height: 44px; } </style>

export type Order = { ID: number; OrderNumber: number; OrderDate: Date; SaleAmount: number; Terms: string; TotalAmount: number; CustomerStoreState: string; CustomerStoreCity: string; Employee: string; }; export const orders: Order[] = [{ ID: 1, OrderNumber: 35703, OrderDate: new Date(2024, 3, 10), SaleAmount: 11800, Terms: '15 Days', TotalAmount: 12175, CustomerStoreState: 'California', CustomerStoreCity: 'Los Angeles', Employee: 'Harv Mudd', }, { ID: 4, OrderNumber: 35711, OrderDate: new Date(2024, 0, 12), SaleAmount: 16050, Terms: '15 Days', TotalAmount: 16550, CustomerStoreState: 'California', CustomerStoreCity: 'San Jose', Employee: 'Jim Packard', }, { ID: 5, OrderNumber: 35714, OrderDate: new Date(2024, 0, 22), SaleAmount: 14750, Terms: '15 Days', TotalAmount: 15250, CustomerStoreState: 'Nevada', CustomerStoreCity: 'Las Vegas', Employee: 'Harv Mudd', }, { ID: 7, OrderNumber: 35983, OrderDate: new Date(2024, 1, 7), SaleAmount: 3725, Terms: '15 Days', TotalAmount: 3850, CustomerStoreState: 'Colorado', CustomerStoreCity: 'Denver', Employee: 'Todd Hoffman', }, { ID: 9, OrderNumber: 36987, OrderDate: new Date(2024, 2, 11), SaleAmount: 14200, Terms: '15 Days', TotalAmount: 14800, CustomerStoreState: 'Utah', CustomerStoreCity: 'Salt Lake City', Employee: 'Clark Morgan', }, { ID: 11, OrderNumber: 38466, OrderDate: new Date(2024, 2, 1), SaleAmount: 7800, Terms: '15 Days', TotalAmount: 8200, CustomerStoreState: 'California', CustomerStoreCity: 'Los Angeles', Employee: 'Harv Mudd', }, { ID: 14, OrderNumber: 39420, OrderDate: new Date(2024, 1, 15), SaleAmount: 20500, Terms: '15 Days', TotalAmount: 9100, CustomerStoreState: 'California', CustomerStoreCity: 'San Jose', Employee: 'Jim Packard', }, { ID: 15, OrderNumber: 39874, OrderDate: new Date(2024, 1, 4), SaleAmount: 9050, Terms: '30 Days', TotalAmount: 19100, CustomerStoreState: 'Nevada', CustomerStoreCity: 'Las Vegas', Employee: 'Harv Mudd', }, { ID: 18, OrderNumber: 42847, OrderDate: new Date(2024, 1, 15), SaleAmount: 20400, Terms: '30 Days', TotalAmount: 20800, CustomerStoreState: 'Wyoming', CustomerStoreCity: 'Casper', Employee: 'Todd Hoffman', }, { ID: 19, OrderNumber: 43982, OrderDate: new Date(2024, 4, 29), SaleAmount: 6050, Terms: '30 Days', TotalAmount: 6250, CustomerStoreState: 'Utah', CustomerStoreCity: 'Salt Lake City', Employee: 'Clark Morgan', }, { ID: 29, OrderNumber: 56272, OrderDate: new Date(2024, 1, 6), SaleAmount: 15850, Terms: '30 Days', TotalAmount: 16350, CustomerStoreState: 'Utah', CustomerStoreCity: 'Salt Lake City', Employee: 'Clark Morgan', }, { ID: 30, OrderNumber: 57429, OrderDate: new Date(2023, 11, 31), SaleAmount: 11050, Terms: '30 Days', TotalAmount: 11400, CustomerStoreState: 'Arizona', CustomerStoreCity: 'Phoenix', Employee: 'Clark Morgan', }];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app" /> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

This demo illustrates how to add the following items to the toolbar:

Predefined Controls
Declare a toolbar item element and specify the name and properties that you want to customize. If a control does not need customization, include its name only. Ensure that items[] contain controls for all features that you enabled in your DataGrid. In this demo, we enable the columnChooser and add the "columnChooserButton" to the items[] array.
DevExtreme Components
Configure the desired DevExtreme component within a toolbar item element. In this demo, we extended the toolbar's item collection with a Button and a SelectBox.
Custom Elements
Specify a template for your custom element within a toolbar item. In this demo, the custom element displays the total group count.