Handsontableでセルの背景色設定、コメント削除を一括で実施したい

Question

前提・実現したいこと

Handsontableを使用して全セルの値を一括で背景色設定、コメント削除を実施したいです。
以下のソースコードのように表の行数、列数を取得してループさせれば個別に出来るのですが、パフォーマンスが悪いので、パフォーマンスが改善されると思われるため、一括で処理させたいです。
実現方法を教えていただけないでしょうか。

該当のソースコード

import React, { Component } from 'react';
import { HotTable } from '@handsontable/react';
import 'handsontable/dist/handsontable.full.css';

class Test extends Component {
    constructor(props) {
        super(props);
        this.hotTableComponent = React.createRef();
        this.hotSettings = {
            columns: [
                { title: 'test' }
            ],
            colWidths: [ 100 ],
            startCols: 1,
            startRows: 10,
            rowHeaders: true,
            width: 965,
            height: 400,
        };
    };
    createClick = () => {
        // コメント
        const commentsPlugin = this.hotTableComponent.current.hotInstance.getPlugin('comments');
        // 行数取得
        const countRows = this.hotTableComponent.current.hotInstance.countRows();
        // 列数取得
        const countCols = this.hotTableComponent.current.hotInstance.countCols();

        for (let intI = 0; intI < countRows; intI++) {
            for (let intJ = 0; intJ < countCols; intJ++) {
                // セル背景色初期化
                this.hotTableComponent.current.hotInstance.setCellMeta(
                    intI,
                    intJ,
                    'className',
                    'err-style-release'
                );
                // コメント削除
                commentsPlugin.removeCommentAtCell(intI, intJ);
            }
        }
    };
    render() {
        return (
            <div>
                <HotTable
                    id="hot"
                    ref={this.hotTableComponent}
                    settings={this.hotSettings}
                />
                <button onClick={this.createClick}>登録</button>
            </div>
        );
    }
}

補足情報（FW/ツールのバージョンなど）

"@handsontable/react": "^2.1.0",
"handsontable": "^6.2.2"

Answer 1

こんにちは。

以下、詳細まで掘って調べきったわけではありませんので、seiyan0426さんの課題を完全に解決する回答になっているかは分かりませんが、調べたことと試作したコードを回答します。

まず以下の issue

• i want to set cell background color. #3392

への回答コメントに以下が書かれています。

Currently the best way to style Handsontable is to use custom renderers.

つまり、「Handsontableにスタイルをあてるならカスタムレンダラーを使うのがベスト」とのことです。次に React の場合のカスタムレンダラーをどう作ればいいのかということになると、以下の issue

• React Cell Renderer #21

の zekedroid さんによる以下の２つのコメント

• react-handsontable/issues/21#issuecomment-335318986

• react-handsontable/issues/21#issuecomment-335475907

とこれらコメントからリンクされている以下の記事とソースコードが参考になります。（同じく、zekedroidさんによるもの）

• Rendering React elements into Infinite Scrollable tables using the Least Recently Used (LRU) cache algorithm

• https://codepen.io/anon/pen/zEjLob?editors=0010

mediumの記事で説明されている react-lru を使うとHandsontableのセルのレンダリングが効率化されるようです。

そこで、ご質問に挙げられている Test コンポーネントのコードをベースに、上記を参考にしてカスタムレンダラーを追加し、動作確認するためのコードを試作してみましたので、以下に挙げておきます。

まず、react-lru　をインストールします。

yarn add react-lru

　

Test.js

Test コンポーネントの this.hotSettings に renderer を追加し、１つのセルに対応する Cellコンポーネント も追加しました。逆に、クリックハンドラ createClick ではstate を変更するだけにしました。

import React, { Component } from 'react';
import { HotTable } from '@handsontable/react';
import 'handsontable/dist/handsontable.full.css';
import { renderReactCell, MemoizedReactDomContainers } from 'react-lru';

import './styles.css';

const memoizedContainers = new MemoizedReactDomContainers(20);

const Cell = ({ value, error }) => (
  <div className={`${error ? 'cell err-style-release' : 'cell'}`}>{error ? '' : value}</div>
);

class Test extends Component {
  constructor(props) {
    super(props);
    this.hotSettings = {
      columns: [
        {
          title: 'test',
          renderer: (instance, td, row, col, prop, value) => {
            renderReactCell({
              memoizedContainers,
              td,
              row,
              col,
              jsx: <Cell value={value} error={!!(this.state.clickCount % 2)} />
            });
            return td;
          },
        }
      ],
      colWidths: [ 100 ],
      startCols: 1,
      startRows: 10,
      rowHeaders: true,
      width: 965,
      height: 400,
    };
    this.state = { clickCount: 0, };
  };

  createClick = () => {
    this.setState({ clickCount: this.state.clickCount + 1 });
  };

  render() {
    return (
      <div>
        <HotTable settings={this.hotSettings} />
        <button onClick={this.createClick}>登録</button>
      </div>
    );
  }
}

export default Test;

　　

styles.css

.err-style-release はセレクタの詳細度を上げました。また、 padding: 0 と、 height: 22px はデモを見やすくするための暫定措置です。

.handsontable td { padding: 0 }
.handsontable div.cell { height: 22px }
.handsontable div.err-style-release { background-color: #FF0000; }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Test from './Test';

ReactDOM.render(<Test />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>test</title>
</head>
<body>
    <div id="root" />
</body>
</html>

　

　

　
上記のように修正したTest コンポーネントをマウントして表示させ、

① いくつかの空白のセルに適当に文字を入力してから、

② 「登録」ボタンをクリックすると、.err-style-releaseによってセルが赤くなり、かつ、入力した文字が非表示になります。

もう一度「登録」をクリックすると、.err-style-releaseが無くなり背景色が未設定の状態に戻ります。

以上、どこか一部でも参考になれば幸いです。