Your search did not match any results.
Data Grid

Multiple Sorting

Documentation

The DataGrid widget provides sorting capability against one or more columns, so that you do not have to write a single line of code. A column’s current sort order is indicated by a sort glyph displayed at the rightmost edge of the column header. When not sorted, this glyph is hidden. Click a column header to initiate sorting or change the column’s sort order (ascending to descending and vice versa). Press the Shift key when clicking headers to sort against multiple columns simultaneously. You can also use the popup context menu (right-click a column header) to initiate desired sort operations. In this example, grid columns are initially sorted by the First Name and Last Name columns in ascending order (the sortOrder option of these columns is set to «asc»). You can disable sorting for a specific column by setting its allowSorting option to false.

Copy to CodeSandBox
Apply
Reset
<template> <div> <dx-data-grid :ref="dataGridRefName" :data-source="employees" :show-borders="true" > <dx-column :width="70" data-field="Prefix" caption="Title" /> <dx-column data-field="FirstName" sort-order="asc" /> <dx-column data-field="LastName" sort-order="asc" /> <dx-column data-field="City"/> <dx-column data-field="State"/> <dx-column :width="130" :allow-sorting="!positionDisableSorting" data-field="Position" /> <dx-column data-field="HireDate" data-type="date" /> <dx-sorting mode="multiple"/> </dx-data-grid> <div class="options"> <div class="caption">Options</div> <div class="option"> <dx-check-box :value.sync="positionDisableSorting" text="Disable Sorting for the Position Column" @value-changed="onValueChanged" /> </div> </div> </div> </template> <script> import { DxColumn, DxDataGrid, DxSorting } from 'devextreme-vue/data-grid'; import { DxCheckBox } from 'devextreme-vue'; import { employees } from './data.js'; export default { components: { DxCheckBox, DxColumn, DxDataGrid, DxSorting }, data() { return { positionDisableSorting: false, dataGridRefName: 'dataGrid', employees }; }, methods: { onValueChanged() { const dataGrid = this.$refs[this.dataGridRefName].instance; dataGrid.columnOption(5, 'sortOrder', void 0); } } }; </script> <style scoped> .options { padding: 20px; margin-top: 20px; background-color: rgba(191, 191, 191, 0.15); } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
export const employees = [{ 'ID' : 1, 'FirstName' : 'John', 'LastName' : 'Heart', 'Phone' : '(213) 555-9392', 'Prefix' : 'Mr.', 'Position' : 'CEO', 'BirthDate' : '1964-03-16', 'HireDate' : '1995-01-15', 'Email' : 'jheart@dx-email.com', 'Address' : '351 S Hill St.', 'City' : 'Los Angeles', 'StateID' : 5, 'State' : 'California', 'HomePhone' : '(213) 555-9208', 'Skype' : 'jheartDXskype' }, { 'ID' : 2, 'FirstName' : 'Olivia', 'LastName' : 'Peyton', 'Phone' : '(310) 555-2728', 'Prefix' : 'Mrs.', 'Position' : 'Sales Assistant', 'BirthDate' : '1981-06-03', 'HireDate' : '2012-05-14', 'Email' : 'oliviap@dx-email.com', 'Address' : '807 W Paseo Del Mar', 'City' : 'Los Angeles', 'StateID' : 5, 'State' : 'California', 'HomePhone' : '(310) 555-4547', 'Skype' : 'oliviapDXskype' }, { 'ID' : 3, 'FirstName' : 'Robert', 'LastName' : 'Reagan', 'Phone' : '(818) 555-2387', 'Prefix' : 'Mr.', 'Position' : 'CMO', 'BirthDate' : '1974-09-07', 'HireDate' : '2002-11-08', 'Email' : 'robertr@dx-email.com', 'Address' : '4 Westmoreland Pl.', 'City' : 'Bentonville', 'StateID' : 4, 'State' : 'Arkansas', 'HomePhone' : '(818) 555-2438', 'Skype' : 'robertrDXskype' }, { 'ID' : 4, 'FirstName' : 'Greta', 'LastName' : 'Sims', 'Phone' : '(818) 555-6546', 'Prefix' : 'Ms.', 'Position' : 'HR Manager', 'BirthDate' : '1977-11-22', 'HireDate' : '1998-04-23', 'Email' : 'gretas@dx-email.com', 'Address' : '1700 S Grandview Dr.', 'City' : 'Atlanta', 'StateID' : 11, 'State' : 'Georgia', 'HomePhone' : '(818) 555-0976', 'Skype' : 'gretasDXskype' }, { 'ID' : 5, 'FirstName' : 'Brett', 'LastName' : 'Wade', 'Phone' : '(626) 555-0358', 'Prefix' : 'Mr.', 'Position' : 'IT Manager', 'BirthDate' : '1968-12-01', 'HireDate' : '2009-03-06', 'Email' : 'brettw@dx-email.com', 'Address' : '1120 Old Mill Rd.', 'City' : 'Boise', 'StateID' : 13, 'State' : 'Idaho', 'HomePhone' : '(626) 555-5985', 'Skype' : 'brettwDXskype' }, { 'ID' : 6, 'FirstName' : 'Sandra', 'LastName' : 'Johnson', 'Phone' : '(562) 555-2082', 'Prefix' : 'Mrs.', 'Position' : 'Controller', 'BirthDate' : '1974-11-15', 'HireDate' : '2005-05-11', 'Email' : 'sandraj@dx-email.com', 'Address' : '4600 N Virginia Rd.', 'City' : 'Beaver', 'StateID' : 44, 'State' : 'Utah', 'HomePhone' : '(562) 555-8272', 'Skype' : 'sandrajDXskype' }, { 'ID' : 7, 'FirstName' : 'Kevin', 'LastName' : 'Carter', 'Phone' : '(213) 555-2840', 'Prefix' : 'Mr.', 'Position' : 'Shipping Manager', 'BirthDate' : '1978-01-09', 'HireDate' : '2009-08-11', 'Email' : 'kevinc@dx-email.com', 'Address' : '424 N Main St.', 'City' : 'San Diego', 'StateID' : 5, 'State' : 'California', 'HomePhone' : '(213) 555-8038', 'Skype' : 'kevincDXskype' }, { 'ID' : 8, 'FirstName' : 'Cynthia', 'LastName' : 'Stanwick', 'Phone' : '(818) 555-6655', 'Prefix' : 'Ms.', 'Position' : 'HR Assistant', 'BirthDate' : '1985-06-05', 'HireDate' : '2008-03-24', 'Email' : 'cindys@dx-email.com', 'Address' : '2211 Bonita Dr.', 'City' : 'Little Rock', 'StateID' : 4, 'State' : 'Arkansas', 'HomePhone' : '(818) 555-6808', 'Skype' : 'cindysDXskype' }, { 'ID' : 9, 'FirstName' : 'Kent', 'LastName' : 'Samuelson', 'Phone' : '(562) 555-9282', 'Prefix' : 'Dr.', 'Position' : 'Ombudsman', 'BirthDate' : '1972-09-11', 'HireDate' : '2009-04-22', 'Email' : 'kents@dx-email.com', 'Address' : '12100 Mora Dr', 'City' : 'St. Louis', 'StateID' : 26, 'State' : 'Missouri', 'HomePhone' : '(562) 555-1328', 'Skype' : 'kentsDXskype' }, { 'ID' : 10, 'FirstName' : 'Taylor', 'LastName' : 'Riley', 'Phone' : '(310) 555-7276', 'Prefix' : 'Mr.', 'Position' : 'Network Admin', 'BirthDate' : '1982-08-14', 'HireDate' : '2012-04-14', 'Email' : 'taylorr@dx-email.com', 'Address' : '7776 Torreyson Dr', 'City' : 'San Jose', 'StateID' : 5, 'State' : 'California', 'HomePhone' : '(310) 555-9712', 'Skype' : 'taylorrDXskype' }];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });