Loading component…
Loading component…
What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.
React
Package maturity: stable · Implementation verification: Beta
SwiftUI
Package maturity: stable · Implementation verification: Experimental
Jetpack Compose
Package maturity: stable · Implementation verification: Experimental
Flutter
Package maturity: stable · Implementation verification: Experimental
This platform’s whole catalogue is verified to React beta, SwiftUI experimental, Jetpack Compose experimental, Flutter experimental. The catalogue figure is the weakest component on that platform, not an average.
Row-virtualized grid with column resize, drag-to-reorder, left/right pin, sort, edit-in-place cells, and opt-in range selection with copy — fully keyboard-operable.
Reduced motion: off · your browser setting
npx @kinetixui/cli add data-gridimport { DataGrid } from "@kinetixui/ui";Styled entirely from the KinetixUI token contract — bg-action,
text-muted-foreground, border-input, ring-ring. Works in light and dark
with no extra config. Keyboard and ARIA behaviour is inherited from Radix where the
component is built on a primitive; the hand-built widgets (DataGrid, TreeView,
ColorPicker, MultiSelect, Tour, KanbanBoard) have their own documented interaction
models — see Accessibility.
The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.
This table is React-specific. The SwiftUI, Jetpack Compose, Flutter and Angular implementations share the design contract — the same variants, sizes, states and tokens — but each exposes its own idiomatic interface. Their real usage is in the platform tabs on the example above, not here.
| Prop | Type | Notes |
|---|---|---|
| columnsrequired | DataGridColumn<TData>[] | |
| datarequired | TData[] | |
| heightrequired | string | numberviewport height — a number (px) or any CSS height value; enables row virtualization | viewport height — a number (px) or any CSS height value; enables row virtualization |
| rowHeight | number | |
| overscan | number | |
| getRowId | ((row: TData, index: number) => React.Key) | |
| className | string | |
| selectable | booleanOpt in to range selection: drag, or Shift+arrows / Shift+click, to extend a rectangle from the anchor cell; Ctrl/Cmd+click or Ctrl+Space starts an additional, separate range; Ctrl/Cmd+A selects every… | Opt in to range selection: drag, or Shift+arrows / Shift+click, to extend a rectangle from the anchor cell; Ctrl/Cmd+click or Ctrl+Space starts an additional, separate range; Ctrl/Cmd+A selects every… |
| onSelectionChange | ((selection: DataGridSelection | null) => void)fires when the selected range changes; `null` when it is cleared | fires when the selected range changes; `null` when it is cleared |
29 behaviours asserted on every commit by packages/ui/src/components-keyboard.test.tsx. Listed because they are tested, not the other way round — if one stops being tested it stops appearing here.
is a single tab stop: Tab enters on the first header, the next Tab leaves the grid
moves between cells with the arrow keys, header row included, and stops at the edges
Home / End go to the row ends; Ctrl+Home / Ctrl+End to the grid corners
remembers the active cell: leaving and re-entering the grid returns to it
sorts from the keyboard: Enter / Space on a sortable header
edits a cell from the keyboard: Enter to edit, Enter to commit, focus returns to the cell
Escape cancels an edit without committing and returns focus to the cell
Alt+Arrow reorders a column from its header, keeps focus on it, and announces the move
Shift+Arrow resizes a column from its header and announces the width
mirrors the arrow keys under RTL
is off by default: no aria-multiselectable, no aria-selected, Shift+Arrow just moves
Shift+Arrow extends a rectangle from the anchor and reports it
shrinks when Shift moves back toward the anchor
a plain arrow key collapses the selection
Ctrl+A selects every cell; Escape clears it
Shift+click extends from the previously active cell
Ctrl+Space on a focused header selects its column
Shift+Space on a cell selects its whole row
a plain click clears the selection
Ctrl+C copies the range as tab-separated values
Shift+click extends from the anchor even after it has scrolled out of the rendered window
Ctrl+click adds a separate range and keeps the first, reporting both
Ctrl+click with nothing selected keeps the active cell as the first range
Ctrl+Space is the keyboard way to add a range; Shift+arrows then extends the new one
Ctrl+C copies every range, separated by a blank line
re-sorting clears the selection (it refers to displayed rows)
scrolls the target row into the rendered window and focuses it
PageDown / Ctrl+End jump by a page and to the last row
stays reachable by Tab even after the active row scrolls out of the rendered window