bo-grid · Svelte 5 · MIT

La grille de données des marchés animés.

Tableaux des cours, listes de suivi, blotters et carnets d’ordres. Des dizaines de milliers de ticks par seconde arrivent en une mise à jour par image, et seules les cellules qui ont changé sont redessinées. Regroupement, tableau croisé, données arborescentes et export Excel sont dans le même paquet gratuit.

npm i bo-grid

Ouvrir la démo en directLire le guideGitHub
Cours simulés. Chaque cellule modifiée clignote ; Ctrl/⌘+F trouve un symbole.
  • 1 000 × 24symboles et colonnes sur un même tableau
  • 30 000événements par seconde, en une mise à jour par image
  • ~45 KBde cœur compressé en gzip, sans dépendance à l’exécution
  • 8thèmes prédéfinis, et vos propres tokens

Mesuré sur un build de production dans Chrome : un tableau de 1 000 symboles et 24 colonnes demande environ 9 ms de travail sur le thread principal par image à 10 000 événements par seconde, et environ 12 ms à 30 000, chaque cellule modifiée clignotant.

Fait pour les prix

Ce dont un écran de trading a besoin est intégré, pas laissé à un rendu de cellule.

  • Un clignotement à chaque tickLes cellules se teintent à la hausse ou à la baisse quand elles changent et peuvent montrer l’ampleur du mouvement. Sur un tableau chargé, les clignotements maintenus restent peu coûteux.
  • Couleurs des limites de prixPrix plafond, prix plancher et prix de référence colorés comme les bourses les affichent, avec un formatage qui respecte le pas de cotation et l’état de la séance.
  • Seul ce qui est à l’écran est diffuséUn flux de ticks regroupés met à jour les lignes sur place, et les abonnements par viewport ne diffusent que les symboles visibles.
  • Utilitaires pour le carnet et le relevé des transactionsDes utilitaires pour un carnet d’ordres, une échelle de prix et le relevé des transactions, dans un point d’entrée optionnel d’environ 1 KB.

Un tour d’horizon

Un tableau des cours aux couleurs de la bourse, avec la barre de recherche ouverte et des lignes figées au-dessus du défilement.
Un tableau des cours aux couleurs de la bourse, avec la barre de recherche ouverte et des lignes figées au-dessus du défilement.
Des cellules riches prêtes à l’emploi : chaleur, signaux, sous-libellés et sparklines en chandeliers.
Des cellules riches prêtes à l’emploi : chaleur, signaux, sous-libellés et sparklines en chandeliers.
Un tableur quand il en faut un : numéros de ligne, ligne de filtres, éditeurs typés, poignée de recopie et annulation, dans le thème clair.
Un tableur quand il en faut un : numéros de ligne, ligne de filtres, éditeurs typés, poignée de recopie et annulation, dans le thème clair.

Tout dans un seul paquet

Une installation, aucun module complémentaire, aucune clé de licence.

Temps réel
Clignotement à chaque tick · ampleur de chaque mouvement · mises à jour sur place · flux de ticks regroupés · diffusion des seules lignes à l’écran · tri en direct
Données
Tri simple et multiple · filtres texte, nombre, date et ensemble · recherche rapide · recherche dans la grille · regroupement avec sous-totaux · tableau croisé · données arborescentes · maître-détail · lignes côté serveur
Édition
Éditeurs en ligne et typés · validation · presse-papiers · poignée de recopie · annuler et rétablir
Mise en page
Colonnes et lignes figées · colonnes qui s’ajustent ou s’élargissent quand les valeurs grandissent · redimensionner, réordonner, masquer · groupes d’en-têtes · cellules fusionnées · virtualisation des colonnes · pagination
Apparence
8 thèmes prédéfinis et vos propres tokens · barres de données, icônes et échelles de couleurs · sparklines · localisation
Plateforme
Prise en charge du clavier et des lecteurs d’écran · SSR et SvelteKit · enregistrement et restauration de la disposition · export et import CSV et Excel

Démarrez en une minute

Natif en Svelte 5. React, Vue, Angular ou JavaScript pur utilisent l’élément <bo-grid> et n’ont besoin d’aucune configuration 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 />
Tout 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)),
};

À côté du graphique

bo-grid et TradeCanvas sont faits pour aller ensemble : un tableau dont les lignes ouvrent un graphique, un graphique à côté d’un blotter d’ordres. Ensemble, ils sont le début d’une boîte à outils pour les logiciels de trading : graphiques, saisie d’ordres, tableaux des cours et flux d’ordres.

Graphique TradeCanvasVoir la démo du tableau des cours

Vous construisez un écran de trading avec TradeCanvas ?

Nous aimerions en savoir plus.

Nous contacter