vastgrid

ブラウザーの中で作った、架空の注文 10 万件です。列のメニュー（▾）を開くと並べ替え・絞り込み・統計の表示ができ、セルの上をドラッグすると、下にそのデータの個数・合計・平均が出ます。⌘/Ctrl ＋ F で検索できます。デモには 10 億行の表もあります。

npm install vastgrid

import { ArraySource, DataGrid } from "vastgrid";
import "vastgrid/styles.css";

const source = new ArraySource({
  columns: ["name", "born", "field"],
  rows: [
    ["Ada Lovelace", 1815, "Mathematics"],
    ["Grace Hopper", 1906, "Computer science"],
  ],
});

export function App() {
  return (
    <div style={{ height: 600 }}>
      <DataGrid source={source} />
    </div>
  );
}

ディスク上のファイルは、vastgrid-duckdb が Node.js から DuckDB で配信します。サーバーのファイルを参照してください。

どんな大きさでも開ける

行はスクロールに合わせて、まとまりごとに読みます。1.4 GB・1 億行の Parquet は 20 ms で開き、735 MB の CSV は読み込みの途中でも 0.15 秒で最初の行を表示します。

速い

セルはキャンバスに描きます。1,000 セル以上を表示しても 1 フレーム約 2 ms です。ブラウザーの要素の大きさの上限を越えて、数十億行までスクロールできます。

表計算ソフトの操作

マウスと Excel のキー操作での範囲の選択、コピー（TSV・HTML・Markdown）、複数の列での並べ替え、絞り込み、すべての列からの絞り込み、検索、列の統計、選択範囲の集計。

エンジンを選べる

グリッドは TableSource とだけやり取りします。ファイルは DuckDB のサーバーのエンジン、メモリ上のデータは ArraySource、ほかのエンジンは自作のもので扱えます。

安全な作り

DuckDB のエンジンは、実際の場所が許可したフォルダーの中にあるファイルだけを読み、その設定は実行中に変えられません。SQL はすべて組み立てたもので、値は必ずパラメーターで渡します。

日本語と英語

組み込みの文言は日本語と英語の両方があります。CSS 変数によるライトとダーク、ARIA のグリッドの役割、キーボードだけでの操作にも対応しています。

vastgrid は 0.x です。1.0 までは、マイナーリリースでも API が変わることがあります。すべてのリリースは変更履歴にあります。