Selection

Set selectable to make selection available. Initially, no checkbox column is shown. Use the selection icon in the toolbar to enter selection mode; row and header checkboxes then appear. The header checkbox selects or deselects only the visible page and is indeterminate for a partial page selection. Leaving selection mode clears the selection and hides the checkboxes. Selection is retained between remote pages, while records on a newly loaded page are never selected automatically.

Without selectedRowIds, selection is uncontrolled:

<DyonaGrid selectable columns={columns} rows={rows} getRowId={(row) => row.id as string} />

Try it live in the Lab

For controlled selection, pass selectedRowIds and update it from onSelectionChange. The callback receives selected IDs and selected records currently available to the Grid.

Controlled and uncontrolled selection keep the same behavior. A successful selection action clears selected IDs while keeping selection mode active.

const [selectedRowIds, setSelectedRowIds] = useState<Array<string | number>>([]);

<DyonaGrid
  selectable
  selectedRowIds={selectedRowIds}
  onSelectionChange={(ids) => setSelectedRowIds(ids)}
  columns={columns}
  rows={rows}
  getRowId={(row) => row.id as string}
/>