Micro-SaaS & MVPs
Claude 3.5 Sonnet
Tabela Administrativa CRUD com Busca, Filtros e Paginação (React + TanStack Table)
Componente de tabela admin reutilizável: busca instantânea, filtros por coluna, ordenação, paginação server-side e ações inline.
0cópias
0joinhas
0favoritos
O prompt
Crie um componente de tabela administrativa reutilizável em React + TypeScript usando TanStack Table v8 para o painel {{nome_painel}}.
Parâmetros:
- Nome do Painel: {{nome_painel}}
- Entidade Exemplo: {{entidade}} (ex.: 'clientes', com campos nome, email, plano, status, criadoEm)
- API de Origem: GET /api/{{entidade}}?search=&status=&plano=&page=&pageSize=&sort=
Requisitos:
1. Componente <DataTable columns data fetcher /> genérico por T (tipado com generics do TanStack Table), consumindo a API {{entidade}} com paginação server-side, ordenação e busca (debounce de 300ms).
2. Filtros por coluna: select para campos enum (status, plano) e texto para os demais; filtros combinam com AND e resetam a página para 1 ao mudar.
3. Colunas configuráveis via prop columns: { id, header, accessor, cell?, filterType? } — células customizadas suportadas (ex.: badge de status colorido, data formatada pt-BR).
4. Ações inline por linha (menu '⋯' com ações passadas como prop onActions) + seleção múltipla com barra de ações em lote (ex.: 'Marcar como inativo').
5. Estados: loading (skeleton nas linhas), vazio ('Nenhum resultado para "X"' com botão limpar filtros), erro (banner com retry) e sucesso silencioso após ação em lote (toast).
6. Responsivo: no mobile, colunas secundárias colapsam em card por linha; paginação compacta ('Página 2 de 15' + anterior/próxima).
Como usar
- Substitua {{nome_painel}} e {{entidade}} (com a lista real de campos).
- Cole no Claude dentro do seu projeto React — o componente genérico + exemplo de uso com a entidade saem juntos.
- Aponte o fetcher para sua API real; os parâmetros search/status/page/sort já seguem o contrato da prop, então basta ajustar os nomes das query strings se forem diferentes.
- Para adicionar uma coluna nova, estenda o array columns — filtros e ordenação funcionam sem tocar no componente.
Exemplo de saída
DataTable.tsx genérico (~280 linhas) + exemplo de uso: TanStack Table v8 com server-side (busca debounce 300ms, sort, paginação), filtros por coluna combinando AND resetando a página, células customizadas (badge de status, data pt-BR), menu de ações inline + seleção múltipla com barra em lote e toast, estados skeleton/vazio/erro-com-retry e colapso em card no mobile.