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 widget:

  • 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 } from 'devextreme-react/data-grid'; import { employees, states } from './data.js'; class App extends React.Component { render() { return ( <DataGrid dataSource={employees} keyExpr={'ID'} editing = {{ allowUpdating: true, allowDeleting: true, selectTextOnEditStart: true, useIcons: true }} headerFilter={{ visible: true }} filterPanel={{ visible: true }} filterRow={{ visible: true }} pager={ { allowedPageSizes: [5, 10], showPageSizeSelector: true, showNavigationButtons: true } } paging={{ pageSize: 10 }} focusedRowEnabled={true} showBorders={true} > <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/19.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.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', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-react': 'npm:devextreme-react@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', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });