JavaScript テーブル

StockSharp JS Grids は、表形式データを表示するためのブラウザーコンポーネント集です。パッケージは @stocksharp/grids として npm に公開されており、実行時の外部依存関係はありません。TypeScript からも、ブラウザーから直接でも利用できます。

フィルター、選択行、固定集計行を備えた StockSharp 取引ジャーナル

完成版はオンラインデモで確認できます。ヘッダーによる行の並べ替え、列のドラッグと非表示化、フィルターとグループ化による表示の変更、実際の .xlsx ファイルへのエクスポートを試せます。

パッケージ構成

DataGrid は、共通の列定義からヘッダーと行を構築します。並べ替え、フィルター、グループ化、行選択、固定集計行、コンテキストメニュー、状態の保存、エクスポートを担当します。
ColumnSettings は、サーバーですでに描画された HTML テーブルに接続し、列の順序と表示状態をユーザーが変更できるようにします。
TableSort は、アプリケーションが管理するテーブル向けの独立した並べ替えコントローラーです。
TableExport は、外部ライブラリを使わずに OOXML .xlsx ワークブックを生成します。

DataGrid と ColumnSettings は異なる用途を担います。前者は列定義から <thead> と <tbody> の内容を自ら作成します。後者はテーブルを作成せず、data-col 属性を持つ既存のサーバー側マークアップ専用です。

インストール

npm からパッケージをインストールします。

npm install @stocksharp/grids

主要なコンポーネントはすべて共通のエントリーポイントから利用できます。

import {
  DataGrid,
  ColumnSettings,
  TableSort,
  TableExport,
} from '@stocksharp/grids';

インポートするコードを減らすため、個別のエントリーポイントも用意されています。

import { DataGrid } from '@stocksharp/grids/data-grid';
import { ColumnSettings } from '@stocksharp/grids/column-settings';
import { TableSort } from '@stocksharp/grids/table-sort';
import { TableExport } from '@stocksharp/grids/table-export';

バンドラーを使わない場合は、ビルド済みのブラウザーパッケージを読み込みます。公開オブジェクトは window.SSGrid に配置されます。

<script src="https://cdn.jsdelivr.net/npm/@stocksharp/grids@1.1.0/dist/ssgrid.js"></script>
<script>
  const { DataGrid, TableExport } = window.SSGrid;
</script>

クイック例

ヘッダーとデータのセクションを持つ通常のテーブルを用意します。

<table id="orders">
  <thead></thead>
  <tbody></tbody>
</table>

列を一度定義し、行をテーブルに渡します。

import { DataGrid, SortDirections } from '@stocksharp/grids';

interface Order {
  id: number;
  symbol: string;
  price: number;
}

const table = document.querySelector<HTMLTableElement>('#orders')!;
const grid = new DataGrid<Order>({
  head: table.tHead!,
  body: table.tBodies[0],
  columns: [
    { key: 'id', header: '番号', value: order => order.id, filter: 'number', exportable: true },
    { key: 'symbol', header: '銘柄', value: order => order.symbol, filter: 'text', exportable: true },
    { key: 'price', header: '価格', value: order => order.price, filter: 'number', exportable: true },
  ],
  defaultSort: { col: 'id', dir: SortDirections.Desc },
  rowKey: order => String(order.id),
  emptyText: '注文はありません',
  locale: 'ja-JP',
});

grid.setRows([
  { id: 101, symbol: 'SBER', price: 312.45 },
  { id: 102, symbol: 'GAZP', price: 164.18 },
]);

ライブラリは DOM 要素を作成しますが、外観を固定しません。色、サイズ、行の強調表示、メニュー、フィルターダイアログ、補助クラスは、アプリケーションのスタイルシートで定義します。

ソースコードからビルドする

リポジトリとローカルデモでは、標準の npm コマンドを使用します。

git clone https://github.com/StockSharp/JS-Grids.git
cd JS-Grids
npm ci
npm test
npm run build
npm run serve

起動後、デモは http://localhost:8793/demo/ で利用できます。

JavaScript テーブル

パッケージ構成

インストール

クイック例

ソースコードからビルドする

関連項目