Tableのカラム列(X方向) の仮想化を実現したい。
解決したいこと
reactでgoogle sheetのようなアプリを実装しています。
カラム列の数が大量になるとパフォーマンスが悪化し、横方法への仮想を検討しています。
縦方向の仮想化は実現できたのですが、横方向への仮想化に対応しているライブラリが見つからずに困っています。
以下に記載したDOMにマッチした、おすすめライブラリなどはありませんか?
僕が定義している横方向への仮想化とは
スクロールするたびに、DOMがスタックされるされるのではなく、更新されていくイメージです。
現在のアプリのDOM階層
<div id="record_0">
<div id="cell_0_0" />
<div id="cell_0_1" />
</div>
<div id="record_1">
<div id="cell_1_0" />
<div id="cell_1_1" />
</div>
...
自分で試したこと
react-window
主にListとGrid機能が提供されている仮想化ライブラリです
-
List
縦方向又は、横方向への仮想化のどちらかに対応しています。
ここでの横方向への仮想化とは、単なるflexなどで横並びにしたものを対象にしているみたいです。
Listだと、行ごとにListコンポーネントを使用し全てのスクロールイベントを制御しないといけないので厳しいと判断しました。
List Example -
Grid
縦横両方の仮想化に対応しています。
行列関係なく全てのセルを同じ階層でもち仮想化を制御しているみたいで、僕のDOM構造とはアンマッチでした。
Grid Example
以下がGridが想定しているDOM構造
<div>
<div id="cell_0_0"></div>
<div id="cell_0_1"></div>
<div id="cell_1_0"></div>
<div id="cell_1_1"></div>
<div id="cell_2_0"></div>
...
</div>
その他ライブラリ
縦方向には対応しているものの横方向への仮想化には対応していませんでした。
- react-base-table
- react-virtuoso
- react-tiny-virtual-list
0