Components
Table Compact
Variante densa para telas com muita informação: linhas de 8px, tipografia de 13px, filtros multi-seleção, ações em lote e um rodapé que consolida valores e variação.
Densidade e totalizador
Mesma anatomia da Table padrão em altura reduzida. O rodapé soma os valores em R$, consolida a variação em text-success e mantém a paginação à direita. Selecione linhas para trocar os filtros pela barra de ações em lote.
| Projeto | Squad | Valor | Variação | Status | Entrega | Ações | |
|---|---|---|---|---|---|---|---|
| Beanie | Engenharia | R$ 82.400,00 | +5,2% | Em produção | 12/03/2026 | ||
| PlantLab | Design | R$ 46.900,00 | +1,8% | Em desenvolvimento | 28/03/2026 | ||
| Axon | Engenharia | R$ 118.700,00 | -2,1% | Em revisão | 05/04/2026 | ||
| Nimbus | QA | R$ 24.300,00 | 0,0% | Pausado | — | ||
| Vórtice | Growth | R$ 33.500,00 | +8,4% | Em produção | 18/02/2026 | ||
| Cardume | Design | R$ 51.200,00 | +3,1% | Em desenvolvimento | 10/04/2026 | ||
| Foglio | Engenharia | R$ 77.900,00 | -1,4% | Em revisão | 22/04/2026 | ||
| Radar | Growth | R$ 51.300,00 | +6,7% | Em produção | 02/03/2026 | ||
| 8 registros | R$ 486.200,00 | +3,4% | |||||
Exibindo 8 de 8 · Página 1 de 1
Quando usar
Reserve a densidade para painéis operacionais: carteira de projetos, faturamento por squad, backlog financeiro. Em telas de leitura ou marketing, prefira a Table padrão com respiro maior.
| Aspecto | Table padrão | Table Compact |
|---|---|---|
| Altura da célula | py-3 (12px) | py-2 (8px) |
| Tipografia | 14px | 13px |
| Cabeçalho | h-11 · 10px | h-9 · 10px |
| Uso ideal | Listas de leitura | Painéis com muitos registros |
Referência
| Componente | Props principais | Import |
|---|---|---|
| TableCell / TableHead | className (py-2, text-[13px], h-9) | @/components/ui/table |
| TableFooter | linha de total, soma e variação | @/components/ui/table |
| Select | value, onValueChange (filtros multi) | @/components/ui/select |
| Checkbox | checked, indeterminate, onCheckedChange | @/components/ui/checkbox |
| DropdownMenu | ações por linha, destructive | @/components/ui/dropdown-menu |