React で AG Grid を導入してみる

前回は JavaScript で AGGrid のテーブルを表示してみました。
今回は現場でも使っている React を使い AGGrid の簡単な導入サンプルを作ってみます。

事前準備

まず適当な React プロジェクトの用意をします。
その後下記をターミナル、コマンドプロンプト等で実行。
これで準備は完了となります。

npm install ag-grid-react ag-grid-community

サンプルコード

import React from 'react';
import { AgGridReact } from 'ag-grid-react';

import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
ModuleRegistry.registerModules([ AllCommunityModule ]);

import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";

function App() {
  const columnDefs = [
    { field: "name", headerName: "氏名", sortable: true, filter: true },
    { field: "role", headerName: "役職", filter: true },
    { field: "status", headerName: "ステータス" }
  ]

  const rowData = [
    { name: "田中 太郎", role: "エンジニア", status: "在宅" },
    { name: "佐藤 次郎", role: "デザイナー", status: "出社" },
    { name: "鈴木 花子", role: "マネージャー", status: "会議中" }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h1>AG Grid サンプル</h1>
      <div className="ag-theme-quartz" style={{ height: 300, width: 600 }}>
        <AgGridReact rowData={rowData} columnDefs={columnDefs} />
      </div>
    </div>
  );
}

export default App;

実際に npm run 実行してみるとこのようになります。

前回の JavaScript 版 と遜色ないものが表示できたと思います。

JavaScript と React での導入方法の違い

最も大きな違いは、ずばりどこからライブラリを持ってくるかです。

Vanilla JS版: スクリプトタグ（CDN）で直接読み込むため、HTMLファイル1枚あればすぐに動かせる。

React版: npm install を行い、ビルドツールでコンパイルする。

最後に

今回は React で AGGrid の導入サンプルを作成しましたが JavaScript 同様比較的シンプルに導入可能だと感じました。
次回以降はシンプルなテーブルだけでなくもう少し凝った使い方もしてみたいですね。