UX DataTables

Type to search columns, filters, options, and extensions.

↑↓ to navigate · Enter to open · Esc to close

Documentation

KeyTable Extension

Keyboard navigation for DataTables cells and rows

When To Use

Use KeyTable for keyboard-first workflows, data entry, and power-user grids.

Minimal Example

use Pentiminax\UX\DataTables\Model\Extensions\KeyTableExtension;

$dataTable->addExtension(new KeyTableExtension());

Advanced Example

$dataTable->addExtension(
    new KeyTableExtension(
        blurable: false,
        className: 'cell-focus',
        clipboard: true,
        clipboardOrthogonal: 'display',
        columns: ':not(:first-child)',
        editOnFocus: false,
        focus: [0, 1],
        keys: [37, 38, 39, 40],
        tabIndex: 0,
    )
);

columns is a DataTables column-selector string restricting which columns can be focused (default '' allows every column). focus is a [row, column] pair to focus on load. keys restricts which key codes KeyTable listens for; omit either to keep DataTables’ defaults (no initial focus, every key).

Frequent Pitfalls

  • Not testing keyboard interactions with Select/Scroller combinations.
  • Missing focus styling in custom CSS themes.