PRO filter sort auto-filter
データフィルター＆ソート
列ヘッダーのドロップダウンでフィルターとソート。300、1K、10K行を切り替えてパフォーマンスを確認。
デモの解説
このデモは従業員データセットを読み込み、ReoGrid のオートフィルター機能を接続します。各列ヘッダーにドロップダウンが付き、値でフィルタリング・並び替えができます。
- 列ヘッダーの ▼ をクリックするとフィルターパネルが開き、チェック/チェック解除で行を表示/非表示
- 行数セレクター（300 / 1K / 10K）でデータセットを再生成して描画速度を体感可能
- 交互行カラーは1行で設定 — CSS ループや手動のセル操作不要
- suspendRender / resumeRender でデータ読み込み時の再描画を1回にまとめ、10K行でも瞬時に表示
- フィルター状態はグリッドが管理するため、外部ステートや複雑なイベントハンドラ不要
主要 API
ws.createAutoFilter(options) 指定行範囲の列ヘッダーにフィルタードロップダウンを有効化
ws.setAlternateRowColors(options) 偶数・奇数行にゼブラストライプの背景色を一括設定
ws.setCellInput(row, col, value) 行/列インデックスでセルに値を書き込む — 大量書き込みに最適
ws.suspendRender() / ws.resumeRender() resumeRender() が呼ばれるまで全描画を遅延 — 大量データ書き込みに必須
ws.setGridSize(rows, cols) 大量データ書き込み前にシートサイズを確保してメモリ再割り当てを防ぐ
ソースコード
TypeScript