- 1,000 × 24同一個看板上的商品數與欄數
- 30,000每秒事件數，合併為每格畫面一次更新
- ~45 KBgzip 後的核心大小，無執行期相依套件
- 8套佈景主題預設，也可使用你自己的 token
在 Chrome 中以正式版建置量測：一個 1,000 檔商品、24 欄的看板，在每秒 10,000 個事件時每格畫面約佔用 9 ms 主執行緒時間，在每秒 30,000 個事件時約 12 ms，且每個變動的儲存格都會閃爍。
為價格而生
交易畫面需要的功能都已內建，不必交給儲存格渲染器處理。
- 每筆 tick 都閃爍儲存格變動時會以上漲或下跌的顏色著色，還能顯示變動幅度。在繁忙的看板上，閃爍會保持顯示，讓每一次閃爍的成本都很低。
- 漲跌停配色漲停價、跌停價與參考價依交易所的呈現方式著色，並支援依升降單位格式化與交易時段狀態。
- 只串流畫面上的內容合併式 tick 串流原地修補各列，可視區訂閱只串流畫面中的商品。
- 委託簿與成交明細輔助工具用於委託簿、價格階梯與逐筆成交明細的輔助工具，位於一個約 1 KB 的選用進入點中。
四處看看
一個套件，全部包含
安裝一次，沒有附加元件，不需要授權金鑰。
- 即時
- Tick 閃爍 · 每次變動的幅度 · 原地修補 · 合併式 tick 串流 · 只串流畫面上的列 · 即時重新排序
- 資料
- 單欄與多欄排序 · 文字、數字、日期與集合篩選 · 快速搜尋 · 表格內尋找 · 含小計的分組 · 樞紐分析 · 樹狀資料 · 主從明細 · 伺服器端列
- 編輯
- 行內與依型別的編輯器 · 驗證 · 剪貼簿 · 填滿控點 · 復原與重做
- 版面配置
- 固定欄與固定列 · 隨數值變長而縮放或加寬的欄 · 調整大小、重新排序、隱藏 · 標題群組 · 合併儲存格 · 欄虛擬化 · 分頁
- 外觀
- 8 套佈景主題預設與你自己的 token · 資料橫條、圖示與色階 · 迷你走勢圖 · 在地化
- 平台
- 鍵盤與螢幕閱讀器支援 · SSR 與 SvelteKit · 版面儲存與還原 · CSV 與 Excel 匯出與匯入
一分鐘上手
原生支援 Svelte 5。React、Vue、Angular 或純 JavaScript 使用 <bo-grid> 元素，不需任何 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 />任何框架
// 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)),
};在圖表旁邊
bo-grid 與 TradeCanvas 本來就是為並排使用而打造：一個點擊列就能開啟圖表的看板，一張旁邊附委託紀錄的圖表。兩者合在一起，就是交易軟體工具組的起點：圖表、下單、報價看板與訂單流。
正在用 TradeCanvas 打造交易畫面嗎？
我們很樂意聽你分享。