Componentes — 09

Table

Tabela de dados com primitivos composáveis (Table, Thead, Tbody, Tr, Th, Td) e o atalho DataTable para casos simples. Hover por linha, listrado opcional.

09.1

DataTable — atalho para dados simples

Passe columns e data. O componente cuida do markup, listrado e hover.

Calendário de concursos

Força	Cargo / Concurso	Vagas	Inscrições	Prova	Status
Exército Brasileiro	Sargento — Músico	40	Mar–Abr 2025	Jun 2025	Previsto
Marinha do Brasil	Marinheiro-Aprendiz	900	Aberto	Mai 2025	Aberto
Força Aérea	Estágio de Adaptação	250	Encerrado	Abr 2025	Encerrado
Polícia Militar SP	Soldado PM	2700	Aberto	Jun 2025	Aberto
Corpo de Bombeiros	Soldado CBM	80	Jul–Ago 2025	Set 2025	Previsto

<DataTable
  columns={columns}
  data={concursos}
  striped
/>

09.2

Primitivos composáveis

Use Table + Thead + Tbody + Tr + Th + Td para controle total sobre estrutura e conteúdo.

Matriz de matérias por força

Matéria	EX	MB	FAB	PM
Língua Portuguesa	✓	✓	✓	✓
Matemática	✓	✓	✓	✓
Inglês	—	✓	✓	—
Física	—	✓	✓	—
Informática	✓	—	✓	—
Conhecimentos Gerais	✓	✓	✓	✓
Redação	✓	—	—	✓

09.3

Sem listrado — hoverable

striped={false} com hover destacado. Bom para tabelas de configuração ou comparação de planos.

Comparação de planos

Recurso	Gratuito	Mensal	Anual
Acesso às trilhas	2 forças	Todas	Todas
Banco de questões	200 itens	Ilimitado	Ilimitado
Simulados cronometrados	—	Semanais	Semanais
Correção de redação por IA	—	2/mês	Ilimitado
Suporte por e-mail	—	48h	24h
Certificado de conclusão	—	✓	✓

09.4

Tokens Usados

container border--border-strong2px solid #433c34

header bg--paper-deep#e3d8bd

header border--border-strong2px solid (bottom)

header font--font-mono11px 700 uppercase

row bg (par)--surface-raised#ffffff

row bg (ímpar)--paper#ede4cf

row separator--border-default1px solid #c8bda5

hover bg--highlightrgba(255,220,80,0.42)

cell color--ink#1a1612

cell color (muted)--pencil#7d7164