Componentes/Tabela de Cotações

Tabela de Cotações

Tabela de cotações em tempo real. Exibe ativo, último preço, variação % com código de cor (verde/vermelho), tendência (seta), quantidade e dados de oferta/demanda.

Trading

Figma: 77:3681

Preview

Painel de Cotações

Ativo	Último	Q Últ	Var %	Tend	Dif	Stat...	QOfc	Ofc	Ofv	QOfv	Teórico
ITUB4	50.47	100	-0.72%	arrow_drop_down	0.36	.	1.000	50.47	50.49	1.300	.
IBOV	84.204,78	.	+1.10%	arrow_drop_up	987.55	.	.	.	.	.	.
GGBR4	16,10	100	-1.83%	arrow_drop_down	0.29	.	4.400	16,10	16,11	3.800	.
PETR3	31,75	150	-0.95%	arrow_drop_down	0.30	.	3.200	31,75	31,80	2.500	.
VALE3	92,00	200	+1.20%	arrow_drop_up	0.50	.	2.700	92,00	92,10	4.000	.
ABEV3	15,25	120	-0.80%	arrow_drop_down	0.25	.	5.000	15,25	15,30	1.800	.
USIM5	8,90	90	-1.00%	arrow_drop_down	0.18	.	2.500	8,90	8,95	2.100	.

Código

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

<!-- Tabela de Cotações TRDR (Figma: 77:3681) -->
<div style="width:100%;overflow-x:auto;background:var(--bg-primary)">
  <table class="trdr-tabela-cotacoes">
    <colgroup>
      <col style="width:65px"> <col style="width:80px"> <col style="width:65px">
      <col style="width:65px"> <col style="width:65px"> <col style="width:65px">
      <col style="width:65px"> <col style="width:65px"> <col style="width:65px">
      <col style="width:65px"> <col style="width:65px"> <col style="width:65px">
    </colgroup>
    <thead>
      <tr>
        <th>Ativo</th><th>Último</th><th>Q Últ</th><th>Var %</th>
        <th>Tend</th><th>Dif</th><th>Stat...</th><th>QOfc</th>
        <th>Ofc</th><th>Ofv</th><th>QOfv</th><th>Teórico</th>
      </tr>
    </thead>
    <tbody>
      <tr class="trdr-tabela-cotacoes-row-selected">
        <td>ITUB4</td>
        <td class="col-ultimo">50.47</td>
        <td>100</td>
        <td class="col-var-down">-0.72%</td>
        <td><span class="col-tend-icon col-tend-down">arrow_drop_down</span></td>
        <td>0.36</td><td>.</td><td>1.000</td>
        <td>50.47</td><td>50.49</td><td>1.300</td><td>.</td>
      </tr>
      <tr>
        <td>VALE3</td>
        <td class="col-ultimo">92,00</td>
        <td>200</td>
        <td class="col-var-up">+1.20%</td>
        <td><span class="col-tend-icon col-tend-up">arrow_drop_up</span></td>
        <td>0.50</td><td>.</td><td>2.700</td>
        <td>92,00</td><td>92,10</td><td>4.000</td><td>.</td>
      </tr>
    </tbody>
  </table>
</div>

Dimensões

Variante	Largura	Altura
Largura total	`800px`	`—`
Altura do header	`—`	`32px`
Altura da linha	`—`	`32px`
Célula Último	`80px`	`32px`

Props / Variantes

Prop	Tipo	Valores
`rows`	CotacaoRow[]	`array de dados de cotação`

Tokens Utilizados

Propriedade	Token	Valor
Var% positivo	`context.trading.up`	`#4FE290`
Var% negativo	`context.trading.down`	`#F34F45`
Cell Último bg	`surface.primary`	`#4A4A4A`
Row alternada	`—`	`rgba(255,255,255,0.08)`
Row hover	`surface.secondary`	`#222222`
Header border	`border.default`	`#4A4A4A`
Header text	`content.tertiary`	`#A4A4A4`
Cell text	`content.primary`	`#FFFFFF`

Anatomia

Tabela (table-layout: fixed, border-collapse: collapse):
  [thead > tr (32px, border-bottom 1px --border-default)]
    [th: 14px/400 --content-tertiary | padding: 4px 8px]
    Colunas: Ativo(65) Último(80) Q Últ(65) Var%(65) Tend(65) Dif(65) Stat(65) QOfc(65) Ofc(65) Ofv(65) QOfv(65) Teórico(65)
  [tbody > tr (32px, cursor pointer)]
    [tr:nth-child(even): bg rgba(255,255,255,0.08)]
    [tr:hover: bg --surface-secondary]
    [tr.selected: bg --bg-secondary]
    [td: 14px/400 --content-primary | padding: 4px 8px]
    [td.col-ultimo: bg --surface-primary #4A4A4A]
    [td.col-var-up: color --context-trading-up #4FE290]
    [td.col-var-down: color --context-trading-down #F34F45]
    [td.col-tend: ícone Material Symbols arrow_drop_up/down]