Pular para o conteúdo
Faculdade PhorteDesign System

Tabela

Em andamento

Dado em linhas e colunas: a grade de um curso, a carga horária por módulo, a lista de inscritos de uma turma. A legenda é obrigatória e dá nome à tabela; o cabeçalho que ordena é um botão; a tabela larga rola dentro da própria caixa.

Função
Conteúdo
Também chamado de
table, tabela de dados, grade, data table, lista de inscritos
Mora em
app/components/molecules/Tabela.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Ordenada
  3. Compacta
  4. Com estado
  5. Vazia
  6. Larga

Quando usar

Quando a pessoa compara valores entre linhas pela mesma coluna: carga horária, datas, situação de inscrição, notas.

Faça

  • Escreva uma legenda que diga de quê é a tabela ("Grade do MBA em Fisiologia do Exercício"); com o título da seção dizendo o mesmo, legendaOculta.
  • Marque o cabecalhoDaLinha: a coluna que nomeia a linha (o módulo, a pessoa) vira <th scope="row">, e o leitor diz o nome junto de cada valor.
  • Número, preço e carga horária com alinhamento: "fim": alinhados à direita, com algarismos de mesma largura.
  • Célula com Badge ou link e coluna ordenável: passe valorParaOrdenar, para comparar o valor e não o desenho.
  • Numa página de servidor (Server Component), não passe função (chaveDaLinha, valorParaOrdenar): a Tabela é de cliente, e o Next não serializa função. Sem elas, a tabela funciona; com elas, monte-a num componente de cliente (achado da E120).

Evite

  • Tabela para o que tem uma coluna só: é uma lista.
  • Ordenar tudo: só a coluna em que a ordem ajuda a decidir.
  • Estado só por cor na célula: use o Badge, que tem texto.

Quando não usar. Para comparar planos lado a lado, com preço e chamada: os cartões do PricingCards. Para uma lista de itens com ação em cada um (cursos, eventos): cartões. Para diagramar a página: nunca — tabela é dado, não grade de layout.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Legenda — O `<caption>`: nome da tabela e da região que rola. Visível por padrão, em negrito.
  2. Cabeçalho — Rótulos em 12px, caixa alta, `--muted-foreground`; o ordenável é um botão com o ícone da ordem.
  3. Linhas — Separadas por `--border`; listradas em `--muted` por padrão. A primeira coluna pode ser o cabeçalho da linha, em semibold.
  4. Caixa — Borda e raio da superfície; rola na horizontal quando a tabela não cabe.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Sem ordemO ordenável mostra as duas setas pequenas.
OrdenadaA coluna mostra a seta da direção, o rótulo em --ink e aria-sort no cabeçalho.
VaziaUma linha com a mensagemVazia, centralizada, ocupando todas as colunas.
RolávelA caixa entra no Tab e mostra o anel de foco; sem transbordar, não entra.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Clique ou Enter num cabeçalho ordenávelOrdena crescente; de novo, decrescente. A troca é anunciada ("Ordenado por Carga horária, crescente") — testado na ficha.
Ordenação controladaCom ordenacao, a tabela mostra a ordem que recebe e só avisa por onOrdenar: quem ordena é quem chama (no servidor, por exemplo).
Tabela mais larga que a caixaRola dentro dela; a caixa vira parada de Tab e rola pelas setas — testado na ficha.

Relacionados