Keyboard Shorcuts

Since version 3.3.3

The React DataGrid supports defining keyboard shorcuts for performing custom actions.

A keyboard shortcut is defined as an object of the following shape:

{
  key: string;
  when?: (context) => boolean | Promise<boolean>;
  handler: (context, event) => void | Promise<void>;
}

The key definition is what you're used to from VS Code and other applications - it can be

a single character: t, x, etc...
a combination of characters (e.g. Ctrl+Shift+p,Cmd+Shift+Enter) - key modifiers are supported, and can be added with the + (plus) sign.
or a special key (e.g. Enter, ArrowUp, ArrowDown, (space), Escape, Delete, Insert, PageDown,PageUp,F1, F2, etc).

Examples of valid shortcuts: Cmd+Shift+e, Alt+Shift+Enter, Shift+PageDown, Ctrl+x

Note

There's a special key * that matches any key. This can be useful when you want to define a keyboard shortcut that should be triggered on any key press.

Note

Another important key is the Cmd|Ctrl key, which matches both the Cmd key on Mac and the Ctrl key on Windows/Linux.

Example combinations: Cmd|Ctrl+Shift+Enter, Cmd|Ctrl+e, Cmd|Ctrl+Shift+i.

Click on a cell and use the keyboard to navigate.

Press Shift+Enter to show an alert with the current active cell position.

View Mode

Fork Fork

import {
  InfiniteTable,
  DataSource,
  DataSourceData,
} from '@infinite-table/infinite-react';
import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
import * as React from 'react';

type Developer = {
  id: number;
  firstName: string;
  lastName: string;
  country: string;
  city: string;
  currency: string;
  preferredLanguage: string;
  stack: string;
  canDesign: 'yes' | 'no';
  hobby: string;
  salary: number;
  age: number;
};

const dataSource: DataSourceData<Developer> = () => {
  return fetch('https://infinite-table.com/.netlify/functions/json-server' + `/developers1k-sql?`)
    .then((r) => r.json())
    .then((data: Developer[]) => data);
};

const columns: InfiniteTablePropColumns<Developer> = {
  preferredLanguage: { field: 'preferredLanguage', header: 'Language' },
  country: { field: 'country', header: 'Country' },
  salary: {
    field: 'salary',
    type: 'number',
  },
  age: { field: 'age' },
  canDesign: { field: 'canDesign' },
  firstName: { field: 'firstName' },
  stack: { field: 'stack' },
  id: { field: 'id' },
  hobby: { field: 'hobby' },
  city: { field: 'city' },
  currency: { field: 'currency' },
};

export default function KeyboardShortcuts() {
  return (
    <>
      <DataSource<Developer> primaryKey="id" data={dataSource}>
        <InfiniteTable<Developer>
          columns={columns}
          keyboardShortcuts={[
            {
              key: 'Shift+Enter',
              when: (context) => !!context.getState().activeCellIndex,
              handler: (context) => {
                const { activeCellIndex } = context.getState();

                const [rowIndex, columnIndex] = activeCellIndex!;
                alert(
                  `Current active cell: row ${rowIndex}, column ${columnIndex}.`,
                );
              },
            },
            {
              key: 'PageUp',
              handler: () => {
                console.log('PageUp key pressed.');
              },
            },
            {
              key: 'PageDown',
              handler: () => {
                console.log('PageDown key pressed.');
              },
            },
          ]}
        />
      </DataSource>
    </>

Note

Keyboard shortcuts have a when optional property. If defined, it restricts when the handler function is called. The handler will only be called when the handler returns true.

Implementing Keyboard Shortcut Handlers

Both the handler function and the when function of a keyboard shorcut are called with an object that gives access to the following:

api - a reference to the Infinite Table API object.
dataSourceApi - a reference to the DataSource API object.
getState - a function that returns the current state of the grid.
getDataSourceState - a function that returns the current state of the data source.

The second parameter of the handler function is the event object that triggered the keyboard shortcut.

Predefined Keyboard Shortcuts

Infinite Table DataGrid comes with some predefined keyboard shorcuts. you can import from the keyboardShortcuts named export.

import { keyboardShortcuts } from '@infinite-table/infinite-react'

Instant Edit

import {
  DataSource,
  InfiniteTable,
  keyboardShortcuts
} from '@infinite-table/infinite-react';

 function App() {
  return <DataSource<Developer> primaryKey="id" data={dataSource}>
    <InfiniteTable<Developer>
      columns={columns}
      keyboardShortcuts={[
        keyboardShortcuts.instantEdit
      ]}
    />
  </DataSource>

Note

For now, the only predefined keyboard shorcut is keyboardShortcuts.instantEdit. This keyboard shorcut starts cell editing when any key is pressed on the active cell. This is the same behavior found in Excel/Google Sheets.

Click on a cell and then start typing to edit the cell.

View Mode

Fork Fork

import {
  InfiniteTable,
  DataSource,
  DataSourceData,
  keyboardShortcuts,
} from '@infinite-table/infinite-react';
import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
import * as React from 'react';

type Developer = {
  id: number;
  firstName: string;
  lastName: string;
  country: string;
  city: string;
  currency: string;
  preferredLanguage: string;
  stack: string;
  canDesign: 'yes' | 'no';
  hobby: string;
  salary: number;
  age: number;
};

const dataSource: DataSourceData<Developer> = () => {
  return fetch('https://infinite-table.com/.netlify/functions/json-server' + `/developers1k-sql?`)
    .then((r) => r.json())
    .then((data: Developer[]) => data);
};

const columns: InfiniteTablePropColumns<Developer> = {
  preferredLanguage: { field: 'preferredLanguage', header: 'Language' },
  country: { field: 'country', header: 'Country' },
  salary: {
    field: 'salary',
    type: 'number',
  },
  age: { field: 'age' },
  canDesign: { field: 'canDesign' },
  firstName: { field: 'firstName' },
  stack: { field: 'stack' },
  id: { field: 'id', defaultEditable: false },
  hobby: { field: 'hobby' },
  city: { field: 'city' },
  currency: { field: 'currency' },
};

export default function KeyboardShortcuts() {
  return (
    <>
      <DataSource<Developer> primaryKey="id" data={dataSource}>
        <InfiniteTable<Developer>
          columns={columns}
          columnDefaultEditable
          keyboardShortcuts={[keyboardShortcuts.instantEdit]}
        />
      </DataSource>
    </>