Tanstack Table skill

O Claude monta a tabela do seu sistema com filtro, ordenação, paginação e seleção de linhas, sem engessar o visual que você já tem.

por tanstack-skills

instalações: 5.400
estrelas no GitHub: 36
No skills.sh desde: fevereiro de 2026
Licença: MIT

Atualizada no GitHub em 31 de janeiro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

tanstack-skills
tanstack-table
O Claude monta a tabela do seu sistema com filtro, ordenação, paginação e seleção de linhas, sem engessar o visual que você já tem.Auditada5.400 instalações, grátis

O que ela faz

Ensina o Claude a usar o TanStack Table v8, uma biblioteca que cuida da lógica de tabelas e grades de dados sem impor HTML nem estilo. O guia é em React, com o pacote @tanstack/react-table: colunas definidas com createColumnHelper, a instância da tabela e a renderização com flexRender.

Cobre ordenação, filtro por coluna, busca geral e aproximada, paginação, seleção com caixinha, mostrar, esconder, fixar e redimensionar colunas, agrupar com soma e média, expandir linha com detalhe e virtualização pra listas enormes. Também mostra como ordenar, filtrar e paginar no servidor.

Aponta os erros que mais travam: dados e colunas sem useMemo, que fazem a tela renderizar sem parar, esquecer o getCoreRowModel, faltar id em coluna com função e misturar paginação manual com a do navegador.

Nas palavras de quem fez

Headless UI for building powerful tables & datagrids for TS/JS, React, Vue, Solid, Svelte, Qwik, Angular, and Lit.

tanstack-skills, no SKILL.md

Quando usar

Montar a lista de clientes ou pedidos de um painel administrativo
Pôr filtro, busca e paginação numa tabela que já existe
Mostrar milhares de linhas sem a página travar
Fazer tabela com caixinha pra selecionar e apagar vários itens
Deixar a tabela paginar e filtrar direto na API

Depois de instalar, é só pedir assim

Faz a tabela de pedidos com ordenação por data, filtro por status e 20 por página
Adiciona uma coluna de seleção com caixinha e um botão pra apagar os marcados
A tabela fica renderizando sem parar, descobre o motivo e corrige

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Tanstack Table no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Tanstack Table, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que precisa pra funcionar?

Um projeto em React com o pacote @tanstack/react-table instalado pelo npm. Pra busca aproximada entra o @tanstack/match-sorter-utils, e pra listas enormes, o @tanstack/react-virtual. Não pede chave nem serviço pago.

Roda no Codex e no Antigravity?

Sim. É um guia com código, sem ferramenta exclusiva de nenhum agente.

Serve pra Vue, Svelte ou Angular?

A biblioteca existe pra vários frameworks, mas os exemplos da skill são todos em React. Em outro framework os conceitos valem, mas o código precisa ser adaptado.

Levar essa skill

1x tanstack-tableR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/tanstack-skills/tanstack-skills

Aprenda a usar

Criar site com IA: o passo a passo no Claude Code
Como eu crio site com IA pros clientes sem saber programar: no Claude Code, no Codex ou de graça no Antigravity. O passo a passo, sem cara de template.