@gridkitjs/react v0.4.0

Minor Changes#

• f30a2a9: The grid is now an ARIA grid a keyboard can navigate. It carries role="grid" with row and column counts and indices, headers carry scope="col", and one roving tab stop moves cell to cell under the arrow keys, Home, End, Ctrl+Home, Ctrl+End and the page keys.

  Two changes to what a keyboard already did:

  • Tab now passes the whole grid, entering it once instead of stopping on every resize handle. The handles have left the tab order — a widget under role="grid" has one tab stop, and a grid of twenty columns previously had twenty.
  • Keyboard resize moved to Alt+ArrowLeft / Alt+ArrowRight on the focused header, from the bare arrows on its handle, which the grid now needs for navigation. Ctrl+ArrowLeft / Ctrl+ArrowRight still reorder.

  label and labelledBy give the grid its accessible name, without which a screen reader announces only "grid":

  <DataGridComponent label="Application costs" ... />

  Reorders and resizes are announced through a live region, so a change with only a visual cue is no longer silent.

• f92198e: DataGridComponent takes getRowId, giving each row a stable identity for state keyed by it. Rows are keyed by it rather than by their array position, and cellTemplate receives it as rowId alongside a selected flag.

  <DataGridComponent dataSource={rows} getRowId={(row) => row.Id} />

  Without it a row is identified by its position, which is enough for a static grid — so nothing has to change — but ties row state to where a row sits rather than to the row itself.

• 4a92413: Rows, columns and cells can be selected. selectable says which and how many of each — off by default, since selection claims the click:

  <DataGridComponent
    dataSource={rows}
    getRowId={(row) => row.Id}
    selectable={{ rows: "multiple", columns: "multiple", cells: "single" }}
    onRowSelect={({ row }) => console.log(row.row.Name)}
    onRowSelectionChange={({ added, removed, selected }) => persist(selected)}
  />

  A cell takes false | "single" rather than a mode of its own — it addresses one value, so there is no range to take.

  Click replaces, Ctrl-click toggles and Shift-click takes a range; from the keyboard, Space toggles the focused row or column, Enter replaces, Ctrl+A takes every row and Escape lets them all go. Rows and cells report aria-selected, and the grid aria-multiselectable.

  Thirteen callbacks report it — onRowSelect, onRowsSelect, onRowDeselect, onRowsDeselect and onRowSelectionChange, the same five for columns, and onCellSelect / onCellDeselect / onCellSelectionChange. Each carries the resolved row, column or cell value rather than a bare id, and all of them are fanned out from one diff, so no two can disagree about what an interaction did. defaultRowSelection, defaultColumnSelection and defaultCellSelection set the starting state.

  Give getRowId alongside selectable for data that sorts, filters or pages: without it a row is identified by its position, so a re-sort leaves the same positions selected under different rows.

Patch Changes#

• Updated dependencies [f92198e]
  • @gridkitjs/core@0.5.0