Virtual Scroll

仮想スクロール

height プロパティを指定すると、仮想スクロールが有効になります。表示領域に収まる行のみを DOM に描画し、スクロールに応じて動的に行を入れ替えます。

const table = useSpreadSheetTable<LargeRow>({
  columns,
  initialData: largeData, // 10,000 行でも OK
  rowKey: 'id',
})

<SpreadSheetTable table={table} height={600} />

height 省略時 (仮想スクロール無効)

height を省略すると仮想スクロールが無効になり、全行を DOM に描画します。テーブルの高さは行数に応じて自動的に決まります。

少量のデータや、1画面に複数テーブルを配置する場合に便利です。

// 行数に合った自然な高さで描画
<SpreadSheetTable table={table} />

パフォーマンス

• 表示中の行 + バッファのみ DOM に描画
• memo() による不要な再レンダリングの抑制
• useSyncExternalStore による効率的な状態同期

大量データでもソート、フィルター、選択、編集の全ての機能がスムーズに動作します。

Playground で 10,000 行のデモを試せます。