Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Data Grid

Keyboard Navigation

Documentation

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

  • Tab
    Navigate between grid elements.

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

  • Enter or Space
    Execute an action on a focused element.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import DataGrid, { Column, Lookup, Editing, HeaderFilter, FilterPanel, FilterRow, Pager, Paging } from 'devextreme-react/data-grid'; import { employees, states } from './data.js'; const allowedPageSizes = [5, 10]; class App extends React.Component { render() { return ( <DataGrid dataSource={employees} keyExpr="ID" focusedRowEnabled={true} showBorders={true} > <Editing allowUpdating={true} allowDeleting={true} selectTextOnEditStart={true} useIcons={true} /> <HeaderFilter visible={true} /> <FilterPanel visible={true} /> <FilterRow visible={true} /> <Pager allowedPageSizes={allowedPageSizes} showPageSizeSelector={true} showNavigationButtons={true} /> <Paging defaultPageSize={10} /> <Column dataField="FirstName" /> <Column dataField="LastName" /> <Column dataField="Position" /> <Column dataField="StateID" caption="State" dataType="number"> <Lookup dataSource={states} valueExpr="ID" displayExpr="Name" /> </Column> </DataGrid> ); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('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/20.2.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/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> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <p>Click this text and press <b>Tab</b></p> <div id="app"></div> </div> </body> </html>
export const employees = [ { '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 = [ { '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' }];
System.config({ transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { "esModule": true }, }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16.14.0/umd/react.development.js', 'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.5', 'devextreme-react': 'npm:devextreme-react@20.2.5', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.18/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.11/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.11/hooks/dist/hooks.js', // SystemJS plugins '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' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });