PRO performance big-data sort 10000-rows
ビッグデータ — 10,000行
10,000行を瞬時にロードし、任意の列でソート。ソート時間をリアルタイム表示 — 通常1秒未満。
デモの解説
このデモは生成された企業データ 10,000 行を読み込み、各操作の所要時間を計測します。初期描画・ソートともに通常 1 秒未満 — ReoGrid の Canvas ベースアーキテクチャの性能を体感できます。
- 列ヘッダーの「ソート」をクリックして全 10,000 行を並び替え — グリッド上部にミリ秒単位の経過時間を表示
- 初期読み込みは suspendRender / resumeRender で全セル書き込みを1回の Canvas 再描画にまとめる
- データ生成器はシード付き擬似乱数を使用するため結果は再現可能
- 列ヘッダーにオートフィルターが有効 — ▼ ドロップダウンで業種・地域・ステータスによる絞り込み
- 300 行・1,000 行モードとの比較で行数に対する描画時間のスケーリングを確認
主要 API
ws.setGridSize(rows, cols) データ書き込み前に 10,000 × N グリッド全体を事前確保してメモリ再割り当てを防ぐ
ws.setCellInput(row, col, value) 大量データ読み込みループで行/列インデックスによりセル値を書き込む
ws.createAutoFilter(options) ヘッダー行にフィルタードロップダウンを有効化して列レベルのフィルタリング・ソートを実現
ws.suspendRender() / ws.resumeRender() 10,000 行全書き込み後まで Canvas 再描画を遅延 — 1秒未満の読み込みに不可欠
ソースコード
TypeScript