LyteNyte Grid logo for light mode. Links back to the documentation home page.
Github repository for this project. 1771 Technologies home page
Keyboard & Accessibility

Keyboard

Navigate, select, and edit data using keyboard shortcuts and touch gestures.

LyteNyte Grid provides keyboard bindings to improve navigation, editing, and accessibility. It follows the ARIA Grid Pattern and adds custom keyboard bindings for advanced interactions. Read the ARIA pattern first, then use this guide for the LyteNyte additions.

Navigation

Use the arrow keys (←, →, ↑, ↓) to move between header and grid cells. The ← and → arrow keys cycle through all tabbable elements within a cell before moving to the next cell. This behavior differs slightly from the ARIA Grid Pattern’s recommended navigation model, but it provides a more efficient navigation experience.

You can combine the arrow keys with your keyboard’s meta modifier to navigate to the bounds of the grid:

  • Ctrl →: Jump to the last cell in the current row or header.
  • Ctrl ←: Jump to the first cell in the current row or header.
  • Ctrl ↑: Focus the first row (when a grid cell is focused).
  • Ctrl ↓: Focus the last row (when a grid cell is focused).

Note

On macOS, you can use the Cmd key instead of the Ctrl key.

In addition to the arrow keys, LyteNyte Grid supports the following navigation keybindings:

  • PageDown: Move focus down by approximately the number of rows currently in view.
  • PageUp: Move focus up by approximately the number of rows currently in view.
  • Home: Move focus to the first cell of the current row, equivalent to Ctrl ←.
  • End: Move focus to the last cell of the current row, equivalent to Ctrl →.
  • Ctrl Home: Move focus to the first cell in the first row.
  • Ctrl End: Move focus to the last cell in the last row.

Tab Order

LyteNyte Grid orders DOM elements to match the visual layout and sets the viewport and cells to tabIndex=0. With this configuration, Tab would normally follow the DOM order. However, the grid treats the viewport as a single tab stop, except during cell editing.

Pressing Tab moves focus to the next element outside the grid, so users don’t tab through every cell before reaching the next focus group.

Row Detail Navigation

Navigate expanded row details using the keyboard. When a cell is focused and the row is expanded, press ↓ to focus the detail container. Press ↓ again to move to the next row.

The demo supports all navigation bindings. Use it to explore the grid’s response to inputs.

Row Detail Navigation

Fork code on stack blitzFork code on code sandbox

Cell Selection

When cellSelectionMode is set to range, you can use the following keybindings to modify the selection. See the Cell Range Selection guide for detailed guidance.

  • Shift →: Expand or shrink the selection one column to the right.
  • Shift ←: Expand or shrink the selection one column to the left.
  • Shift ↑: Expand or shrink the selection one row up.
  • Shift ↓: Expand or shrink the selection one row down.
  • Ctrl Shift →: Expand or shrink the selection to the last column on the right.
  • Ctrl Shift ←: Expand or shrink the selection to the last column on the left.
  • Ctrl Shift ↑: Expand or shrink the selection to the first row.
  • Ctrl Shift ↓: Expand or shrink the selection to the last row.
  • Ctrl A: Select all cells in the grid.

Selection expansion depends on the current selection rectangle and the pivot cell, which is the focused cell. Use the demo below to explore selection bindings.

Cell Selection Navigation

Fork code on stack blitzFork code on code sandbox

Editable Cells

When cell editing is enabled, LyteNyte Grid adds additional keybindings to make keyboard-based editing intuitive. See the Cell Editing guide for details on updating cell values.

  • Press Enter to enter edit mode.
  • Press Enter again to confirm and commit the edit.
  • Press Esc to cancel the edit.
  • Press any printable character to enter edit mode and set the cell value to the pressed character.

Key Binding Customization

LyteNyte Grid is headless, so you can add custom keybindings by handling the component’s onKeyDown.

The demo below binds Space to row selection. Double-click a row to select it, or focus a cell and press Space. For more details, see the Row Selection guide.

Row Selection Keybindings

Fork code on stack blitzFork code on code sandbox

Use the events property to attach custom handlers without switching to a fully headless implementation. The example below adds a custom keybinding using the grid’s events property.

<Grid
  columns={columns}
  columnBase={base}
  rowSource={ds}
  rowSelectionMode="multiple"
  rowSelectionActivator="double-click"
  events={useMemo<Grid.Events<GridSpec>>(() => {
    return {
      row: {
        keyDown: (p) => {
          if (p.event.key === " ") {
            p.event.preventDefault();
            p.api.rowSelect({
              selected: p.row.id,
              deselect: p.api.rowIsSelected(p.row.id),
            });
          }
        },
      },
    };
  }, [])}
/>

If you use the fully headless grid setup, the equivalent implementation is shown below. See the Headless Component Parts guide for more details.

<Grid
  columns={columns}
  columnBase={base}
  rowSource={ds}
  rowSelectionMode="multiple"
  rowSelectionActivator="double-click"
  ref={apiRef}
>
  <Grid.RowsContainer>
    <Grid.RowsCenter>
      {(row) => {
        if (row.kind === "full-width") return null;


        return (
          <Grid.Row
            key={row.id}
            row={row}
            onKeyDown={(ev) => {
              if (ev.key === " ") {
                ev.preventDefault();


                apiRef.current?.rowSelect({
                  selected: row.id,
                  deselect: apiRef.current.rowIsSelected(row.id),
                });
              }
            }}
          >
            {row.cells.map((cell) => {
              return <Grid.Cell cell={cell} key={cell.id} />;
            })}
          </Grid.Row>
        );
      }}
    </Grid.RowsCenter>
  </Grid.RowsContainer>
</Grid>

Overwriting Existing Bindings

LyteNyte Grid registers all default keybindings on the Grid.Viewport element. If you provide a handler that prevents the default behavior or stops event propagation, LyteNyte Grid will not activate its built-in keybindings.

The example below prevents all default grid keybindings. Modify this pattern carefully to match your application’s requirements.

<Grid
  columns={columns}
  columnBase={base}
  rowSource={ds}
  rowSelectionMode="multiple"
  rowSelectionActivator="double-click"
  events={useMemo<Grid.Events<GridSpec>>(() => {
    return {
      viewport: {
        keyDown: (p) => {
          p.event.preventDefault();
        },
      },
    };
  }, [])}
/>

Warning

Overriding or disabling LyteNyte Grid’s default keybindings is not recommended. These keybindings are designed to maximize accessibility. Changing or preventing them will reduce the overall accessibility of your application.

Touch Interactions

LyteNyte Grid supports touch devices. Browser click events fire on tap, and the grid uses these events for its interaction handlers.

Next Steps