- 1,000 × 24同一张报价板上的品种数 × 列数
- 30,000每秒事件数，合并为每帧一次更新
- ~45 KBgzip 后的核心体积，零运行时依赖
- 8主题预设，也可使用你自己的 token
在 Chrome 中对生产构建测得：一张 1,000 个品种、24 列的报价板，在每秒 10,000 个事件时每帧约占用 9 ms 主线程时间，在每秒 30,000 个事件时约 12 ms，且每个变化的单元格都会闪烁。
为价格而生
交易界面所需的功能都已内置，而不是留给单元格渲染器去实现。
- 每笔行情都闪烁单元格在变化时会以上涨或下跌的颜色着色，还能显示变动幅度。在繁忙的报价板上，闪烁会保持显示而不是反复重启，因此每次闪烁的开销都很低。
- 涨跌停配色涨停价、跌停价和参考价按交易所的方式着色，并支持按最小价位格式化和交易时段状态。
- 只推送屏幕上的内容合并式行情流原地更新各行，视口订阅只推送视图中的品种。
- 订单簿与逐笔成交辅助工具用于订单簿、价格阶梯和逐笔成交的辅助工具，位于一个约 1 KB 的可选入口中。
四处看看
一个包，应有尽有
一次安装，无需插件，无需许可证密钥。
- 实时
- 行情闪烁 · 每次变动的幅度 · 原地更新 · 合并式行情流 · 只推送屏幕上的行 · 实时重新排序
- 数据
- 单列和多列排序 · 文本、数字、日期和集合筛选 · 快速搜索 · 表格内查找 · 带小计的分组 · 透视 · 树形数据 · 主从视图 · 服务端行
- 编辑
- 行内编辑器和类型化编辑器 · 校验 · 剪贴板 · 填充柄 · 撤销和重做
- 布局
- 固定列和固定行 · 随数值增长而缩放或加宽的列 · 调整宽度、重新排序、隐藏 · 表头分组 · 合并单元格 · 列虚拟化 · 分页
- 外观
- 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 构建交易界面？
我们很想听听。