Tabela de Ordens
Tabela de histórico de ordens. Exibe horário, ativo, tipo C/V (colorido), preço, quantidade, status (Aberta/Executada/Cancelada) e origem. Linhas canceladas recebem fundo vermelho translúcido.
Preview
Tabela de Ordens
| Horário | Ativo | C/V | Preço | Médio | Qtde | Disp | Aberta | Exec | Status | Validade | Origem |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 11:32:56 | WDOK18 | C | 3.425.600 | 3.425.600 | 20 | . | . | 20 | Aberta | . | Loss |
| 11:35:24 | WDOK18 | V | 3.425.600 | 3.425.600 | 19 | . | . | 19 | Aberta | . | Criptor |
| 11:36:03 | WDOK18 | C | 3.425.600 | 3.425.600 | 16 | . | . | 16 | Cancelada | . | Criptor |
| 11:40:12 | WDOK19 | C | 3.425.600 | 3.425.600 | 22 | . | . | 22 | Executada | . | Loss |
| 11:41:45 | WDOK19 | V | 3.425.600 | 3.425.600 | 21 | . | . | 21 | Executada | . | Criptor |
| 11:42:30 | WDOK19 | C | 3.425.600 | 3.425.600 | 18 | . | . | 18 | Executada | . | Criptor |
| 11:45:12 | WDOK20 | C | 3.425.600 | 3.425.600 | 25 | . | . | 25 | Executada | . | Loss |
| 11:46:57 | WDOK20 | V | 3.425.600 | 3.425.600 | 24 | . | . | 24 | Executada | . | Criptor |
| 11:32:56 | WDOK18 | C | 3.425.600 | 3.425.600 | 20 | . | . | 20 | Executada | . | Loss |
| 11:35:24 | WDOK18 | V | 3.425.600 | 3.425.600 | 19 | . | . | 19 | Executada | . | Criptor |
Código
Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.
<!-- Tabela de Ordens TRDR (Figma: 336:3114) -->
<div style="width:100%;overflow-x:auto;background:var(--bg-primary)">
<table class="trdr-tabela-ordens">
<colgroup>
<col style="width:81px"> <col style="width:80px"> <col style="width:65px">
<col style="width:104px"><col style="width:79px"> <col style="width:65px">
<col style="width:65px"> <col style="width:65px"> <col style="width:65px">
<col style="width:86px"> <col style="width:79px"> <col style="width:65px">
</colgroup>
<thead>
<tr>
<th>Horário</th><th>Ativo</th><th>C/V</th><th>Preço</th>
<th>Médio</th><th>Qtde</th><th>Disp</th><th>Aberta</th>
<th>Exec</th><th>Status</th><th>Validade</th><th>Origem</th>
</tr>
</thead>
<tbody>
<tr>
<td>11:32:56</td><td>WDOK18</td>
<td class="col-cv-c">C</td>
<td>3.425.600</td><td>3.425.600</td>
<td>20</td><td>.</td><td>.</td><td>20</td>
<td>Aberta</td><td>.</td><td>Loss</td>
</tr>
<tr>
<td>11:35:24</td><td>WDOK18</td>
<td class="col-cv-v">V</td>
<td>3.425.600</td><td>3.425.600</td>
<td>19</td><td>.</td><td>.</td><td>19</td>
<td>Aberta</td><td>.</td><td>Criptor</td>
</tr>
<tr class="trdr-tabela-ordens-row-cancelada">
<td>11:36:03</td><td>WDOK18</td>
<td class="col-cv-c">C</td>
<td>3.425.600</td><td>3.425.600</td>
<td>16</td><td>.</td><td>.</td><td>16</td>
<td>Cancelada</td><td>.</td><td>Criptor</td>
</tr>
</tbody>
</table>
</div>Dimensões
| Variante | Largura | Altura |
|---|---|---|
| Largura total | 896px | — |
| Altura do header | — | 32px |
| Altura da linha | — | 32px |
Props / Variantes
| Prop | Tipo | Valores |
|---|---|---|
rows | OrdemRow[] | array de dados de ordens |
Tokens Utilizados
| Propriedade | Token | Valor | |
|---|---|---|---|
| C (Compra) text | context.trading.long.text | #6DE7A2 | |
| V (Venda) text | context.trading.short.text | #F56D64 | |
| Row cancelada bg | context.trading.short.default | rgba(241,49,38,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: Horário(81) Ativo(80) C/V(65) Preço(104) Médio(79)
Qtde(65) Disp(65) Aberta(65) Exec(65) Status(86) Validade(79) Origem(65)
[tbody > tr (32px, cursor pointer)]
[tr:nth-child(even): bg rgba(255,255,255,0.05)]
[tr:hover: bg --surface-secondary]
[tr.cancelada: bg --context-trading-short-default]
[td: 14px/400 --content-primary | padding: 4px 8px | text-overflow: ellipsis]
[td.col-cv-c: color --context-trading-long-text #6DE7A2, font-weight 600]
[td.col-cv-v: color --context-trading-short-text #F56D64, font-weight 600]