HandsontableのfixedColumnsLeftによる不具合の対処法


Handsontable for Reactで開発していて遭遇した躓きポイントと対処法を書きます。

固定カラムと非固定カラムとの間がズレる

以下のようにrowHeadersを設定せずにfixedColumnsLeftをセットすると、固定カラムと非固定カラムとの間がズレます。

<HotTable
    data={data}
    fixedColumnsLeft={2}
/>


(1、2行目が固定カラム、3、4行目が非固定カラム)

対処法

「autoRowSize: true」をセットします。

<HotTable
    data={data}
    fixedColumnsLeft={2}
    autoRowSize
/>


スッキリ!

参考

Handsontableは日本語の情報が少ないので対処法を探すのに苦労しました。
https://github.com/handsontable/handsontable/issues/4202