Seleção

Use selectable para habilitar a seleção. Inicialmente, a coluna de checkboxes não é exibida. Use o ícone de seleção na toolbar para entrar no modo de seleção; então os checkboxes de linha e cabeçalho aparecem. O checkbox do cabeçalho seleciona ou deseleciona somente a página visível e fica indeterminate com seleção parcial. Sair do modo de seleção limpa a seleção e oculta os checkboxes. A seleção é mantida entre páginas remotas; linhas de uma página recém-carregada nunca ficam selecionadas automaticamente.

Sem selectedRowIds, a seleção não é controlada:

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

Testar ao vivo no Lab

Para seleção controlada, passe selectedRowIds e atualize-o a partir de onSelectionChange. O callback recebe IDs selecionados e registros selecionados disponíveis atualmente no Grid.

A seleção controlled e uncontrolled mantém o mesmo comportamento. Uma selection Action bem-sucedida limpa os IDs selecionados e mantém o modo de seleção ativo.

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