DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Keyboard Navigation

Documentation

In this demo, you can use the following keys and key combinations to interact with the DataGrid:

  • Enter
    Execute an action on a focused element.

  • Tab
    Navigate within DataGrid elements.

  • Ctrl + ↑ or Ctrl + ↓
    Navigate between a column header, filter row, data area, filter panel, and pager.

Backend API
<template> <DxDataGrid :data-source="employees" :show-borders="true" :focused-row-enabled="true" key-expr="ID" > <DxEditing :allow-updating="true" :allow-deleting="true" :select-text-on-edit-start="true" :use-icons="true" /> <DxHeaderFilter :visible="true"/> <DxFilterRow :visible="true"/> <DxFilterPanel :visible="true"/> <DxPager :allowed-page-sizes="[5, 10]" :show-page-size-selector="true" :show-navigation-buttons="true" /> <DxPaging :page-size="10"/> <DxColumn data-field="FirstName"/> <DxColumn data-field="LastName"/> <DxColumn data-field="Position"/> <DxColumn data-field="StateID" caption="State" data-type="number" > <DxLookup :data-source="states" value-expr="ID" display-expr="Name" /> </DxColumn> </DxDataGrid> </template> <script setup lang="ts"> import { DxDataGrid, DxEditing, DxHeaderFilter, DxFilterRow, DxFilterPanel, DxPager, DxPaging, DxColumn, DxLookup, } from 'devextreme-vue/data-grid'; import { employees, states } from './data.ts'; </script>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'root:': '../../../../../', 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.3.4/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js', 'demo-ts-loader': 'root:utils/demo-ts-loader.js', 'svg-loader': 'root:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@23.2.5/cjs', 'devextreme-vue': 'npm:devextreme-vue@23.2.5/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.51/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.12/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);
export type Employee = { ID: number; FirstName: string; LastName: string; Prefix: string; Position: string; BirthDate: string; Address: string; StateID: number; }; export type State = { ID: number; Name: string; }; export const employees: Employee[] = [ { ID: 1, FirstName: 'John', LastName: 'Heart', Prefix: 'Mr.', Position: 'CEO', BirthDate: '1964/03/16', Address: '351 S Hill St.', StateID: 5, }, { ID: 2, FirstName: 'Olivia', LastName: 'Peyton', Prefix: 'Mrs.', Position: 'Sales Assistant', BirthDate: '1981/06/03', Address: '807 W Paseo Del Mar', StateID: 5, }, { ID: 3, FirstName: 'Robert', LastName: 'Reagan', Prefix: 'Mr.', Position: 'CMO', BirthDate: '1974/09/07', Address: '4 Westmoreland Pl.', StateID: 4, }, { ID: 4, FirstName: 'Greta', LastName: 'Sims', Prefix: 'Ms.', Position: 'HR Manager', BirthDate: '1977/11/22', Address: '1700 S Grandview Dr.', StateID: 11, }, { ID: 5, FirstName: 'Brett', LastName: 'Wade', Prefix: 'Mr.', Position: 'IT Manager', BirthDate: '1968/12/01', Address: '1120 Old Mill Rd.', StateID: 13, }, { ID: 6, FirstName: 'Sandra', LastName: 'Johnson', Prefix: 'Mrs.', Position: 'Controller', BirthDate: '1974/11/15', Address: '4600 N Virginia Rd.', StateID: 44, }, { ID: 7, FirstName: 'Kevin', LastName: 'Carter', Prefix: 'Mr.', Position: 'Shipping Manager', BirthDate: '1978/01/09', Address: '424 N Main St.', StateID: 5, }, { ID: 8, FirstName: 'Cynthia', LastName: 'Stanwick', Prefix: 'Ms.', Position: 'HR Assistant', BirthDate: '1985/06/05', Address: '2211 Bonita Dr.', StateID: 4, }, { ID: 9, FirstName: 'Kent', LastName: 'Samuelson', Prefix: 'Dr.', Position: 'Ombudsman', BirthDate: '1972/09/11', Address: '12100 Mora Dr', StateID: 26, }, { ID: 10, FirstName: 'Taylor', LastName: 'Riley', Prefix: 'Mr.', Position: 'Network Admin', BirthDate: '1982/08/14', Address: '7776 Torreyson Dr', StateID: 5, }, { ID: 11, FirstName: 'Sam', LastName: 'Hill', Prefix: 'Mr.', Position: 'Sales Assistant', BirthDate: '1984/02/17', Address: '645 Prospect Crescent', StateID: 11, }, { ID: 12, FirstName: 'Kelly', LastName: 'Rodriguez', Prefix: 'Ms.', Position: 'Support Assistant', BirthDate: '1988/05/11', Address: '1601 W Mountain St.', StateID: 5, }, { ID: 13, FirstName: 'Natalie', LastName: 'Maguirre', Prefix: 'Mrs.', Position: 'Trainer', BirthDate: '1977/10/07', Address: '6400 E Bixby Hill Rd', StateID: 29, }, { ID: 14, FirstName: 'Walter', LastName: 'Hobbs', Prefix: 'Mr.', Position: 'Programmer', BirthDate: '1984/12/24', Address: '10385 Shadow Oak Dr', StateID: 13, }, ]; export const states: State[] = [ { ID: 1, Name: 'Alabama', }, { ID: 2, Name: 'Alaska', }, { ID: 3, Name: 'Arizona', }, { ID: 4, Name: 'Arkansas', }, { ID: 5, Name: 'California', }, { ID: 6, Name: 'Colorado', }, { ID: 7, Name: 'Connecticut', }, { ID: 8, Name: 'Delaware', }, { ID: 9, Name: 'District of Columbia', }, { ID: 10, Name: 'Florida', }, { ID: 11, Name: 'Georgia', }, { ID: 12, Name: 'Hawaii', }, { ID: 13, Name: 'Idaho', }, { ID: 14, Name: 'Illinois', }, { ID: 15, Name: 'Indiana', }, { ID: 16, Name: 'Iowa', }, { ID: 17, Name: 'Kansas', }, { ID: 18, Name: 'Kentucky', }, { ID: 19, Name: 'Louisiana', }, { ID: 20, Name: 'Maine', }, { ID: 21, Name: 'Maryland', }, { ID: 22, Name: 'Massachusetts', }, { ID: 23, Name: 'Michigan', }, { ID: 24, Name: 'Minnesota', }, { ID: 25, Name: 'Mississippi', }, { ID: 26, Name: 'Missouri', }, { ID: 27, Name: 'Montana', }, { ID: 28, Name: 'Nebraska', }, { ID: 29, Name: 'Nevada', }, { ID: 30, Name: 'New Hampshire', }, { ID: 31, Name: 'New Jersey', }, { ID: 32, Name: 'New Mexico', }, { ID: 33, Name: 'New York', }, { ID: 34, Name: 'North Carolina', }, { ID: 35, Name: 'Ohio', }, { ID: 36, Name: 'Oklahoma', }, { ID: 37, Name: 'Oregon', }, { ID: 38, Name: 'Pennsylvania', }, { ID: 39, Name: 'Rhode Island', }, { ID: 40, Name: 'South Carolina', }, { ID: 41, Name: 'South Dakota', }, { ID: 42, Name: 'Tennessee', }, { ID: 43, Name: 'Texas', }, { ID: 44, Name: 'Utah', }, { ID: 45, Name: 'Vermont', }, { ID: 46, Name: 'Virginia', }, { ID: 47, Name: 'Washington', }, { ID: 48, Name: 'West Virginia', }, { ID: 49, Name: 'Wisconsin', }, { ID: 50, Name: 'Wyoming', }, { ID: 51, Name: 'North Dakota', }];
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#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/23.2.5/css/dx.light.css" /> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.3.4/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/typescript@4.2.4/lib/typescript.js"></script> <script src="https://unpkg.com/core-js@2.6.12/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.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <p>Click this text and press <b>Tab</b></p> <div id="app" /> </div> </body> </html>