目的
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コンポーネントを書き込むことで、セル内にコンポーネントを表示することが可能です。