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 setup>
  import { Grid } from "@svar-ui/vue-grid";
  import { getData } from "../data";
  import { ref } from "vue";

  const api = ref();

  const { columns, data } = getData();

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

<template>
  <Grid :data="data" :columns="columns" ref="api" :hotkeys="hotkeys" />
</template>

Related articles: