Data Display
Table
Tabela de dados com ordenação, seleção, filtros e paginação.
Overview
Demonstração real e interativa de Table nas larguras desktop, tablet e mobile.
| Nome | Empresa | Status | Data | Responsável | Ações | ||
|---|---|---|---|---|---|---|---|
| Dispensa 41/26 | Hospital das Clínicas | Cancelado | 02/09/2026 | R$ 18.900,00 | MPMarcos Prado | ||
| Pregão 2026-0119 | UFRGS | Pendente | 11/09/2026 | R$ 76.400,00 | JCJuliana Castro | ||
| Pregão 2026-0142 | Prefeitura de Campinas | Em análise | 24/09/2026 | R$ 248.500,00 | AMAna Moreira | ||
| Pregão 2026-0098 | Secretaria de Educação SP | Homologado | 27/08/2026 | R$ 542.300,00 | LSLívia Santos | ||
| Concorrência 88/26 | Governo do Paraná | Homologado | 18/09/2026 | R$ 1.320.000,00 | RFRafael Fonseca |
5 de 128 registros
Playground
Altere as propriedades e veja o componente atualizar em tempo real.
| Nome | Empresa | Status | Data | Responsável | Ações | ||
|---|---|---|---|---|---|---|---|
| Dispensa 41/26 | Hospital das Clínicas | Cancelado | 02/09/2026 | R$ 18.900,00 | MPMarcos Prado | ||
| Pregão 2026-0119 | UFRGS | Pendente | 11/09/2026 | R$ 76.400,00 | JCJuliana Castro | ||
| Pregão 2026-0142 | Prefeitura de Campinas | Em análise | 24/09/2026 | R$ 248.500,00 | AMAna Moreira | ||
| Pregão 2026-0098 | Secretaria de Educação SP | Homologado | 27/08/2026 | R$ 542.300,00 | LSLívia Santos | ||
| Concorrência 88/26 | Governo do Paraná | Homologado | 18/09/2026 | R$ 1.320.000,00 | RFRafael Fonseca |
5 de 128 registros
Superfície
Densidade
Largura
Ajuste o contexto de renderização para validar o componente em diferentes superfícies e larguras.
States
Todos os estados exibidos simultaneamente para facilitar a comparação.
Default
Hover
Feedback imediato
Focus
Anel de foco visível
Disabled
opacity 60%
Examples
Exemplos realistas de uso em contexto de produto.
Loading state
Skeletons preservam a estrutura da tabela.
| Nome | Empresa | Status | Data | Responsável | Ações | ||
|---|---|---|---|---|---|---|---|
5 de 128 registros
Empty state
Sempre ofereça uma ação de saída.
| Nome | Empresa | Status | Data | Responsável | Ações | ||
|---|---|---|---|---|---|---|---|
Nenhum edital encontrado Crie um novo monitoramento para começar a receber oportunidades. | |||||||
0 de 128 registros
Usage
Critérios de escolha e boas práticas.
When to use
- Comparar muitos registros com múltiplos atributos.
- Listagens que exigem ordenação, seleção em massa e paginação.
When not to use
- Poucos dados por item — prefira Cards.
- Conteúdo majoritariamente visual — prefira Grid de cards.
Alinhe valores monetários à direita e use fonte monoespaçada.
Não use mais de 8 colunas visíveis sem priorização ou scroll horizontal claro.
Accessibility
Requisitos obrigatórios para conformidade WCAG 2.1 AA.
- Use <table>, <thead>, <th scope="col"> e <caption> para estrutura semântica.
- Cada checkbox de linha possui aria-label descrevendo o registro.
- Ordenação anuncia o estado com aria-sort na coluna ativa.
- Scroll horizontal acessível por teclado com foco no container.
Specifications
Valores de referência para implementação, sempre baseados em tokens.
| Propriedade | Valor | Token |
|---|---|---|
| Row height | 48px | |
| Cell padding | 12px 16px | |
| Header background | Surface sunken | |
| Divider | 1px solid | |
| Typography | 13px / 20px | |
| Selected row | Primary subtle |