bo-grid · Svelte 5 · MIT

Hareketli piyasalar için veri tablosu.

Fiyat ekranları, izleme listeleri, işlem listeleri ve emir defterleri. Saniyede on binlerce tick kare başına tek bir güncellemeye iner ve yalnızca değişen hücreler yeniden çizilir. Gruplama, pivot, ağaç verisi ve Excel’e aktarma aynı ücretsiz pakette gelir.

npm i bo-grid

Canlı demoyu açınKılavuzu okuyunGitHub
Simüle edilmiş fiyatlar. Değişen her hücre yanıp söner; Ctrl/⌘+F bir sembol bulur.
  • 1.000 × 24sembol ve sütun tek bir ekranda
  • 30.000saniyede olay, kare başına tek güncellemede
  • ~45 KBgzip’li çekirdek, çalışma zamanı bağımlılığı yok
  • 8tema hazır ayarı ve kendi token’larınız

Chrome’da bir üretim derlemesi üzerinde ölçüldü: 1.000 sembollü, 24 sütunlu bir ekran, değişen her hücre yanıp sönerken saniyede 10.000 olayda kare başına yaklaşık 9 ms, 30.000’de yaklaşık 12 ms ana iş parçacığı çalışması alır.

Fiyatlar için yapıldı

Bir alım satım ekranının ihtiyaç duyduğu şeyler yerleşiktir, bir hücre çiziciye bırakılmaz.

  • Her tick’te bir yanıp sönmeHücreler değiştikçe yukarı ya da aşağı yönde renklenir ve hareketin büyüklüğünü gösterebilir. Yoğun bir ekranda tutulan yanıp sönmeler her birini ucuz tutar.
  • Fiyat limiti renkleriTavan, taban ve baz fiyatlar borsaların gösterdiği gibi renklendirilir; fiyat adımına duyarlı biçimlendirme ve seans durumuyla.
  • Yalnızca ekrandakiler akarBirleştiren bir tick akışı satırları yerinde günceller ve görünüm alanı abonelikleri yalnızca görünen sembolleri akıtır.
  • Emir defteri ve işlem akışı yardımcılarıEmir defteri, fiyat merdiveni ve zaman ve satışlar için yardımcılar, yaklaşık 1 KB’lık isteğe bağlı bir giriş noktasında.

Bir göz atın

Borsanın kendi renklerinde bir fiyat ekranı; arama çubuğu açık, sabitlenmiş satırlar kaydırmanın üstünde.
Borsanın kendi renklerinde bir fiyat ekranı; arama çubuğu açık, sabitlenmiş satırlar kaydırmanın üstünde.
Kutudan çıktığı gibi zengin hücreler: ısı, sinyaller, alt etiketler ve mum sparkline’ları.
Kutudan çıktığı gibi zengin hücreler: ısı, sinyaller, alt etiketler ve mum sparkline’ları.
Gerektiğinde bir elektronik tablo: satır numaraları, filtre satırı, türe özel düzenleyiciler, doldurma tutamacı ve geri alma, açık temada.
Gerektiğinde bir elektronik tablo: satır numaraları, filtre satırı, türe özel düzenleyiciler, doldurma tutamacı ve geri alma, açık temada.

Her şey tek pakette

Tek kurulum, eklenti yok, lisans anahtarı yok.

Gerçek zaman
Tick yanıp sönmeleri · her hareketin büyüklüğü · yerinde güncellemeler · birleştiren bir tick akışı · yalnızca ekrandaki satırları akıtma · canlı yeniden sıralama
Veri
Tekli ve çoklu sıralama · metin, sayı, tarih ve küme filtreleri · hızlı arama · tabloda bulma · ara toplamlarla gruplama · pivot · ağaç verisi · ana-ayrıntı · sunucu tarafı satırlar
Düzenleme
Satır içi ve türe özel düzenleyiciler · doğrulama · pano · doldurma tutamacı · geri al ve yinele
Düzen
Sabitlenmiş sütunlar ve satırlar · değerler büyüdükçe ölçeklenen ya da genişleyen sütunlar · yeniden boyutlandırma, yeniden sıralama, gizleme · başlık grupları · birleştirilmiş hücreler · sütun sanallaştırma · sayfalama
Görünüm
8 tema hazır ayarı ve kendi token’larınız · veri çubukları, simgeler ve renk ölçekleri · sparkline’lar · yerelleştirme
Platform
Klavye ve ekran okuyucu desteği · SSR ve SvelteKit · düzeni kaydetme ve geri yükleme · CSV ve Excel dışa ve içe aktarma

Bir dakikada başlayın

Svelte 5’te yerel. React, Vue, Angular ya da düz JavaScript <bo-grid> öğesini kullanır ve Svelte kurulumu gerektirmez.

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 />
Herhangi bir 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)),
};

Grafiğin yanında

bo-grid ve TradeCanvas yan yana durmak için yapıldı: satırları bir grafik açan bir ekran, bir emir listesinin yanında bir grafik. Birlikte, alım satım yazılımı için bir araç setinin başlangıcıdırlar: grafikler, emir girişi, fiyat ekranları ve emir akışı.

TradeCanvas grafiğiFiyat ekranı demosunu görün

TradeCanvas ile bir alım satım ekranı mı geliştiriyorsunuz?

Bunu duymak isteriz.

İletişime geçin