Tabela de dados
Esta é uma tabela de dados criada com componentes da interface do shadcn e tabela de tannstack .
A tabela foi construída seguindo o excelente tutorial e exemplos encontrados na documentação do shadcn e estendidos.
Configuração
O projeto é construído no React-Vite e usa o TypeScript .
- Instale o React Vite e Siga as instruções Crie o projeto:
$ npx shadcn-ui@latest add dropdown-menu
$ npx shadcn-ui@latest add button
Dados
A tabela mostra uma lista fictícia de funcionários.
Os dados são simplesmente dados falsos em uma matriz no próprio projeto, em vez de buscar um banco de dados real.
Características
Estes são os recursos da tabela:
Barra de ferramentas:
- Campo de pesquisa: pesquisa dinâmica por nome.
- Filtros facetados: filtragem por valores da coluna ( localização , status ); Os valores são listados dinamicamente com base nos valores da coluna.
- Filtre tags para mostrar filtros ativos e filtros claros - botão.
- Visibilidade da coluna: um botão para escolher quais colunas são visíveis.
- Redefinir: limpa todos os filtros e seleções.
MESA:
- Classificação: colunas selecionadas podem ser classificadas ascendentes ou descendentes.
- Linha Selecionar: a caixa de seleção da primeira coluna seleciona a linha.
- Ações extras suspenso: cada linha exibe ações extras no final da linha. Somente o primeiro atualmente está funcional e copia o ID do funcionário para a área de transferência e exibe uma mensagem de torrada.
- Reordene a coluna: A última linha apresenta setas que movem as colunas para a direita ou esquerda.
RODAPÉ:
- Informações sobre linhas selecionadas : mostra quantas linhas foram selecionadas.
- Linhas dinâmicas por página do botão : O uso pode aumentar ou diminuir as linhas por página por etapas de 5.
- Botões de paginação : para seguir em frente, para trás, para a última ou a primeira página.
Visibilidade da coluna:
Dropdown de filtro facetado:
Tags de filtro e botão transparente:
Mais ações:
Rodapé:
Estrutura?
A tabela é composta por 3 partes principais:
- Página componente que busca dados e renderiza o componente da tabela.
- Componente da tabela.
- Variável de colunas que contém a estrutura e o estilo do conteúdo individual da coluna.
Componentes reutilizáveis:
- A paginação é seu componente e pode ser reutilizada para outras tabelas.
- Os filtros facetados requerem código longo e são separados em seu próprio componente. Pode ser reutilizado para outras tabelas.
- Little Pop-Up Toast é seu próprio componente reutilizável.
Próximos passos?
➡️ Resumo O componente da tabela em um reutilizável e dividi -lo em componentes menores.
➡️ Introduzir o contexto para evitar a passagem dos dados da tabela como Prop -> mais fácil de lidar com os métodos de manipulação de dados, pois eles podem acontecer em diferentes componentes.
Tecnologia
- React-vite
- Shadcn ui
- TanStack-Table
- Reacto em ícones
- Tailwind
- TypeScript
