bo-grid · Svelte 5 · MIT

Tabel data untuk pasar yang sibuk.

Papan harga, daftar pantauan, blotter, dan buku order. Puluhan ribu tick per detik masuk dalam satu pembaruan per frame, dan hanya sel yang berubah yang digambar ulang. Pengelompokan, pivot, data pohon, dan ekspor ke Excel hadir dalam paket gratis yang sama.

npm i bo-grid

Buka demo langsungBaca panduanGitHub
Kuotasi simulasi. Setiap sel yang berubah berkedip; Ctrl/⌘+F mencari simbol.
  • 1.000 × 24simbol dan kolom dalam satu papan
  • 30.000event per detik, dalam satu pembaruan per frame
  • ~45 KBinti gzip, tanpa dependensi runtime
  • 8preset tema, plus token Anda sendiri

Diukur pada build produksi di Chrome: papan 1.000 simbol dengan 24 kolom memakan sekitar 9 ms kerja main thread per frame pada 10.000 event per detik dan sekitar 12 ms pada 30.000, dengan setiap sel yang berubah berkedip.

Dibuat untuk harga

Yang dibutuhkan layar trading sudah tertanam, tidak diserahkan ke cell renderer.

  • Kedipan di setiap tickSel berubah warna naik atau turun saat berubah dan bisa menunjukkan besar pergerakannya. Di papan yang sibuk, kedipan yang ditahan membuat setiap kedipan tetap ringan.
  • Warna batas hargaHarga batas atas, batas bawah, dan harga acuan diwarnai seperti yang ditampilkan bursa, dengan format yang sadar fraksi harga dan status sesi.
  • Hanya yang tampil di layar yang di-streamAliran tick yang menggabungkan pembaruan menambal baris di tempat, dan langganan viewport hanya mengalirkan simbol yang terlihat.
  • Helper buku order dan tapeHelper untuk buku order, tangga harga, dan time and sales, dalam entri opsional berukuran sekitar 1 KB.

Lihat-lihat

Papan harga dalam warna bursa itu sendiri, dengan bilah pencarian terbuka dan baris yang disematkan di atas area gulir.
Papan harga dalam warna bursa itu sendiri, dengan bilah pencarian terbuka dan baris yang disematkan di atas area gulir.
Sel kaya fitur yang langsung siap pakai: panas, sinyal, sub-label, dan sparkline candlestick.
Sel kaya fitur yang langsung siap pakai: panas, sinyal, sub-label, dan sparkline candlestick.
Spreadsheet saat Anda membutuhkannya: nomor baris, baris filter, editor bertipe, fill handle, dan undo, dalam tema terang.
Spreadsheet saat Anda membutuhkannya: nomor baris, baris filter, editor bertipe, fill handle, dan undo, dalam tema terang.

Semuanya dalam satu paket

Satu instalasi, tanpa add-on, tanpa kunci lisensi.

Realtime
Kedipan tick · besar setiap pergerakan · tambalan di tempat · aliran tick yang menggabungkan pembaruan · hanya mengalirkan baris di layar · pengurutan ulang langsung
Data
Pengurutan tunggal dan ganda · filter teks, angka, tanggal, dan set · pencarian cepat · cari di tabel · pengelompokan dengan subtotal · pivot · data pohon · master-detail · baris sisi server
Pengeditan
Editor inline dan bertipe · validasi · clipboard · fill handle · undo dan redo
Tata letak
Kolom dan baris yang disematkan · kolom yang menyesuaikan atau melebar saat nilai bertambah · ubah ukuran, ubah urutan, sembunyikan · grup header · sel gabungan · virtualisasi kolom · paginasi
Tampilan
8 preset tema dan token Anda sendiri · bar data, ikon, dan skala warna · sparkline · lokalisasi
Platform
Dukungan keyboard dan pembaca layar · SSR dan SvelteKit · simpan dan pulihkan tata letak · ekspor dan impor CSV dan Excel

Mulai dalam semenit

Native di Svelte 5. React, Vue, Angular, atau JavaScript biasa memakai elemen <bo-grid> dan tidak perlu setup 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 />
Framework apa pun
// 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)),
};

Di samping grafik

bo-grid dan TradeCanvas dibuat untuk berdampingan: papan yang barisnya membuka grafik, grafik di samping blotter order. Bersama-sama, keduanya adalah awal dari toolkit untuk perangkat lunak trading: grafik, entri order, papan harga, dan order flow.

Grafik TradeCanvasLihat demo papan harga

Membangun layar trading dengan TradeCanvas?

Kami ingin mendengarnya.

Hubungi kami