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

<script>
  import { Grid } from "@svar-ui/svelte-grid";
  import { getData } from "../data";

  let api = $state();

  const { columns, data } = getData();

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

<Grid {data} {columns} bind:this={api} {hotkeys} />

Related articles: