Seleção de linhas e tabelas virtualizadas

Adicione uma coluna de seleção à sua matriz de ColumnDef usando o id 'select'. A célula renderiza uma caixa de seleção conectada a row.getToggleSelectedHandler(). O cabeçalho renderiza uma caixa de seleção para selecionar todas as linhas usando table.getToggleAllRowsSelectedHandler().

Você também deve passar o estado rowSelection e onRowSelectionChange para useReactTable.

row.getIsSelected() retorna true quando uma linha está selecionada no momento, sendo ideal para aplicar um estilo de plano de fundo destacado às linhas selecionadas.

row.getIsSomeSelected() trata do estado indeterminado da caixa de seleção quando apenas algumas linhas de um grupo estão selecionadas, o que é útil em tabelas agrupadas.

table.getSelectedRowModel().rows retorna uma matriz com todos os objetos de linha selecionados no momento. Cada linha possui uma propriedade row.original que contém o objeto de dados original.

É assim que você cria botões de ações em massa que operam sobre o conjunto selecionado, como "Excluir selecionados" ou "Exportar selecionados".

Renderize condicionalmente os botões de ação com base em table.getSelectedRowModel().rows.length > 0. Quando nenhuma linha estiver selecionada, oculte ou desative a barra de ferramentas de ações em massa para evitar interações confusas com um estado vazio.

Exiba a quantidade de itens selecionados na interface: "{count} linhas selecionadas" mantém os usuários informados sobre a seleção.

Renderizar 10.000 linhas como nós do DOM é extremamente lento. O navegador precisa organizar, pintar e manter milhares de elementos. Os usuários percebem uma rolagem instável e renderizações iniciais lentas.

A virtualização renderiza apenas as linhas atualmente visíveis na área de visualização, reduzindo drasticamente o tamanho do DOM e melhorando o desempenho.

Instale @tanstack/react-virtual junto com @tanstack/react-table. As duas bibliotecas são separadas, mas foram projetadas para se complementarem. O TanStack Table gerencia a lógica dos seus dados; o TanStack Virtual gerencia quais itens são renderizados no DOM.

O ponto de integração é a matriz de linhas de table.getRowModel().rows.

Chame useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 }). A propriedade count determina quantos itens virtuais existem, correspondendo à quantidade atual de linhas da tabela após todos os filtros.

estimateSize fornece uma estimativa inicial da altura da linha; as alturas reais são medidas à medida que as linhas são renderizadas.

Chame virtualizer.getVirtualItems() para obter apenas as linhas que devem estar no DOM naquele momento. Percorra essa matriz, acesse a linha real por meio de table.getRowModel().rows[virtualRow.index] e renderize apenas esses elementos tr.

Cada item virtual possui uma propriedade start para o posicionamento absoluto dentro do contêiner de rolagem.

Para manter a posição correta da rolagem, adicione um elemento espaçador superior com altura igual a start do primeiro item virtual e um elemento espaçador inferior com altura igual ao tamanho total menos end do último item.

Esses elementos invisíveis preenchem o espaço que as linhas não renderizadas ocupariam, mantendo a proporção correta da barra de rolagem.

Passe measureElement: el => el.getBoundingClientRect().height para useVirtualizer, obtendo alturas dinâmicas precisas das linhas. A referência de cada linha é associada ao elemento tr para que o virtualizador meça sua altura real renderizada.

Isso trata linhas com conteúdo de tamanhos variados (texto com várias linhas, linhas expandidas) sem mudanças inesperadas no layout.

O TanStack Table com ordenação, filtragem, paginação, seleção de linhas e TanStack Virtual combina todos esses recursos. A quantidade de linhas passada para useVirtualizer deve vir de table.getRowModel().rows depois que todos os modelos de linhas ativos tiverem processado os dados.

Com a paginação ativada, primeiro pagine e depois virtualize as linhas da página atual para obter uma rolagem suave dentro de uma página grande.

Qual método retorna os objetos de dados originais de todas as linhas selecionadas no momento?

A seleção de linhas usa uma coluna de caixas de seleção com getToggleSelectedHandler, o estado rowSelection e table.getSelectedRowModel().rows para acessar os dados selecionados. A virtualização com useVirtualizer renderiza apenas as linhas visíveis usando getVirtualItems, elementos espaçadores e measureElement opcional para alturas dinâmicas.

Todos os recursos do TanStack Table (ordenação, filtragem, paginação e seleção) combinam perfeitamente com a renderização virtual.