大量データと固定列

グリッドは行・列ともに仮想化されており、DOM 化されるのは可視域 + オーバースキャンぶんだけです。クライアントサイド行モデルで約 100 万行まで扱えます。

デモ(100,000 行)

• ID 列は左に、状態 列は右にピン留めされています(pinned: 'left' | 'right')。横スクロールしても固定されたままです。
• 「50,000 行目へ」ボタンは命令的ハンドルの scrollToRow(49999, { align: 'center' }) を呼んでいます。
• 在庫金額列は getValue による計算列(数量 × 単価)で、numberFormatter() により 3 桁区切り表示です。
• フィルター / ソート / グローバルフィルターも 100,000 行に対してそのまま機能します。

列のピン留め

const columns: GridColumn<Row>[] = [
  { key: 'id', title: 'ID', width: 90, pinned: 'left' },
  // ...中央スクロール列...
  { key: 'status', title: '状態', width: 100, pinned: 'right' },
]

レイアウトは左 / 中央 / 右の 3 ペイン構成(sticky ベース)で、固定列は常に可視です。scrollToCell は固定列に対しては横スクロールしません。

大きなデータでの注意点

• rows は参照の安定が重要です。onRowsChange で受け取った配列はそのまま state に戻してください(map で作り直すと未変更行の構造共有が失われ、undo 履歴も破棄されます)。
• グローバルテキストフィルターは 50,000 行を超えると自動的に時間分割適用へ切り替わり、入力中もメインスレッドをブロックしません(適用中はグリッドが組み込みオーバーレイを表示)。
• 行の可変高(autoHeight)は計測コストが増えるため、超大規模データでは固定行高を推奨します。
• データがサーバにある場合はサーバーサイド行モデル(SSRM)を使うと、可視域近傍のブロックだけを取得してメモリを有界化できます。