Intro
O componente Table é utilizado para exibir dados estruturados em formato tabular, permitindo leitura comparativa, ações por linha, ordenação e controle de grandes volumes de informação.
É classificado como:
- Componente de Estrutura de Dados
- Elemento administrativo
- Interface de gestão
A Table deve priorizar:
- Legibilidade
- Escaneabilidade
- Controle de interação
- Performance
Anatomia Visual
Baseado no padrão apresentado:
Estrutura Principal
- Header (Cabeçalho da Tabela)
- Linha de Dados (Row)
- Células (Cells)
- Coluna de Seleção
- Coluna de Status
- Coluna de Ações
- Paginação
- Controle de Exportação
Header (Cabeçalho)
- Define colunas
- Pode conter:
- Título da coluna
- Ícone de ordenação
- Checkbox de seleção geral
Exemplo de colunas:
- Pessoa
- Status
- Ações
Linha (Row)
Representa um registro individual.
Pode conter:
- Avatar ou iniciais
- Nome (linkável)
- Badge de status
- Ações contextuais
Estados possíveis:
- Default
- Hover
- Selected
- Focus
Célula (Cell)
Unidade mínima da tabela.
Pode conter:
- Texto
- Ícone
- Badge
- Avatar
- Link
- Botão de ação
- Checkbox
Coluna de Seleção
- Checkbox por linha
- Checkbox global no header
- Permite ações em lote
Coluna de Status
- Uso de badge
- Indicação visual clara
- Ativo (verde)
- Inativo (neutro ou cinza)
- Pode ser filtro posterior
Coluna de Ações
Ações por linha:
- Visualizar
- Editar
- Excluir
Recomendado:
- Ícones claros
- Tooltip explicativo
- Cor diferenciada para ação destrutiva
Paginação
- Controle de página atual
- Navegação para:
- Primeira
- Anterior
- Próxima
- Última
- Indicação de quantidade de itens
Exportação
- Botão de exportar
- Pode incluir dropdown de formatos:
- CSV
- XLS
Variações da Table
Table Simples
- Sem seleção
- Sem ações
- Uso informativo
Table com Seleção
- Checkbox por linha
- Ação em lote
- Uso administrativo
Table com Ações
- Coluna específica de ações
- Ícones ou menu contextual
Table com Status
- Badge ou indicador
- Pode incluir filtros
Table com Paginação
- Para grandes volumes
- Exibição de:
- “10 de 108 itens”
Table com Ordenação
- Ícone de ordenação no header
- Estados:
- Ascendente
- Descendente
Table com Avatar
- Exibição de imagem ou iniciais
- Uso comum em:
- Gestão de usuários
- Equipes
- Contatos
Comportamento
Seleção
- Checkbox do header seleciona todos
- Deve refletir estado parcial (indeterminado)
Ordenação
- Clique alterna entre:
- Asc
- Desc
- Padrão
Ações
- Devem ser rápidas
- Não exigir múltiplos cliques desnecessários
- Ação destrutiva deve ter confirmação
Hover
- Linha inteira pode destacar
- Facilita leitura horizontal
Responsividade
Desktop
- Layout completo
- Todas as colunas visíveis
Tablet
- Possível redução de colunas secundárias
- Scroll horizontal
Mobile
Recomendado:
- Converter para lista empilhada
ou - Exibir cards estruturados
ou - Scroll horizontal com indicação clara
Evitar:
- Tabelas densas não adaptadas
Boas Práticas
✅ Faça
- Use alinhamento consistente
- Evite texto excessivo
- Use truncamento com tooltip
- Agrupe ações
- Destaque estados selecionados
- Use paginação para grandes volumes
❌ Não Faça
- Não use cores sem significado
- Não sobrecarregue com muitas colunas
- Não esconda ações críticas
- Não misture tipos de alinhamento sem padrão
- Não deixe ações destrutivas sem confirmação
Padrões Recomendados
- Máximo recomendado: 6–8 colunas
- Ações sempre na última coluna
- Status antes da coluna de ações
- Seleção na primeira coluna
- Paginação abaixo da tabela
Erros Comuns
- Usar Table para layout
- Colocar formulário complexo dentro da tabela
- Falta de ordenação em dados grandes
- Não tratar estado vazio
- Não tratar loading
Estados Especiais
- Loading (skeleton)
- Empty state (sem registros)
- Error state
- Seleção múltipla ativa
Resumo
O componente Table é fundamental para:
- Gestão administrativa
- Visualização estruturada
- Controle de grandes volumes
- Execução de ações por registro
Ele deve priorizar:
- Clareza
- Consistência
- Performance
- Acessibilidade
- Organização
Quando bem implementado, melhora significativamente eficiência operacional e experiência do usuário.