Selección

Usá selectable para habilitar la selección. Inicialmente no se muestra la columna de checkboxes. Usá el icono de selección de la toolbar para entrar al modo selección; entonces aparecen los checkboxes de fila y cabecera. El checkbox de cabecera selecciona o deselecciona solo la página visible y queda indeterminate con selección parcial. Salir del modo selección limpia la selección y oculta los checkboxes. La selección se conserva entre páginas remotas; las filas de una página recién cargada nunca quedan seleccionadas automáticamente.

Sin selectedRowIds, la selección no es controlada:

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

Probar en el Lab

Para selección controlada, pasá selectedRowIds y actualizalo desde onSelectionChange. El callback recibe IDs seleccionados y registros seleccionados disponibles actualmente en el Grid.

La selección controlled y uncontrolled mantiene el mismo comportamiento. Una selection Action exitosa limpia los IDs seleccionados y mantiene activo el modo selección.

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}
/>