【React】編集可能なテーブルコンポーネントの実装

目的

Excel ライクな、セルの編集が可能なテーブルを実装していきます。

サンプル

実装についての説明の前に、どの様なものができるかを確認されたい場合は、
サンプルページを以下のページで公開してあるので、ご確認ください。

上記サンプルページの実装のためのコードは、以下ページで公開してあります。

使用ライブラリ

AG Gridを使用させていただいています。

インストール

以下コマンドでライブラリをインストールします。

npm install ag-grid-react

実装コード

Page.tsx

import { AgGridReact } from "ag-grid-react";
import { ColDef, ClientSideRowModelModule, ModuleRegistry, TextEditorModule, NumberEditorModule, CheckboxEditorModule, ValidationModule } from "ag-grid-community";

/** 編集可能なテーブル表示コンポーネント */
export const DataSheet = () => {
    ModuleRegistry.registerModules([
        ClientSideRowModelModule,
        NumberEditorModule, // number テキスト編集を有効にするための Module
        TextEditorModule, // string テキスト編集を有効にするための Module
        CheckboxEditorModule, // チェックボックスを使うためのオプション
        ValidationModule /* Development Only */,
    ]);

    return (
        <>
            <div style={{ height: 500 }}>
                <AgGridReact
                    columnDefs={columns}
                    rowData={rowData}
                    onCellValueChanged={(e) => {
                        // セルの編集イベント
                        console.log(e)
                    }}
                />
            </div>
        </>
    );
}

/** 列定義 */
const columns: ColDef[] = [{
    headerName: "列ヘッダー名",
    field: "a",　// rowData に紐づけるフィールド名
    // cellEditor: "agCheckboxCellEditor", // チェックボックスで表示・編集するオプション
    width: 100,
    editable: true,
}, {
    headerName: "列ヘッダー名",
    field: "b",
}];

/** セルに表示するデータ */
const rowData = [{
  a: 100,
  b: 120,
}, {
  a: 220,
  b: 140,
}];

解説

列定義はcolumnDefs、一覧に表示するデータはrowDataに登録します。
列を編集可能にするには、ColDefでeditable: trueを設定します。
※ModuleRegistryに Module の登録漏れがあると動作しません。

実際の画面での編集時は、セルを Wクリックすることで編集可能です。

サンプルでは雑な実装しか行っていませんが、セルの変更時のイベントを検知したい場合は、onCellValueChangedを使用します。
サンプルページでは、変更時にコンソール出力される様になっています。

その他、サンプルの実装に組み込んでありますが、cellRendererに Reactコンポーネントを書き込むことで、セル内にコンポーネントを表示することが可能です。