iLLviA
@iLLviA (iLLviA)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

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

1Answer

以下に記載したDOMにマッチした、おすすめライブラリなどはありませんか?

難しいですね。
てっとり早いのが、無難なライブラリ fork して、アプリに合わせてライブラリ自体を改造していく手しかなさそうですね。

1Like

Comments

  1. @iLLviA

    Questioner

    やはり、その手しかなさそうです。
    OSSをいじるのは結構気力が要りますが、成長にもつながるので挑戦してみたいと思います!

Your answer might help someone💌