React-WindowsのVariableSizeGridで列幅を途中で変更する

はじめに

React-WindowsのVariableSizeGridは、可変サイズのセルを持つグリッドコンポーネントです。このコンポーネントを使用すると、大量のデータを高速にレンダリングすることができます。

このVariableSizeGridは、高速化のため、columnWidth で指定した各列のサイズの値をキャッシュしています。そのため、途中で列幅を変更してもキャッシュが残っているため列幅が変わりません。

例えば、以下のコードでは、ボタンをクリックすると列幅を 100px から 200px に変更するコードが書かれていますが、実行してボタンをクリックしても、最初に設定した 100px の列幅がキャッシュされため列幅は変わりません。

const Cell = ({ columnIndex, rowIndex, style }) => (
  <div>
    r{rowIndex}, c{columnIndex}
  </div>
);

const Example = () => {
  const [width, setWidth] = useState(100);
  const change = () => {
    setWidth(200);
  };

  return (
    <div>
      <Grid
        className="Grid"
        columnCount={1000}
        columnWidth={(index) => width}
        height={150}
        rowCount={1000}
        rowHeight={(index) => 30}
        width={300}
      >
        {Cell}
      </Grid>
      <button onClick={() => change}>列幅変更</button>
    </div>
  );
};

ReactDOM.render(<Example />, document.getElementById("root"));

■実行結果

スポンサーリンク

列幅を途中で変える

列幅の変更を反映する場合は、VariableSizeGridのresetAfterColumnIndex 関数を読んであげればいい、resetAfterColumnIndexは引数で指定したインデックス移行のキャッシュをクリアし、列幅をリセットする関数である。

const Cell = ({ columnIndex, rowIndex, style }) => (
  <div
    className={
      columnIndex % 2
        ? rowIndex % 2 === 0
          ? "GridItemOdd"
          : "GridItemEven"
        : rowIndex % 2
        ? "GridItemOdd"
        : "GridItemEven"
    }
    style={style}
  >
    r{rowIndex}, c{columnIndex}
  </div>
);

const Example = () => {
  const refGrid = useRef(null); //☆追加

  const [width, setWidth] = useState(100);
  const change = () => {
    setWidth(200);
    refGrid.current.resetAfterColumnIndex(0); //☆追加
  };

  return (
    <div>
      <Grid
        ref={refGrid} //☆追加
        className="Grid"
        columnCount={1000}
        columnWidth={(index) => width}
        height={150}
        rowCount={1000}
        rowHeight={(index) => 30}
        width={300}
      >
        {Cell}
      </Grid>
      <button onClick={change}>列幅変更</button>
    </div>
  );
};

ReactDOM.render(<Example />, document.getElementById("root"));

■実行結果

まとめ

うまく列幅が変更されました。結構この答えを導き出すのに時間がかかりましたが、普通に公式ドキュメントに記載があって、それを試したらちゃんと変更されました。