bo-grid · Svelte 5 · MIT

A grade de dados para mercados agitados.

Painéis de cotações, listas de observação, blotters e livros de ofertas. Dezenas de milhares de ticks por segundo chegam em uma atualização por quadro, e só as células que mudaram são redesenhadas. Agrupamento, pivot, dados em árvore e exportação para Excel vêm no mesmo pacote gratuito.

npm i bo-grid

Abrir a demo ao vivoLer o guiaGitHub
Cotações simuladas. Cada célula alterada pisca; Ctrl/⌘+F encontra um ativo.
  • 1.000 × 24ativos e colunas em um só painel
  • 30.000eventos por segundo, em uma atualização por quadro
  • ~45 KBde núcleo com gzip, sem dependências em runtime
  • 8temas predefinidos, e os seus próprios tokens

Medido em um build de produção no Chrome: um painel de 1.000 ativos e 24 colunas leva cerca de 9 ms de trabalho na thread principal por quadro a 10.000 eventos por segundo e cerca de 12 ms a 30.000, com cada célula alterada piscando.

Feito para preços

O que uma tela de trading precisa vem embutido, não fica a cargo de um renderizador de célula.

  • Um piscar a cada tickAs células se colorem para cima ou para baixo quando mudam e podem mostrar o tamanho do movimento. Num painel agitado, piscadas mantidas deixam cada uma barata.
  • Cores de limite de preçoPreço-teto, preço-piso e preço de referência coloridos como as bolsas mostram, com formatação que respeita a variação mínima e o estado da sessão.
  • Só o que está na tela recebe streamUm stream de ticks agrupados atualiza as linhas no lugar, e as assinaturas por viewport transmitem só os ativos visíveis.
  • Utilitários para livro de ofertas e negóciosUtilitários para livro de ofertas, escada de preços e tempos e negócios, em uma entrada opcional de cerca de 1 KB.

Um passeio

Um painel de cotações nas cores da própria bolsa, com a barra de busca aberta e linhas fixas acima da rolagem.
Um painel de cotações nas cores da própria bolsa, com a barra de busca aberta e linhas fixas acima da rolagem.
Células ricas prontas para usar: calor, sinais, sub-rótulos e sparklines de candles.
Células ricas prontas para usar: calor, sinais, sub-rótulos e sparklines de candles.
Uma planilha quando você precisa: números de linha, uma linha de filtros, editores tipados, alça de preenchimento e desfazer, no tema claro.
Uma planilha quando você precisa: números de linha, uma linha de filtros, editores tipados, alça de preenchimento e desfazer, no tema claro.

Tudo em um só pacote

Uma instalação, sem add-ons, sem chave de licença.

Tempo real
Piscar a cada tick · tamanho de cada movimento · atualizações no lugar · stream de ticks agrupados · stream só das linhas na tela · reordenação ao vivo
Dados
Ordenação simples e múltipla · filtros de texto, número, data e conjunto · busca rápida · localizar na grade · agrupamento com subtotais · pivot · dados em árvore · mestre-detalhe · linhas no servidor
Edição
Editores inline e tipados · validação · área de transferência · alça de preenchimento · desfazer e refazer
Layout
Colunas e linhas fixas · colunas que se ajustam ou alargam conforme os valores crescem · redimensionar, reordenar, ocultar · grupos de cabeçalho · células mescladas · virtualização de colunas · paginação
Aparência
8 temas predefinidos e seus próprios tokens · barras de dados, ícones e escalas de cor · sparklines · localização
Plataforma
Suporte a teclado e leitor de tela · SSR e SvelteKit · salvar e restaurar o layout · exportação e importação de CSV e Excel

Comece em um minuto

Nativo em Svelte 5. React, Vue, Angular ou JavaScript puro usam o elemento <bo-grid> e não precisam de nenhuma configuração de Svelte.

Svelte
<script lang="ts">
  import { Grid, type ColumnDef } from 'bo-grid';

  const columns: ColumnDef[] = [
    { type: 'text',    key: 'symbol', header: 'Symbol' },
    { type: 'price',   key: 'price',  header: 'Price', flash: 'auto', showChange: true },
    { type: 'percent', key: 'change', header: 'Chg %' },
    { type: 'volume',  key: 'volume', header: 'Volume' },
  ];
  let rows = $state.raw(quotes);
</script>

<Grid {rows} {columns} height={480} fitColumns findBar />
Qualquer framework
// React, Vue, Angular or plain JS: no Svelte setup
import 'bo-grid/element';

document.querySelector('bo-grid').config = {
  columns,
  rows,
  height: 480,
  theme: 'dark',
  // Ticks patch rows in place: only changed cells repaint
  onReady: (api) => feed.onTicks((changes) => api.patchRows(changes)),
};

Ao lado do gráfico

O bo-grid e o TradeCanvas foram feitos para ficar lado a lado: um painel cujas linhas abrem um gráfico, um gráfico ao lado de um blotter de ordens. Juntos, são o começo de um kit para software de trading: gráficos, envio de ordens, painéis de cotações e fluxo de ordens.

Gráfico TradeCanvasVer a demo do painel de cotações

Construindo uma tela de trading com o TradeCanvas?

Queremos saber.

Fale conosco