syncfusion-javascript-grid

Syncfusion JavaScript Grid コンポーネントスキル

⚠️ セキュリティと信頼境界

• Grid スキルはリモートデータにアクセスしません。
• 外部 API とのやり取りはすべて、このスキルの信頼境界外にある別の DataManager スキルが処理します。

目次

• このスキルを使用する場面
• Grid の概要
• 組み込み API の必須ルール
• ドキュメントとナビゲーションガイド
• クイックスタートの例
• 一般的なパターン
• 主な Props と設定

このスキルを使用する場面

次のことが必要な場合に、このスキルを使用してください。

• 複数の列と行を持つインタラクティブなデータグリッドを構築する
• CRUD 操作（作成、読み取り、更新、削除）を実行する
• 大規模なデータセットをフィルタリング、並べ替え、検索する
• 集計値を含むデータのグループ化と集計を行う
• データを Excel または PDF 形式でエクスポートする
• 行選択または複数選択のシナリオを実装する
• 仮想スクロールに対応したレスポンシブなデータテーブルを作成する
• グリッドのスタイルや外観をカスタマイズする
• 編集モード（インライン、ダイアログ、バッチ）を処理する
• セッションをまたいでグリッドの状態を保持する
• TypeScript と最新のモジュールシステムを使用する

Grid の概要

Syncfusion EJ2 Grid は、次の機能を備えた、強力で高性能な TypeScript 向けデータグリッドコンポーネントです。

• 柔軟なデータバインディング（ローカル、リモート、OData）
• 豊富な列機能（テンプレート、列の結合、外部キー、固定列）
• 高度な編集機能（インライン、ダイアログ、バッチ、コマンド列）
• 強力なフィルタリング（メニュー、バー、Excel 形式）
• カスタム集計に対応した複数レベルのグループ化
• 6 種類以上の選択モード（行、セル、列、チェックボックス）
• エクスポート機能（テンプレート対応の Excel、PDF）
• パフォーマンスの最適化（仮想スクロール／無限スクロール）
• 包括的なカスタマイズ（テーマ、スタイル、イベント）

組み込み API の必須ルール

重要：Grid の組み込み API（137 以上のメソッド、65 以上のイベント、95 以上のプロパティ）を使用する際は、次のルールに従ってください。

ルール 1：機能メソッドにはモジュールのインジェクションが必要です

メソッドが動作するのは、そのモジュールがインジェクションされている場合のみです。モジュールが不足していても、エラーはスローされません。

メソッド	必要なモジュール	例
goToPage()	Page	Grid.Inject(Page) または Inject(Page)
sortColumn()	Sort	Grid.Inject(Sort) または Inject(Sort)
filterByColumn()	Filter	Grid.Inject(Filter) または Inject(Filter)
addRecord(), deleteRecord()	Edit	Grid.Inject(Edit) または Inject(Edit)

---

📄 プロパティ API の完全なリファレンス： references/api-reference.md 📄 メソッド API の完全なリファレンス： references/programmatic-api.md 📄 イベント API の完全なリファレンス： references/events-catalog.md 📄 バックエンド連携： references/adaptors.md

---

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールと npm パッケージのセットアップ
• TypeScript モジュールのインポートと設定
• CSS のインポートとテーマの選択
• サンプルデータを使った基本的なグリッドの初期化
• 必要なモジュールのインジェクション

列の機能

📄 参照： references/columns.md

• 列の種類（文字列、数値、日付、ブール値）
• 列のバインディングとプロパティ
• データ型の書式設定
• 列幅と基本設定
• 外部キー列
• 固定列
• 列テンプレートとカスタムレンダリング
• 列の結合
• 列幅の管理
• 列選択メニュー（列の表示／非表示）
• 列ヘッダーとカスタマイズ
• 列メニュー
• 列の並べ替え
• 列幅の変更

📄 参照： references/command-column.md

• コマンド列の基本
• 組み込みのコマンドタイプ（編集、削除、保存、キャンセル）
• カスタムコマンドボタン
• コマンドテンプレート
• コマンドイベントの処理
• 行単位のアクション

データバインディング

📄 参照: references/data-binding.md

• 配列を使用したローカルデータバインディング
• リモートデータバインディング（URL、OData、WebAPI）
• クエリアダプターとURLアダプター
• データソースの動的な変更
• 大規模なデータセットのレンダリングパフォーマンスを最適化するイミュータブルモード
• 読み込みインジケーター（Spinner、Shimmer）
• データの更新とソースの切り替え

編集

📄 参照: references/editing.md

• すべてのCRUD操作の設定
• 編集設定とモード
• 検証とエラー処理
• サーバー側でのデータ永続化
• 編集イベントの処理

データ検証

📄 参照: references/validation.md

• 組み込みバリデーター（required、min、max、pattern）
• 列のデータ型（number、string、date）ごとの検証ルール
• カスタム検証関数
• 依存関係のある検証（他の列の値に基づく検証）
• 動的ルール（実行時の追加・削除）
• エラーの位置と表示
• CRUDエラー処理（クライアント側およびサーバー側の検証）
• 一意フィールドの重複検出
• サーバー確認を伴う非同期検証
• 編集モード、イベント、フィルタリングとの連携

フィルタリング操作

📄 参照: references/filter-setup.md

• フィルタリングモジュールの設定
• フィルタリング機能の有効化
• フィルタータイプの概要
• 列ごとのフィルタリングの無効化
• クイックリファレンス

📄 参照: references/filter-operators.md

• フィルター演算子（21種類以上）
• 初期フィルター（ORおよびANDロジック）
• ワイルドカードフィルターとLIKEフィルター
• 大文字と小文字の区別
• 発音区別符号フィルター

📄 参照: references/filter-types.md

• テンプレートのライフサイクルを伴うFilterBarフィルター
• カスタム演算子を使用するメニューフィルター
• 複数選択に対応したExcel/CheckBoxフィルター
• カスタムフィルターUIコンポーネント
• 大規模データ向けの無限スクロール
• フィルタータイプの比較

並べ替え

📄 参照: references/sorting.md

• 列の並べ替えを有効化
• 複数列の並べ替え
• カスタム並べ替え比較
• 並べ替え方向（昇順／降順）
• フィールドマッピングを使用した並べ替え

グループ化と集計

📄 参照: references/grouping.md

• グループ化機能の有効化
• 単一列または複数列によるグループ化
• グループキャプションテンプレート
• 複数レベルのグループ化
• パフォーマンス向上のための遅延読み込みグループ化
• グループの折りたたみ／展開

📄 参照: references/aggregates.md

• 組み込み集計（Sum、Avg、Min、Max、Count）
• カスタム集計関数
• フッター集計
• グループレベルの集計
• リアクティブな集計の更新

選択モード

📄 参照: references/selection.md

• 行の選択モード
• セルの選択モード
• 列の選択モード
• チェックボックスによる選択
• 複数選択の設定
• 選択イベントとメソッド

行操作

📄 参照: references/row.md

• 詳細行テンプレート（マスター・詳細）
• 行のドラッグ＆ドロップ
• 行の固定（上部／下部の行を固定）
• 行の結合
• カスタム行テンプレート
• 行の高さの管理

固定

📄 参照: references/frozen.md

• 列の固定
• 行の固定
• ヘッダーの固定
• 行の固定
• 固定列の動作
• 固定列によるパフォーマンス最適化
• 固定列と仮想スクロールの併用

階層構造とネストされたデータ

📄 参照: references/hierarchy-grid.md

• 親子データ構造
• queryStringを使用した子グリッドの設定
• 展開と折りたたみの動作
• ネストされたグリッドテンプレート
• 詳細行テンプレート
• 階層データの設定
• 複数レベルの階層（3～4レベル）
• 子グリッドの動的データバインディング
• プログラムによる展開／折りたたみの制御
• ネストされたデータに関するパフォーマンス上の考慮事項

スクロールとパフォーマンス

📄 参照: references/scrolling.md

• 大規模なデータセット向けの仮想スクロール
• 無限スクロール
• スクロールパフォーマンスの最適化
• スクロールイベント
• スクロール動作の設定

ページネーション

📄 参照： references/paging.md

• ページサイズの設定
• ページネーションの種類（数値、コンボ、カスタム）
• ページサイズの選択肢
• 現在のページへの移動
• レコード総数の処理

検索

📄 参照： references/searching.md

• 検索機能の有効化
• 複数列の検索
• 検索演算子
• 検索をクリアする方法
• 検索パフォーマンス

ツールバー

📄 参照： references/toolbar.md

• 組み込みツールバー項目（追加、編集、削除、保存、キャンセル）
• カスタムツールバーテンプレート
• ツールバー項目の設定
• カスタムボタンと関数
• ツールバーイベント

コンテキストメニュー

📄 参照： references/context-menu.md

• 組み込みコンテキストメニュー項目
• カスタムコンテキストメニュー
• コンテキストメニューの設定
• コンテキストメニューイベント
• 右クリックメニューの処理
• サブメニュー項目とグループ化
• 選択内容に応じたメニュー表示

イベント通信

📄 参照： references/events-catalog.md

• イベント処理に関する必須ルール
• イベントのバインドパターン（設定、addEventListener、プロパティ代入）
• カテゴリ別の85以上のグリッドイベント（ライフサイクル、アクション、行、セル、編集、列など）
• アクションイベントのrequestTypeカタログ
• actionBeginイベントとbeforeイベントのキャンセルパターン
• イベントのタイミングと発火順序
• データ変更、ユーザー操作、処理に関するイベント

エクスポート機能

📄 参照： references/excel-export.md

• Excelエクスポートの基本
• エクスポートのオプションとカスタマイズ
• エクスポート時のテンプレートレンダリング
• サーバーサイドエクスポート
• フィルター済み／グループ化されたデータのエクスポート

📄 参照： references/pdf-export.md

• PDFエクスポートの基本
• エクスポートのオプションとカスタマイズ
• ヘッダーとフッター
• エクスポート時のテンプレートレンダリング
• サーバーサイドPDFエクスポート
• ページの向きとサイズ

📄 参照： references/print.md

• グリッドの印刷機能
• 印刷設定とオプション
• 印刷テンプレート
• 印刷の書式設定
• 印刷プレビュー

設定管理

📄 参照： references/global-local.md

• グローバルなグリッド設定
• 列ごとの設定
• 設定の優先順位
• 設定のマージ
• 動的な設定パターン
• ベストプラクティスとテンプレート

📄 参照： references/state-management.md

• グリッドの状態をストレージに保存
• グリッドの状態を復元
• セッション間で状態を保持
• 状態のメソッド（保存、復元、クリア）
• ローカルストレージとの連携

⚠️ ルール：グリッドで状態管理を使用する場合は、enablePersistence: true を有効にする必要があります。

ローカライズと国際化

📄 参照： references/localization.md

• 多言語対応（60以上の言語）
• ロケールの設定とカルチャーの構成
• 数値、日付、通貨の書式設定
• RTL対応（アラビア語、ヘブライ語、ペルシア語）
• カスタムローカライズと翻訳
• 言語切り替え機能の実装

スタイルと外観

📄 参照： references/styling-appearance.md

• 使用可能なテーマ（Fluent、Bootstrap、Tailwind）
• CSSのカスタマイズ
• カスタムCSSクラス
• 行／セルのスタイル設定
• 外観の設定方法
• ダークモード対応

セル

📄 参照： references/cell.md

• セルの選択と操作
• セル値の取得／設定
• セルの書式設定とスタイル設定
• セルテンプレート
• セルのイベントと操作
• セルの一括操作

クリップボード

📄 参照： references/clipboard.md

• コピー／貼り付け機能
• クリップボード操作
• 選択したセルのコピー
• データの貼り付け
• クリップボードの書式設定

アクセシビリティ

📄 読む: references/accessibility.md

• WCAG 2.2 および Section 508 への準拠
• キーボードナビゲーション（Tab、Enter、Escape、矢印キー）
• WAI-ARIA 1.2 の実装
• スクリーンリーダーのサポート（NVDA、JAWS）
• 色のコントラスト比（4.5:1、3:1）
• フォーカスの管理と復元
• 動的な更新に対応する ARIA ライブリージョン
• axe とスクリーンリーダーを使ったアクセシビリティテスト

レスポンシブデザイン

📄 読む: references/responsive-adaptive.md

• レスポンシブなグリッドレイアウト
• モバイルおよびタブレット向けデザイン
• タッチ操作とジェスチャー
• レスポンシブな列（表示／非表示）
• モバイル向けのスタックモード
• 画面サイズに応じたメディアクエリ
• 画面の向きの変更への対応

パフォーマンスの最適化

📄 読む: references/performance-optimization.md

• 大規模なデータセット向けの仮想スクロール
• グループと詳細の遅延読み込み
• データの集計とキャッシュ
• メモリ管理
• パフォーマンスのベンチマーク
• 10k+ 行に対応するベストプラクティス
• リモートデータの最適化

モジュールシステム

📄 読む: references/modules.md

• モジュール注入パターン
• 利用可能なモジュールと機能の対応
• モジュールの依存関係
• バンドル最適化の戦略
• 一般的な機能の組み合わせ
• 動的なモジュール読み込み

データアダプター

📄 読む: references/adaptors.md

• RESTful API 向けの URL／HTTP アダプター
• 標準 OData サービス向けの ODataV4 アダプター
• ASP.NET WebAPI 向けの WebAPI アダプター
• レガシー ASMX Web サービス向けの WebMethod アダプター
• 読み取りと書き込みに別々のエンドポイントを使用する RemoteSave アダプター
• 独自 API 向けのカスタムアダプター
• GraphQL エンドポイント向けの GraphQL アダプター
• アダプターの選択ガイドと比較
• 実装パターンとエラー処理

チャート統合

📄 読む: references/chart-integration.md

• 詳細テンプレートへのチャートの埋め込み
• 複数チャートのダッシュボード
• グリッドとチャートのデータ同期
• インタラクティブなドリルダウンチャート
• リアルタイム更新チャート
• KPI の可視化

API リファレンス

📄 読む: references/api-reference.md

• グリッドのプロパティリファレンス
• メソッドと関数シグネチャ
• イベントリファレンス
• 設定オブジェクト（PageSettings、FilterSettings など）
• 一般的な設定パターン
• 簡単なコード例

プログラムによる制御（メソッド）

📄 読む: references/programmatic-api.md

• グリッドインスタンスのリファレンスとメソッドへのアクセス
• メソッドの必須使用ルール
• データおよびモジュールのメソッド（refresh、dataBind、destroy）
• 行へのアクセスと操作のメソッド（add、update、delete）
• 行選択のメソッド（selectRow、selectRows、getSelectedRecords）
• 列へのアクセスと操作のメソッド（show、hide、reorder）
• 並べ替え、グループ化、フィルターのメソッド
• 編集および一括操作のメソッド
• エクスポートと印刷のメソッド（Excel、PDF、CSV）
• ツールバーと階層のメソッド
• DOM 要素へのアクセスメソッド
• ユーティリティメソッド（イベントリスナー、テンプレート、スピナー）
• 一般的なシナリオ向けの簡単な使用例

---

クイックスタートの例

import { Grid } from '@syncfusion/ej2-grids';

// Sample data
const data = [
  { OrderID: 10248, CustomerName: 'VINET', TotalAmount: 32.38 },
  { OrderID: 10249, CustomerName: 'TOMSP', TotalAmount: 11.61 }
];

// Create grid
const grid = new Grid({
  dataSource: data,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120, type: 'number' },
    { field: 'CustomerName', headerText: 'Customer Name', width: 150 },
    { field: 'TotalAmount', headerText: 'Total Amount', width: 120, type: 'number', format: 'C2' }
  ],
  allowPaging: true,
  pageSettings: { pageSize: 10 },
  allowSorting: true,
  allowFiltering: true,
  selectionSettings: { type: 'Multiple', mode: 'Row' }
});

// Render grid
grid.appendTo('#grid');

---

一般的なパターン

パターン 1：検索機能付きの読み取り専用グリッド

編集せずにデータを表示する場合に使用します。並べ替え、フィルター、検索を有効にします。 読む: references/getting-started.md → references/sorting.md → references/filter-setup.md → references/searching.md

パターン 2：検証機能付きの編集可能なグリッド

ユーザーがデータを変更する必要がある場合に使用します。編集モード、検証、ツールバーを設定します。 読む: references/editing.md → references/validation.md → references/toolbar.md

パターン 3：集計を含むグループ化データ

グループごとに集計データを分析する場合に使用します。グループ化とカスタム集計を設定します。 参照： references/grouping.md → references/aggregates.md

パターン 4：仮想スクロールを使用する大規模データセット

10k+ 行のパフォーマンスを高める場合に使用します。仮想スクロールを有効にします。 参照： references/scrolling.md → references/paging.md

パターン 5：マスター・ディテール階層

ネストされたデータや関連データを表示する場合に使用します。詳細テンプレートを設定します。 参照： references/row.md

パターン 6：データのエクスポート

ユーザーが Excel または PDF にエクスポートする必要がある場合に使用します。 参照： references/excel-export.md → references/pdf-export.md

---

主なプロパティと設定

プロパティ	型	使用例
dataSource	Array/URL	ローカル配列またはリモート URL のグリッドデータをバインドする
columns	ColumnModel[]	列の構造、型、テンプレートを定義する
allowEditing	Boolean	インライン／ダイアログでの行編集を有効にする
allowFiltering	Boolean	列のフィルターバーを有効にする
allowSorting	Boolean	列ヘッダーでの並べ替えを有効にする
allowGrouping	Boolean	列によるグループ化を有効にする
allowPaging	Boolean	ページネーションを有効にする
allowSelection	Boolean	行／セルの選択を有効にする
editSettings	EditSettings	編集モード（インライン／ダイアログ／バッチ）を設定する
filterSettings	FilterSettings	フィルターの種類（メニュー／バー／Excel）を設定する
groupSettings	GroupSettings	グループ化の動作を設定する
pageSettings	PageSettings	ページサイズと種類を設定する
selectionSettings	SelectionSettings	選択モード（行／セル／チェックボックス）を設定する
toolbar	string[]	CRUD 操作用のツールバーを追加する

---