Ordenação, filtragem e paginação

Para adicionar a ordenação, importe getSortedRowModel e adicione-o à configuração de useReactTable. Você também precisa de um estado de ordenação (uma matriz de objetos {id, desc}) e de um manipulador onSortingChange conectado ao estado do React.

O modelo de linhas ordenado envolve o modelo de linhas principal e reordena as linhas com base no estado de ordenação atual.

Cada cabeçalho de coluna disponibiliza column.getToggleSortingHandler(), que você deve associar ao onClick do seu elemento th. Os cliques alternam entre os estados crescente, decrescente e sem ordenação.

column.getIsSorted() retorna 'asc', 'desc' ou false, permitindo renderizar a seta indicadora de ordenação apropriada.

O TanStack Table permite ordenar várias colunas simultaneamente. Os usuários mantêm a tecla Shift pressionada ao clicar no cabeçalho de uma segunda coluna para adicioná-la à matriz de ordenação sem remover a primeira.

A matriz sortingState contém todas as colunas com ordenação ativa na ordem de prioridade, e o modelo de linhas ordenado aplica essas ordenações sequencialmente.

Ative a filtragem global importando getFilteredRowModel e adicionando o estado globalFilter junto com um manipulador onGlobalFilterChange. Conecte um elemento de entrada ao estado para filtrar todas as colunas de uma só vez.

Por padrão, o filtro global usa uma estratégia de correspondência aproximada ou de inclusão, configurável por meio de filterFns.

Colunas individuais podem disponibilizar seus próprios filtros por meio de column.getFilterValue() e column.setFilterValue(). Adicione um elemento de entrada de filtro abaixo de cada cabeçalho de coluna e conecte-o a esses métodos.

Os filtros de coluna e os filtros globais são combinados: as linhas precisam passar por todos os filtros ativos para aparecer no modelo de linhas filtrado.

Importe getPaginationRowModel e adicione-o à configuração de useReactTable junto com um objeto de estado de paginação (pageIndex e pageSize) e um manipulador onPaginationChange.

O modelo de linhas paginado divide as linhas filtradas (e ordenadas) para manter apenas o trecho correspondente à página atual.

A instância da tabela disponibiliza table.nextPage(), table.previousPage(), table.firstPage() e table.lastPage() para a navegação. Use table.getCanNextPage() e table.getCanPreviousPage() para desativar os botões nos limites.

table.setPageIndex(n) salta diretamente para uma página específica; table.setPageSize(n) altera quantas linhas aparecem por página.

table.getPageCount() retorna o número total de páginas com base na quantidade de linhas filtradas dividida por pageSize. table.getState().pagination.pageIndex fornece o índice da página atual, começando em zero.

Use esses valores para criar um contador de páginas como "Página 3 de 12" na interface de paginação.

Os modelos de linhas são compostos: getCoreRowModel fornece a base, getFilteredRowModel envolve essa base aplicando filtros, getSortedRowModel envolve os dados filtrados aplicando a ordenação, e getPaginationRowModel divide o resultado para a página atual.

A ordem é importante: a ordenação acontece depois da filtragem, e a paginação acontece por último.

O TanStack Table memoriza internamente os cálculos dos modelos de linhas. Ordenar e filtrar grandes conjuntos de dados é eficiente porque somente os modelos de linhas alterados são recalculados.

Para conjuntos de dados extremamente grandes (100.000 ou mais linhas), combine a paginação com a virtualização (react-virtual) para evitar renderizar todas as linhas da página de uma só vez.

Conecte getSortedRowModel ao estado de ordenação, getFilteredRowModel a globalFilter e aos estados dos filtros de coluna, e getPaginationRowModel ao estado de paginação. Cada recurso é opcional e combina perfeitamente com os demais.

Os cabeçalhos das colunas controlam a ordenação por meio de getToggleSortingHandler; os elementos de entrada controlam a filtragem por meio de setFilterValue e onGlobalFilterChange; os botões controlam a paginação por meio de nextPage, previousPage e setPageIndex.

Qual objeto contém o pageIndex e o pageSize atuais no estado de paginação do TanStack Table?

A ordenação exige getSortedRowModel, um estado de ordenação e manipuladores de clique nos cabeçalhos das colunas. A filtragem usa getFilteredRowModel com estados de filtros globais e por coluna. A paginação usa getPaginationRowModel com os estados pageIndex e pageSize.

Os três modelos de linhas são combinados automaticamente: filtrar primeiro, ordenar em segundo lugar e paginar por último.