Reactを基本からまとめてみた【ag-Grid】

ag-Gridとは？

業務システムなどに向いているリッチなグリッドライブラリのこと。
一部機能は課金対象ですが、チェックボックスによる絞り込み、ソート、カラムの入れ替えなどの基本的な実装は無課金で出来る。

公式：ag-grid

環境の準備

①ターミナルでreactアプリケーションを作成する。

npx create-react-app <プロジェクト名>
cd <プロジェクト名>
npm start

② 必要なパッケージをインストールする。

npm i ag-grid-community ag-grid-react

package.jsonのバージョンが同じであることを確認する。

package.json

"ag-grid-community": "^29.1.0",
"ag-grid-react": "^29.1.0",

App.js

import './App.css';

import { AgGridReact } from 'ag-grid-react';
import React, {
  useState,
  useEffect,
  useMemo,
  useCallback,
  useRef,
} from 'react';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

function App() {
  const gridRef = useRef();
  //データ用の配列と列定義の配列を作成する
  const [rowData, setRowData] = useState([
    { make: 'Ford', model: 'Focus', price: 40000 },
    { make: 'Toyota', model: 'Celica', price: 45000 },
    { make: 'BMW', model: '4 series', price: 50000 },
  ]);
  // 列情報を定義する
  const [columnDefs, setColumnDefs] = useState([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' },
  ]);

  const defaultColDef = useMemo(
    () => ({
      sortable: true,
      filter: true,
    }),
    []
  );

  const cellClickedListener = useCallback((e) => {
    console.log('cellClicked', e);
  });

  useEffect(() => {
    fetch(
      'https://www.ag-grid.com/example-assets/row-data.js'
        .then((result) => result.json())
        .then((rowData) => setRowData(rowData))
    );
  }, []);

  const pushMeClicked = useCallback((e) => {
    gridRef.current.api.deselectAll();
  });

  return (
    // divタグでcssのクラスとテーマを設定する
    <div className='ag-theme-alpine' style={{ height: 500 }}>
      <button onClick={pushMeClicked}>Push Me</button>
      {/* Grid行にデータと列定義のプロパティに設定する */}
      <AgGridReact
        ref={gridRef}
        onCellClicked={cellClickedListener}
        rowData={rowData}
        columnDefs={columnDefs}
        rowSelection='multiple'
        animateRows={true}
        defaultColDef={defaultColDef}
      />
    </div>
  );
}

export default App;

参考サイト

Quickstart Tutorial for the React Data Grid from AG Grid
ag-gridの使い方