Componentes/Table

Table

Tabela genérica do Design System TRDR. Header 11px uppercase, cells 13px, hover row, border-bottom subtle. Variantes: bordered (wrapper com borda + radius), compact (padding reduzido), striped (linhas alternadas).

Outros

Figma: —

Preview

Default

Token	CSS Variable	Valor
bg-primary	--bg-primary	#0A0A0A
bg-secondary	--bg-secondary	#0E0E0E
bg-tertiary	--bg-tertiary	#141519

Bordered

Prop	Tipo	Default
variant	enum	neutral
size	enum	default
dot	boolean	false

Compact + Striped

Ativo	Preço	Var%
PETR4	38.42	+1.2%
VALE3	62.18	-0.8%
ITUB4	34.56	+0.3%
BBDC4	14.20	-1.1%

Bordered + Compact + Striped

Ativo	Último	Variação
WINFUT	128.450	+0.85%
DOLFUT	5.632	-0.32%
IBOV	127.890	+1.10%

Código

Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.

<!-- Default -->
<table class="trdr-table">
  <thead>
    <tr>
      <th>Token</th>
      <th>CSS Variable</th>
      <th>Valor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>bg-primary</td>
      <td>--bg-primary</td>
      <td>#0A0A0A</td>
    </tr>
    <tr>
      <td>bg-secondary</td>
      <td>--bg-secondary</td>
      <td>#0E0E0E</td>
    </tr>
  </tbody>
</table>

<!-- Bordered (com wrapper) -->
<div class="trdr-table-wrapper">
  <table class="trdr-table trdr-table-bordered">
    <thead>
      <tr><th>Prop</th><th>Tipo</th><th>Default</th></tr>
    </thead>
    <tbody>
      <tr><td>variant</td><td>enum</td><td>neutral</td></tr>
      <tr><td>size</td><td>enum</td><td>default</td></tr>
    </tbody>
  </table>
</div>

<!-- Compact + Striped -->
<table class="trdr-table trdr-table-compact trdr-table-striped">
  <thead>
    <tr><th>Ativo</th><th>Preço</th><th>Var%</th></tr>
  </thead>
  <tbody>
    <tr><td>PETR4</td><td>38.42</td><td>+1.2%</td></tr>
    <tr><td>VALE3</td><td>62.18</td><td>-0.8%</td></tr>
    <tr><td>ITUB4</td><td>34.56</td><td>+0.3%</td></tr>
    <tr><td>BBDC4</td><td>14.20</td><td>-1.1%</td></tr>
  </tbody>
</table>

Dimensões

Variante	Largura	Altura
Default	`100% (fill)`	`auto`
Header row	`100%`	`auto (~28px)`
Body row	`100%`	`auto (~40px)`

Props / Variantes

Prop	Tipo	Valores
`Bordered`	boolean	`truefalse`
`Compact`	boolean	`truefalse`
`Striped`	boolean	`truefalse`
`Hoverable`	boolean	`truefalse`

Tokens Utilizados

Propriedade	Token	Valor
Header text	`content-tertiary`	`#A4A4A4`
Header border	`border-subtle`	`#222222`
Header padding	`spacing-sm / spacing-lg`	`8px / 16px`
Cell text	`content-secondary`	`#E8E8E8`
Cell border	`border-subtle`	`#222222`
Cell padding	`spacing-md / spacing-lg`	`12px / 16px`
Hover BG	`bg-tertiary`	`#141519`
Striped BG	`bg-secondary`	`#0E0E0E`
Wrapper border	`border-subtle`	`#222222`
Wrapper radius	`radius-md`	`8px`

Anatomia

[div.trdr-table-wrapper?]  ← wrapper opcional (bordered): borda + radius + overflow
  └── [table.trdr-table .trdr-table-compact? .trdr-table-striped? .trdr-table-bordered?]
        ├── thead > tr > th  ← 11px/600/uppercase, letter-spacing 0.08em, tertiary
        └── tbody > tr > td  ← 13px/secondary, hover bg-tertiary

Compact: padding reduzido (xs/md), font 12px
Striped: nth-child(even) bg-secondary
Bordered: wrapper com border 1px subtle, radius-md, overflow hidden