Order Table

Quando usar

Use a OrderTable para a grade de ordens de um terminal de operacoes: uma ordem por linha, horario, ativo, lado (compra ou venda), preco, quantidade e situacao. E o componente certo para o operador acompanhar o que foi enviado, o que esta executado e o que foi cancelado, tudo numa lista densa.

Quando nao usar

Nao use OrderTable para o book de ofertas de um ativo (isso e mais proximo de QuoteTable) nem para um historico de auditoria com muitos campos livres (uma tabela comum com Table serve melhor quando as colunas nao tem semantica de trading fixa).

Anatomia

OrderTable e um componente fechado, como QuoteTable: recebe rows e desenha a tabela inteira por dentro, compondo Table, TableHeader, TableBody, TableRow, TableHead, TableCell e Badge do proprio TRDR UI.

• Coluna Horario: horario da ordem, em font-mono como qualquer outro numero da tabela.
• Coluna Ativo: codigo do papel.
• Coluna C/V: letra C (compra) ou V (venda), em negrito e colorida com context-trading-long-text/context-trading-short-text. A cor e reforco: a propria letra ja diz o lado.
• Coluna Preco e Medio: preco da ordem e preco medio de execucao.
• Coluna Qtde, Disp, Aberta, Exec: quantidades da ordem em cada estagio.
• Coluna Status: Badge com uma variante por situacao (veja abaixo).
• Coluna Validade e Origem: metadado da ordem.

Todas as colunas numericas (incluindo horario) usam a variante numeric de TableCell (font-mono, alinhado a direita).

Status e variante do Badge

| status (OrderStatus) | rotulo | variante do Badge | |---|---|---| | open | Aberta | brand | | partial | Parcial | neutral | | filled | Executada | success | | canceled | Cancelada | archived |

canceled usa archived (nao warning, como no legado): uma ordem cancelada e um estado final e inerte, nao algo que pede atencao do operador agora.

Linha cancelada

A linha inteira de uma ordem cancelada fica esmaecida (opacidade reduzida, o mesmo recurso que o Button usa em disabled:opacity-50) e ganha uma faixa de acento a esquerda na cor context-trading-short-default. Nao existe uma variante alpha do token de short no @trdr/tokens (so up/down/stop tem), entao o esmaecimento vem de opacidade, nao de um fundo tingido novo.

API

type OrderSide = "buy" | "sell"
type OrderStatus = "open" | "filled" | "canceled" | "partial"

interface OrderRow {
  id: string
  time: string
  symbol: string
  side: OrderSide
  price: number
  averagePrice?: number
  quantity: number
  availableQuantity?: number
  openQuantity?: number
  filledQuantity?: number
  status: OrderStatus
  validity?: string
  origin?: string
}

interface OrderTableProps {
  rows: OrderRow[]
  columns?: OrderTableColumnKey[] // quais colunas aparecem, em que ordem. Padrao: todas.
  selectedId?: string | null // selecao controlada
  onRowSelect?: (row: OrderRow) => void
  caption: string // nome acessivel da tabela, obrigatorio
  emptyMessage?: React.ReactNode
  formatPrice?: (value: number) => string
  formatQuantity?: (value: number) => string
}

• Colunas configuraveis: columns e um array de chaves (OrderTableColumnKey) na ordem desejada.
• Dado tipado, sem exemplo embutido: rows e OrderRow[], sempre trazido por quem chama.
• Selecao controlada: mesmo padrao da QuoteTable, selectedId + onRowSelect. A linha selecionada usa data-state="selected", que a Table ja estiliza.
• Formatadores substituiveis: formatPrice/formatQuantity tem padrao em pt-BR e podem ser trocados por instrumento.

Migracao do componente legado

O TabelaOrdens do Hub antigo (src/components/ui/TabelaOrdens.tsx) recebia um array rows com nomes de campo em portugues (ativo, tipo, preco, qtde, disp, exec...), tipo 'C' | 'V' literal para o lado, e vinha com dez linhas de exemplo embutidas como valor padrao da prop. O OrderTable do TRDR UI:

• Usa nomes de campo em ingles (symbol, side, quantity, availableQuantity, filledQuantity...), com side: "buy" | "sell" em vez do literal 'C' | 'V': o rotulo visivel (C/V) continua identico, mas o dado que trafega pela API nao fica preso a uma letra de exibicao.
• Nao tem dado de exemplo embutido: rows e obrigatorio.
• Ganha columns para escolher e ordenar colunas, algo que o legado nao tinha.
• Troca a variante warning do Badge de status cancelada (legado) por archived, e troca o fundo solido context-trading-short-default da linha cancelada inteira (legado, uma cor de preco usada em bloco como se fosse estado de erro) por opacidade reduzida mais uma faixa de acento fina na mesma cor, mais proximo de "esmaecido" do que de um alerta.
• Formaliza a selecao de linha: selectedId (controlado) mais onRowSelect, em vez de uma prop solta por linha.

Acessibilidade

• caption e obrigatorio e vira um <caption> visualmente oculto (sr-only).
• Todo <th> usa scope="col".
• O lado da ordem nunca depende so da cor: a letra C/V ja informa o lado, a cor e reforco.
• A situacao da ordem sempre tem um rotulo textual dentro do Badge (Aberta, Executada...), nunca so a cor da variante.
• Quando onRowSelect esta presente, a linha vira alvo de teclado (tabIndex=0) e responde a Enter e Espaco, alem do clique.