検証バージョン: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程度だったようだ。この数値を上げ、レンダリング列を上げることによって横スクロール時の再読み込みがなくなり、結果として行の高さがずれることがなくなった。
もちろんレンダリング列数を上げることはパフォーマンスの劣化につながるので、バランスを見て調整したい項目。あるいは、単純に列の数を見直す…というのも解決策になってきそうだ。