ag-grid

AG Grid

並べ替え、フィルタリング、ページネーション、インライン編集、Excel のような機能を備えた React データテーブルです。TypeScript の型付け、アクセシビリティ、仮想化に対応しています。

例では ag-grid-react を使用しています。列設定 API（ColDef、onGridReady）はフレームワークに依存しないため、セルレンダラーは各フレームワークのコンポーネント構文に合わせて調整してください。

使用する場面

• 並べ替え／フィルタリング／ページネーションが必要なデータテーブル
• インライン編集が可能な編集用グリッド
• グループ化／集計を備えた複雑なグリッド
• 仮想化による高いパフォーマンスが必要な場合
• Excel のような機能が必要な場合

次の用途には使用しないでください。

• シンプルなテーブル（HTML/MUI Table を使用してください）
• 表形式ではないビジュアライゼーション（チャートを使用してください）
• モバイルファーストの用途（よりシンプルなものを検討してください）

---

重要なパターン

✅ 必須：型安全性のために TypeScript インターフェースを使用する

// ✅ CORRECT: Typed column definitions
import { ColDef } from "ag-grid-community";

interface RowData {
  id: number;
  name: string;
}

const columnDefs: ColDef<RowData>[] = [{ field: "id" }, { field: "name" }];

// ❌ WRONG: Untyped columns
const columnDefs = [{ field: "id" }, { field: "name" }];

✅ 必須：共通設定には defaultColDef を使用する

// ✅ CORRECT: DRY column configuration
const defaultColDef: ColDef = {
  sortable: true,
  filter: true,
  resizable: true,
};

<AgGridReact defaultColDef={defaultColDef} />

// ❌ WRONG: Repeating config for each column
const columnDefs = [
  { field: 'id', sortable: true, filter: true, resizable: true },
  { field: 'name', sortable: true, filter: true, resizable: true },
];

✅ 必須：アクセシビリティ機能を有効にする

// ✅ CORRECT: Accessibility enabled
<AgGridReact
  enableAccessibility={true}
  suppressMenuHide={false}
/>

---

規約

AG Grid 固有

• 列には TypeScript インターフェースを使用する
• カスタムコンテンツにはセルレンダラーを使用する
• アクセシビリティのベストプラクティスを適用する：キーボードナビゲーション、スクリーンリーダーのサポート、ARIA 属性
• カスタム実装より組み込み機能を優先する
• 読み込み／エラー状態に対応する

---

選択フロー

Custom cells?
  → Use cellRenderer/cellRendererFramework

Editable?
  → editable: true, handle onCellValueChanged

Filtering?
  → filter: true or specify type (agTextColumnFilter, agNumberColumnFilter)

Large dataset?
  → rowModelType: 'infinite' for server pagination

Grouping?
  → rowGroup: true on columns

Export?
  → exportDataAsCsv()/exportDataAsExcel()

Performance?
  → Virtualization (default), immutableData: true for React

---

例

import { ColDef } from 'ag-grid-community';
import { AgGridReact } from 'ag-grid-react';

interface RowData {
  id: number;
  name: string;
  value: number;
}

const columnDefs: ColDef<RowData>[] = [
  { field: 'id', headerName: 'ID' },
  { field: 'name', headerName: 'Name', sortable: true },
  { field: 'value', headerName: 'Value', filter: 'agNumberColumnFilter' }
];

<AgGridReact<RowData>
  rowData={data}
  columnDefs={columnDefs}
  defaultColDef={{ flex: 1, minWidth: 100 }}
/>

---

エッジケース

• データが空の場合 → 適切なメッセージを表示する
• データ取得中の読み込み状態
• エラー発生時に備えたエラーバウンダリー
• リサイズイベントを適切に処理する
• キーボードナビゲーションをテストする

---

リソース

• https://www.ag-grid.com/react-data-grid/
• https://www.ag-grid.com/react-data-grid/accessibility/