たちまち。

即席で役に立つこと。

HandsOnTableで列固定して横スクロールすると行の高さが変わる問題

検証バージョン:HandsOnTable6.2.2

HandsOnTableにて、fixedColumnsLeftを使用して先頭の列固定をしているとき、スクロールした際に行の高さ(height)が変わってしまう、という問題がある。

行の高さが倍程度に膨らんで見づらくなってしまい、場合によっては固定列と通常の列との行の高さが異なりデータが判別できない、という状況に陥ってしまう。

定量のスクロールを行うと発生し、スクロールを行った際には高い頻度で発生する。

原因は様々考えられそうだが、以下の要素が絡んでいると発生するようだ。

  • fixedColumnsLeftを使用して列固定をしている

  • 列の数がかなり多く、長い横スクロールが発生する

  • 入力補完項目(autocomplete)やドロップダウン項目(dropdown)を使用している

長いこと悩まされており、解決は難しいと考えていたのだが、今回以下の方法で解決することができた。

解決策

viewportColumnRenderingOffsetnumberを指定する。

https://handsontable.com/docs/8.1.0/Options.html#viewportColumnRenderingOffset

HandsOnTableは表示している周辺のデータを都度レンダリングするのだが、縦方向と横方向のレンダリングする行・列の数を指定することができる。

このオプションは、レンダリングする列の数を指定するもの。デフォルト値は'auto'で、HandsOnTableがパフォーマンス面で最適なオフセットを計算しようとする。

結果としてグリッドオプションの指定は以下のようになった。

                myGridOption = {
                    ~~いろいろ省略
                    autoRowSize : false,
                    fixedRowsTop: 3, //行固定位置
                    fixedColumnsLeft: 6,//列固定位置
                    viewportColumnRenderingOffset: 70
                };

今回の事例では、40列程度読み込むとレンダリングが発生したので、autoによるレンダリング列は40程度だったようだ。この数値を上げ、レンダリング列を上げることによって横スクロール時の再読み込みがなくなり、結果として行の高さがずれることがなくなった。

もちろんレンダリング列数を上げることはパフォーマンスの劣化につながるので、バランスを見て調整したい項目。あるいは、単純に列の数を見直す…というのも解決策になってきそうだ。