overview
01| nome | função | status |
|---|
| Code | destaque · CTA | stable |
| Dos | fundo escuro | stable |
| Purple | perifa · ia | new |
variantes
02Default
| col 1 | col 2 |
|---|
| linha 1 | valor |
| linha 2 | valor |
Zebra
| col 1 | col 2 |
|---|
| linha 1 | valor |
| linha 2 | valor |
| linha 3 | valor |
tamanhos
03Compact reduz padding pra 8px e usa font-size 14px. Default tem padding 16px e font-size 16px.
modifiers · api
04| prop | tipo | default | descrição |
|---|
| .data-table | class | — | tabela base |
| .data-table--compact | class | — | variante densa |
| .data-table--zebra | class | — | linhas alternadas |
quando usar
05use
- Dados tabulares com colunas relacionadas
- Comparação entre linhas
- Listagens com 5+ campos
não use
- Layout — usa CSS grid/flex
- Listas simples (1-2 colunas) — usa <ul>
- Dashboards com cards — usa tile grid
acessibilidade
06 · wcag aa- <table> semântico, não divs
- <th scope="col"> em headers
- <caption> descrevendo a tabela (visível ou .sr-only)
- Responsivo: scroll horizontal em mobile ou transformação em cards
código
07 · html<table class="data-table">
<caption>tokens de cor</caption>
<thead>
<tr><th scope="col">nome</th><th scope="col">valor</th></tr>
</thead>
<tbody>
<tr><td>Code</td><td>#32FA96</td></tr>
</tbody>
</table>