Skip to main content

hotkeys

Description​

Optional. Allows specifying custom hotkeys for Grid actions

Usage​

hotkeys?: false | { [key: string]: ((e?: KeyboardEvent) => void) | boolean };

Parameters​

The property can take the following values:

  • false - disables all hotkeys
  • An object where:
    • key - a string representing a keyboard shortcut, e.g., "ctrl+n", "Delete", "ctrl+shift+f"
    • value - can be one of the following:
      • boolean:
        • true (default) - default hotkeys are enabled
        • false - default hotkeys are disabled
      • (e?: KeyboardEvent) => void: a function that receives the keyboard event (KeyboardEvent) and performs a custom action

Example​

The example demonstrates how to add custom hotkeys: "ctrl+n" is assigned to add a new row and "Delete" to delete the selected row

import { useRef } from "react";
import { Grid } from "@svar-ui/react-grid";
import { getData } from "../data";

export default function App() {
  // apiRef will hold the Grid API instance
  const apiRef = useRef<any>(null);

  const { columns, data } = getData();

  const hotkeys = {
    "ctrl+n": (e?: KeyboardEvent) => {
      e?.preventDefault();
      apiRef.current?.exec("add-row", { row: { name: "New" } });
    },
    Delete: (e?: KeyboardEvent) => {
      e?.preventDefault();
      const id = apiRef.current?.getState().selectedRows[0];
      if (id) apiRef.current?.exec("delete-row", { id });
    }
  };

  return <Grid data={data} columns={columns} ref={apiRef} hotkeys={hotkeys} />;
}

Related articles: