Table
Resumo
Tabelas são contêineres para exibir informações. Elas permitem que os usuários examinem, classifiquem, comparem e tomem decisões rapidamente com base em grandes quantidades de dados.
É comumente utilizado para apresentar dados que se beneficiam da comparação entre múltiplos atributos.
Os itens de uma tabela em uma linha ou coluna estão relacionados entre si, conforme definido pelo cabeçalho.
Pode incluir funcionalidades como colunas classificáveis, filtros e paginação para ajudar os usuários a navegar por grandes conjuntos de dados.
As tabelas podem ser estáticas ou dinâmicas.
Tabelas estáticas contêm informações fixas que não se alteram.
As tabelas dinâmicas são atualizadas quando há novos dados ou quando contêm campos editáveis pelos usuários.
As tabelas são comumente usadas nos seguintes padrões de projeto:
Recursos e informações
Guias de tamanhos
Estatísticas e resultados.
Anatomia
A anatomia básica de uma tabela é composta por:
Paginação (opcional): Em tabelas com muitos dados, é comum utilizar a paginação para melhorar a performance e não precisar carregar todos os dados de uma vez.
Texto: O conteúdo informativo principal.
Célula, linhas e Colunas: Blocos de construção básicos
Suplementos: Elementos de interação, , como ações dentro das células ou em uma barra superior (topbar).
Alinhamentos
As células devem ser alinhadas de acordo com o tipo dos dados:
Números: Alinhado à direita (normalmente com caracteres tabulares)
Textos, datas, etc: Alinhado à esquerda
Priorizando colunas
Deve-se priorizar a ordenação das colunas da esquerda pra direita, respectivamente, do mais importante ao menos importante
Variações e interações
Cabeçalho Fixo
Fixar o cabeçalho ajuda o usuário a escanear diferentes colunas sem perder o contexto de cada uma.
Rolagem Horizontal
Primeira coluna fixa. Útil para apresentar grandes conjuntos de dados sem perder contexto.
Colunas redimencionáveis
Permite que o usuário consiga ver informações em sua totalidade
Paginação
Dividir longas tabelas em páginas auxilia o usuário a encontrar facilmente dados em uma tabela com muitas linhas
Ações de hover
Exibir ações extras no hover é util para reduzir a quantidade de estímulos visuais na tabela. Contudo, pode dificultar o encontra das funcionalidades
Linha editável
Permite que o usuário edite os valores das células. A tabela automaticamente salva as mudanças assim que o usuário sai da célula sendo editada.
Linhas expansíveis (subníveis)
Esse tipo de interação varia conforme o contexto, mas basicamente ajuda o usuário a ver informações adicionais sem perder o contexto da informação
Visualização rápida
Utilização de um painel para visualizar informações extras, ele pode ser feito de duas formas:
Painel lateral: Forma rápida de visualizar dados extras sem perder informação
Modal: Forma de adicionar mais foco na informação adicional, podendo oferecer ações relacionadas ao que está sendo exibido.
Ordenação de colunas
A ordenação permite organizar colunas alfabeticamente ou numericamente
Filtros básicos
Como o nome sugere, são filtros que ajudam o usuário a manipular dados dentro da tabela.
Filtros de colunas
Também podemos chamar esse modelo de filtros avançados, pois permitem que o usuário crie combinações de filtros que afetam colunas individualmente.
Drag & Drop
Permite que o usuário reorganize a ordem das linhas ou colunas ao arrastar e soltar elementos em uma posição diferente.
Ações em massa
Permite que o usuário performe ações como deleter ou exportar grupos de dados ao mesmo tempo.
Estilos de Linhas
O estilo de linha ajuda o usuário a escanear dados:
Grid: Melhor estilo para tabelas com muitos dados
Linhas: Mais utilizado e facilita a leitura dos dados
Zebra: Serve para guiar o olho na horizontal em tabelas largas.
Sem linhas: Indicado para datasets pequenos
Tamanho das células (densidade)
A relação entre densidade e esforço cognitivo existe. Quanto maior a densidade, menor a altura da linha. Linhas mais finas ajudam o usuário a ver mais dados, mas podem afetar a escaneabilidade.
Tabelas no mobile
Stacked List
“Uma lista empilhada é o melhor padrão de UX para tabelas móveis porque economiza tempo e esforço dos usuários, evitando rolagem excessiva e confusão.”
Progressive Disclosure
Quando sua tabela possui muitas colunas, considere exibir o restante das informações em uma nova página.
Accordion X Progressive Disclosure
Expandir linhas vai aumentar o tamanho da rolagem e dificultará a navegação por tabela, deve-se levar em conta o tamanho da tabela.
Boas práticas
Permitir que os usuários classifiquem as linhas
Permita que os usuários classifiquem as linhas usando as setas (ou seja, os pequenos triângulos) na barra de título.
Corrigir o cabeçalho ao rolar a página
Quando você tem uma tabela com rolagem, é recomendável sempre fixar (ou congelar) o cabeçalho. Isso significa que, à medida que o usuário rola a página para baixo, o cabeçalho permanece no mesmo lugar , facilitando a navegação.
Considere corrigir a coluna da esquerda
Ao lidar com tabelas que possuem muitas linhas, considere fixar ou congelar a coluna mais à esquerda. Isso ajudará os usuários a navegar por grandes quantidades de dados .
Espaçamento das colunas com base no seu conteúdo.
As tabelas devem sempre ter espaçamento proporcional ao conteúdo de cada coluna. Por exemplo, caixas de seleção e números pequenos não precisam de tanto espaço na coluna quanto um nome ou uma profissão.
(Mobile) Leve em consideração o tamanho dos elementos e textos para que qualquer tamanho de dedo seja capaz de interagir com a UI sem erros
(Mobile) Textos com 12 a 14px podem melhorar a legibilidade para dados importantes
Como estruturar tabelas
1. Sistematizar as necessidades
Antes de qualquer wireframe, você deve entrevistar os usuários e mapear suas necessidades reais. O resultado deve ser organizado em uma árvore de funcionalidades, que descreve desde as células individuais até recursos como barra superior, atalhos de teclado e tratamento de erros.
Essa árvore também ajuda a equipe de desenvolvimento a identificar limitações de frameworks antes que impactem o design.
2. Adotar a abordagem atômica
O design começa pelos menores componentes e avança para os maiores:
Átomos: fontes, cores e ícones.
Células: tipos variados (texto, números, dropdowns, datas) com estados normal, foco, ativo, desativado e erro.
Linhas e cabeçalhos: combinação de células editáveis e somente leitura, com comportamentos de cursor distintos, seleção de linhas, ordenação e filtros.
Colunas: colunas fixas, redimensionamento manual e opções de truncamento ou quebra de texto.
Barra superior: título e comandos (ícones e texto), com seus diversos estados.
Por fim, os blocos são montados em três tipos de tabela completa: somente leitura, de busca/filtragem e editável.
3. Definir a interação e o ambiente
Com os componentes prontos, é preciso estabelecer as regras de comportamento:
Dados numéricos: definir precisão decimal, separadores de milhar e a diferença entre o valor exibido (arredondado) e o valor real armazenado.
Validação de entrada: regras para dados válidos/inválidos e mensagens de erro claras.
Comandos: especificar quando cada botão da barra de ferramentas está habilitado ou desabilitado, de acordo com a seleção e contexto.
Container e responsividade: a tabela pode ocupar toda a tela, ser um módulo de dashboard ou estar dentro de um diálogo. Em dispositivos móveis, tabelas grandes perdem eficácia — uma alternativa é convertê-las em listas de cards.
Acessibilidade: título e resumo descritivos, tamanho de fonte mínimo de 16px, contraste de cores 3:1, controles clicáveis com pelo menos 24x24px e uso de tooltips em ícones.
Acessibilidade
A
Se uma célula ou linha comunica significado por cor (status, erro, destaque), a cor não pode ser o único canal (WCAG 1.4.1).
Todo ícone que carrega função ou significado precisa de um nome textual equivalente, não pode ser só o desenho (WCAG 1.1.1).
Nenhuma instrução pode depender só de característica sensorial — posição, cor ou forma (WCAG 1.3.3).
Ações e links repetidos em cada linha precisam ter o propósito compreensível no contexto da linha (WCAG 2.4.4).
AA
O texto das células e dos cabeçalhos precisa de contraste de pelo menos 4.5:1 contra o fundo (WCAG 1.4.3).
As divisórias entre linhas/colunas (quando são o único meio de separar os dados), o indicador de ordenação, o estado de linha selecionada, os checkboxes e os ícones precisam de pelo menos 3:1 contra a cor adjacente (WCAG 1.4.11).
Os alvos interativos por linha precisam de no mínimo 24×24px (WCAG 2.5.8).
O indicador de foco precisa estar visível em cada elemento interativo da tabela (WCAG 2.4.7).
Ao receber foco, o elemento não pode ficar totalmente escondido atrás de outra parte da interface (WCAG 2.4.11).
A tabela precisa apresentar o conteúdo sem perda de informação a uma largura de 320px (WCAG 1.4.10).
Ações que aparecem só no hover precisam ser dispensáveis, permanecer enquanto o cursor está sobre elas, e não sumir sozinhas (WCAG 1.4.13).
AAA
O texto das células e cabeçalhos com contraste de 7:1 (WCAG 1.4.6).
Os alvos interativos por linha com no mínimo 44×44px (WCAG 2.5.5).
O indicador de foco com espessura equivalente a um perímetro de 2px ao redor do elemento e contraste de 3:1 entre focado e não-focado (WCAG 2.4.13).
Referências
https://componentes.design/aulas/tabelas
https://medium.com/design-bridges/complex-tables-356826d11861
https://balsamiq.com/learn/tables-data-grids/