bo-grid

The data grid for busy markets.

A fast, lightweight Svelte 5 data grid for trading screens, with React and Vue components and a custom element for every other framework.

Live demo and docs →

Install

npm i bo-grid

Quick start

<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' },
    { type: 'percent', key: 'change', header: 'Chg %' },
  ];

  let rows = $state([{ id: 1, symbol: 'AAPL', price: 189.3, change: 1.24 }]);
</script>

<Grid {rows} {columns} height={480} />

Using React, Vue, Angular or plain JavaScript? See React, Vue & more.

Learn more

• Docs: a page per feature, with live examples.
• Examples: every example running, with its source.
• Props reference: every prop, column option and API method.
• For AI agents: the docs also ship in the package, in node_modules/bo-grid/dist/docs/, and npx bo-grid init points your agent at them.
• TradeCanvas: canvas trading charts that pair with bo-grid.
• Benchmarks · Changelog · Contributing

License

MIT. If bo-grid saves you time, you can sponsor its development.