table

Procurando a versão 7 do react-table ? Clique aqui!

Aproveite esta biblioteca?

Experimente outras bibliotecas do TanStack:

• Consulta de Tanstack
• Tabela de Tanstack
• TanStack Router
• Tanstack Virtual
• TanStack Form
• TanStack Ranger

Visite TanStack.com/table para documentos, guias, API e muito mais!

Você também pode conhecer a tabela TanStack por nossos nomes de adaptadores!

• Tabela angular
• Tabela iluminada
• Tabela Qwik
• Tabela de reação
• Tabela sólida
• Tabela esbelta
• Tabela de vue

Resumo

A tabela TanStack é uma biblioteca de tabela sem cabeça , o que significa que não é enviada com componentes, marcação ou estilos. Isso significa que você tem controle total sobre marcação e estilos (CSS, CSS-in-JS, bibliotecas de componentes da interface do usuário etc.) e é também isso que lhe dá sua natureza portátil. Você pode até usá -lo no React Native!

Se você deseja uma tabela leve com controle total sobre marcação e implementação , considere o uso da tabela TanStack, uma biblioteca de tabela sem cabeça .

Se você deseja uma tabela baseada em componente pronta para uso com mais energia, mas mais restrições em torno da marcação/estilos/implementação , considere usar a Grid AG, uma biblioteca de tabela baseada em componentes da nossa grade AG AG.

A tabela TanStack e a grade AG são respeitosamente as melhores bibliotecas de tabela/datagrid do mundo . Em vez de competir, estamos trabalhando juntos para garantir que as opções de tabela/datagrid da mais alta qualidade estejam disponíveis para todo o ecossistema JS/TS e para todas as casas de uso.

Recursos rápidos

• Núcleo agnóstico (JS/TS)
• Classificações de estrutura de 1ª classe para reagir, vue, sólido
• ~ 15kb ou menos (com troca de árvores)
• 100% datilografado (mas não necessário)
• Sem cabeça (100% personalizável, trazer-your-your-ui)
• Automático fora da caixa, estado controlável de opção
• Filtros (coluna e global)
• Classificação (multicoluna, multidirecional)
• Agrupamento e agregação
• Girando (em breve!)
• Seleção de linha
• Expansão de linha
• Visibilidade da coluna/pedidos/pinamento/redimensionamento
• Divisão da mesa
• Animatável
• Virtualizável
• Suporte ao modelo de dados do lado do servidor/externo

Migrando da tabela React V7

Mudanças notáveis

• Reescrita completa ao TypeScript com tipos incluídos no pacote base
• Remoção do sistema de plug -in para favorecer mais inversão de controle
• API muito maior e aprimorada (e novos recursos como fixar)
• Melhor gerenciamento de estado controlado
• Melhor suporte para operações do lado do servidor
• Controle de dados completos (mas opcionais)
• Núcleo agnóstico com adaptadores de estrutura para reação, sólido, esbelto, vue e potencialmente mais no futuro
• Novas ferramentas de desenvolvimento

Migração

Há uma quantidade razoável de mudanças de quebra (valem a pena, confie em nós!):

• Acontece que o TypeScript torna seu código muito melhor/mais seguro, mas também geralmente requer mudanças na arquitetura.
• O sistema de plug -in foi removido para que os plugins sejam reescritos para envolver/compor a nova API funcional. Entre em contato conosco se precisar de ajuda!
• As opções de configuração de coluna mudaram, mas apenas ligeiramente.
• As opções de tabela são as mesmas, com algumas alterações maiores em torno do controle opcional de gerenciamento/controle de dados e controle de dados
• A instância table , embora semelhante em espírito ao V7, foi reconfigurada para ser muito mais rápida.

Instalação

Instale um dos pacotes a seguir com base na sua estrutura de escolha:

 # Npm
npm install @tanstack/angular-table
npm install @tanstack/lit-table
npm install @tanstack/qwik-table
npm install @tanstack/react-table
npm install @tanstack/solid-table
npm install @tanstack/svelte-table
npm install @tanstack/vue-table
npm install @tanstack/table-core # vanilla js that can work with any framework 

Como ajudar?

• Experimente os exemplos já migrados
• Experimente em seus próprios projetos.
• Intrófra os tipos! Mesmo sem os documentos terminados, a biblioteca é enviada com 100% de texto datilografado para ajudá -lo a explorar seus recursos.
• Leia as diretrizes de contribuição
• Escreva alguns documentos! Comece com os documentos da API e tente adicionar algumas informações sobre um ou mais dos recursos. Os tipos fazem um trabalho decente ao mostrar o que é suportado e os recursos da biblioteca.
• Usando um plugin? Tente reescrever o seu plug -in (o V8 não possui mais um sistema de plug -in) como um invólucro funcional que usa a tabela TanStack internamente. A nova API é muito mais poderosa e mais fácil de compor. Se você encontrar algo que não consegue descobrir, informe -nos e o adicionaremos à API.

Torne -se um patrocinador