1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-12-21

目的

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に登録します。
列を編集可能にするには、ColDefeditable: trueを設定します。
ModuleRegistryに Module の登録漏れがあると動作しません。

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

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

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?