Skip to main content

Function: handleKeydown()

handleKeydown<Row>(table, root, e): void

Defined in: packages/sdvtables/src/html/controls.ts:258

Task 10 (A45, A48): a keydown anywhere inside root, the table wrapper; shared by hydrate and <SdvTable/>. Ignored with Ctrl, Meta or Alt held, during IME composition, or when it comes from a text field (input, textarea, select, contenteditable). Otherwise keyAction decides, and a key that acts is consumed (preventDefault): a cursor move focuses the destination row BEFORE the engine re-renders, so the re-render's focus restore keeps it there; s and Enter/Space go through handleClick on the column's sort button or on the row, exactly as a click, once per press (a held key's repeats are consumed but toggle nothing); / focuses the search box, and passes through to the browser (quick-find) when root has none. spec.interactive.hotkeys: false leaves only the arrows, Enter and Space.

Type Parameters​

Row​

Row

Parameters​

table​

Table<Row>

root​

Element

e​

KeyboardEvent

Returns​

void

Example​

import { createTable, defineTable } from "@sportsdataverse/sdvtables";
import { handleKeydown, renderHTML } from "@sportsdataverse/sdvtables/html";

// 2024 AFC: Kansas City 15 wins, Buffalo 13
const spec = defineTable<{ team: string; wins: number }>()
  .columns((c) => [c.text("team"), c.int("wins")])
  .build();
const table = createTable(spec, [
  { team: "KC", wins: 15 },
  { team: "BUF", wins: 13 },
]);
const root = document.createElement("div");
root.innerHTML = renderHTML(table, { fonts: false });
root.addEventListener("keydown", (e) => handleKeydown(table, root, e));
root
  .querySelector("[data-sdv-body] tr[data-row]")
  ?.dispatchEvent(new KeyboardEvent("keydown", { key: "j", bubbles: true, cancelable: true }));
table.state.cursor; // { row: 1, col: null }