syncfusion-vue-grid

Vue Grid コンポーネントの実装

Syncfusion Vue Grid は、Vue 2 および Vue 3 向けのエンタープライズグレードのデータテーブルコンポーネントで、高度なデータの可視化および操作機能を提供します。レスポンシブで機能豊富なデータアプリケーションを作成するうえで欠かせません。

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

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

目次

• このスキルを使用する場面
• コンポーネントの概要
• ドキュメント一覧
• クイックスタートの例
• 一般的なパターン
• 主要な Props のリファレンス
• 主なユースケース
• モジュールのインジェクション

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

次のような場合に、このスキルを使用します。

• 高度な操作機能を備えた表形式のデータを表示、管理する
• CRUD（作成、読み取り、更新、削除）操作を実装する
• 並べ替え、フィルタリング、グループ化が可能な、機能豊富なデータテーブルを構築する
• データを可視化するレスポンシブなダッシュボードを作成する
• グリッドをさまざまなデータソース（ローカル、API、データベース）に接続する
• 複数の形式（Excel、PDF、CSV）にデータをエクスポートする
• 仮想スクロールとパフォーマンス最適化を備えたリアルタイムグリッドを実装する

コンポーネントの概要

Vue Grid は Syncfusion の Essential JS 2 フレームワーク上に構築され、次の機能を提供します。

• データバインディング：DataManager によるローカルおよびリモートデータソース
• 列の管理：型定義、テンプレート、並べ替え、サイズ変更、固定
• データ操作：並べ替え、フィルタリング（複数のモード）、グループ化、集計
• 選択：行、セル、列、チェックボックスによる選択モード
• 編集：インライン編集、ダイアログ編集、一括編集と検証
• エクスポート：テンプレートを使用した Excel、PDF、CSV へのエクスポート
• テンプレート：カスタムの行、セル、ヘッダーテンプレート
• パフォーマンス：仮想スクロール、無限スクロール、イミュータブルモード
• UI 機能：コンテキストメニュー、ツールバー、状態管理、クリップボード
• 国際化：ローカライズ、RTL 対応、複数の形式
• アクセシビリティ：WCAG 準拠、キーボード操作

ドキュメント一覧

はじめに

📄 参照： references/getting-started.md

• インストールとセットアップ（Vue 2 および Vue 3）
• パッケージの構成
• Quasar Framework のセットアップ
• CSS テーマのインポート
• 最初のコンポーネントの作成
• コア機能の有効化

データバインディング

📄 参照： references/data-binding.md

• ローカルデータバインディング
• リモートデータバインディング
• DataManager アダプター
• CRUD 操作
• 読み込みインジケーター
• リアルタイム更新
• データの更新と再読み込み
• オフラインモード
• イミュータブルモード
• タイムゾーンの処理
• エクスポート操作

アダプターへの接続

📄 参照： references/adaptors.md

• URL アダプター
• ODataV4 アダプター
• Web API アダプター
• GraphQL アダプター
• Web メソッドアダプター
• RemoteSave アダプター
• カスタムアダプターの構成

Grid の機能モジュール

📄 参照： references/module.md

• モジュールとは
• モジュールの一覧
• デフォルトでインジェクションされるモジュール
• モジュールのインジェクション例
• 機能の依存関係

Vue 2 の構成

📄 参照： references/vue2.md

• 列
• 行
• セル
• アダプティブ UI
• モジュール
• パフォーマンスの最適化
• データバインディング（Vue 2）
• 編集
• 並べ替え
• グループ化
• フィルタリング
• スクロール
• 検索
• ページング
• 選択
• エクスポート操作
• 集計
• 印刷
• 階層バインディング
• 状態管理
• ツールバー

列

📄 参照： references/columns.md

• 列のデータ型
• 列の幅
• 列の書式設定
• フィールドのマッピング
• 列のレンダリング
• 列のテンプレート
• 列ヘッダー
• 外部キー列
• 列の選択メニュー
• 列メニュー
• 列の並べ替え
• 列のサイズ変更
• 行と列の結合

列の固定

📄 参照： references/frozen.md

• 列の固定
• 固定方向（左、右、両方）
• プログラムによる固定／固定解除
• 分割ビューの設定

セル

📄 参照： references/cell.md

• セルのスタイル設定
• セルの内容
• セルの折り返しとクリッピング
• セルのツールチップ
• グリッド線
• セルイベント
• セルの書式設定

クリップボード

📄 参照： references/clipboard.md

• クリップボードへのコピー機能
• ヘッダー付きでコピー
• 外部ボタンからのコピー
• ドラッグによるオートフィル
• 貼り付け操作
• キーボードショートカット（Ctrl+C、Ctrl+Shift+H）

行

📄 参照： references/rows.md

• 行データの型
• 行のスタイル設定
• 行の高さ
• 行テンプレート
• 詳細テンプレート
• 行のドラッグ＆ドロップ
• 行の結合
• 行のピン留め
• 行の選択

フィルタリング

📄 参照： references/filtering.md

• 基本的なフィルタリング
• フィルターバー
• フィルターメニュー
• Excel 風のフィルター
• チェックボックスフィルター
• フィルターの設定
• ダイアクリティカルマークのフィルター
• フィルタリングイベント
• 一般的なフィルタリングパターン

並べ替え

📄 参照： references/sorting.md

• 基本的な並べ替え
• 並べ替えの方向
• 複数列の並べ替え
• 外部キーによる並べ替え
• カスタム並べ替え比較関数
• 文化圏に基づく並べ替え
• プログラムによる並べ替え
• 並べ替えイベント
• タッチおよびジェスチャーによる並べ替え
• 並べ替えアイコンのカスタマイズ

ページング

📄 参照： references/paging.md

• ページングの設定
• ページサイズのオプション
• ページャーのカスタマイズ
• ページャーの位置
• ページ移動
• カスタムページャーテンプレート

スクロール

📄 参照： references/scrolling.md

• 基本的なスクロール
• 仮想スクロール
• 無限スクロール
• 列の仮想化
• スティッキーヘッダー
• スクロールバーのカスタマイズ
• パフォーマンスのチューニング
• 高度なスクロール

パフォーマンスのベストプラクティス

📄 参照： references/performance.md

• 大規模なデータセットでの読み込みパフォーマンスの向上
• 大規模なデータセットでのページング
• 行の仮想化
• 無限スクロール
• 列の仮想化
• テンプレートによるレンダリングの最適化
• CRG の最適化
• サーバー側でのデータ操作
• 大規模な JSON ペイロードの処理
• Excel エクスポートの制限

編集

📄 参照： references/editing.md

• 編集の有効化
• 編集モード（通常、ダイアログ、バッチ、テンプレート）
• 編集タイプ（テキスト、数値、ドロップダウン、日付）
• インライン編集
• ダイアログ編集
• バッチ編集
• テンプレート編集
• サーバーへの保存
• 高度な編集

列の検証

📄 参照： references/validation.md

• 必須フィールドの検証
• 数値の検証
• メールアドレスの検証
• 最小文字数の検証
• カスタム検証ルール
• ドロップダウンの変更に基づくカスタム検証
• 検証ルールの動的な追加または削除
• 重複行の防止

コマンド列の編集

📄 参照： references/command-column.md

• 基本的なコマンド列
• カスタムコマンド列
• CRUD 操作ボタン（編集、削除、保存、キャンセル）
• カスタムコマンドハンドラー
• ボタンの外観とアイコンのカスタマイズ

グループ化

📄 参照： references/grouping.md

• 基本的なグループ化
• 特定の列のグループ化を防止
• 複数レベルのグループ化
• グループ化した列の並べ替え
• グループ化とページング
• グループキャプションテンプレート
• 書式によるグループ化
• グループの折りたたみ／展開
• プログラムによるグループ化
• グループ化した列の並べ替え
• グループの遅延読み込み
• グループ化イベント

集計

📄 参照： references/aggregates.md

• 基本的な集計
• 集計の種類（合計、平均、件数、最大、最小）
• フッター集計
• グループ集計
• カスタム集計
• リアクティブ集計
• 複数の集計

選択

📄 参照： references/selection.md

• 行の選択
• セルの選択
• 列の選択
• チェックボックスによる選択
• 複数選択
• キーボードショートカット
• 選択イベント

階層バインディング

📄 参照： references/hierarchical-binding.md

• マスターディテールグリッド
• 子グリッドの設定
• 詳細テンプレート
• 展開と折りたたみ
• 階層イベント

状態管理

📄 参照： references/state-management.md

• グリッドの状態
• 状態の保存
• 状態の復元
• ローカルストレージへの永続化
• イミュータブルモード

ツールバー

📄 参照： references/toolbar.md

• ツールバーの設定
• 組み込みツールバー項目（エクスポート、編集、削除、検索）
• カスタムツールバー項目
• ツールバーの配置
• ツールバー項目の有効化または無効化
• CSS によるツールバーのカスタマイズ

コンテキストメニュー

📄 参照： references/context-menu.md

• コンテキストメニューの有効化
• 左クリックのコンテキストメニュー
• メニュー項目の有効化／無効化
• メニュー項目の表示／非表示
• カスタムメニュー項目
• メニューイベント
• 実践例

印刷

📄 参照： references/printing.md

• 印刷の有効化
• 印刷ツールバーの設定
• 印刷モード（すべて、現在のページ、選択項目）
• 印刷のカスタマイズ
• 印刷イベント

Excel エクスポート

📄 参照： references/excel-export.md

• 基本的な Excel エクスポート
• エクスポートオプション（選択項目、現在のページ、すべてのデータ）
• エクスポートのカスタマイズ
• スタイルと書式設定
• 高度な機能
• CSV エクスポートの制限事項

PDF エクスポート

📄 参照： references/pdf-export.md

• 基本的な PDF エクスポート
• エクスポートオプション（選択項目、現在のページ、すべてのデータ）
• エクスポートのカスタマイズ
• ヘッダーとフッターの設定
• 高度な機能

検索

📄 参照： references/searching.md

• 検索機能の有効化
• 検索バーの設定
• プログラムによる検索
• 検索イベント
• 高度な検索

グローバル化

📄 参照： references/globalization.md

• ロケール設定（50 以上の言語）
• 翻訳の読み込み
• 数値の書式設定
• 日付の書式設定
• 国際化
• RTL サポート（アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語）
• カスタム翻訳
• 実践例

アクセシビリティ

📄 参照： references/accessibility.md

• WAI-ARIA 属性
• キーボード操作
• カスタムキーボードショートカット
• キーのデフォルト動作の防止
• スクリーンリーダーのサポート
• WCAG 準拠

スタイルと外観

📄 参照： references/style-and-appearance.md

• テーマの選択（Material、Bootstrap、Fluent、Tailwind）
• CSS スタイリング
• セルのスタイル設定
• 行のスタイル設定
• ヘッダーのスタイル設定
• ページングのスタイル設定
• 並べ替えのスタイル設定
• フィルタリングのスタイル設定
• グループ化のスタイル設定
• ツールバーのスタイル設定
• 編集のスタイル設定
• 集計のスタイル設定
• 選択のスタイル設定
• レスポンシブデザイン
• ダークモード

アダプティブ UI

📄 参照： references/adaptive.md

• アダプティブ UI の有効化
• アダプティブレンダリングモード（詳細、グリッド、両方）
• 仮想化を使用したアダプティブ UI
• モバイルデバイスの処理
• レスポンシブ列
• アダプティブ詳細テンプレート

グリッドのプロパティ

📄 参照： references/grid-properties.md

• すべてのプロパティの概要
• データ管理プロパティ
• 表示プロパティ
• 機能フラグと切り替え設定
• 設定プロパティ
• 高度な機能のプロパティ
• ステータスプロパティ
• 動作プロパティ
• モジュールの参照

グリッドイベント

📄 参照： references/grid-events.md

• データバインディングイベント
• アクションイベント
• 編集イベント
• 選択イベント
• 列イベント
• 並べ替えとフィルタリングのイベント
• グループ化イベント
• 行イベント
• セルイベント
• エクスポートと印刷のイベント
• メニューイベント
• テンプレートイベント
• バッチモードイベント
• ライフサイクルイベント

グリッドのメソッド

📄 参照： references/grid-methods.md

• レコード管理メソッド
• セルと行のメソッド
• 選択メソッド
• 列のメソッド
• 並べ替えとフィルタリングのメソッド
• グループ化のメソッド
• ページングのメソッド
• エクスポートと印刷のメソッド
• データバインディングのメソッド
• 検索メソッド
• 編集メソッド
• テンプレートとライフサイクルのメソッド
• UI 制御メソッド
• ユーティリティメソッド

Jest による Vue グリッドのテスト

📄 参照： references/test-case.md

• Jest 環境の設定
• Grid コンポーネントの追加
• テストケースの作成
• スナップショットテスト
• DOM テスト
• テストの実行

クイックスタートの例

<template>
  <div id="app">
    <ejs-grid :dataSource="data" :allowPaging="true" :allowSorting="true" :allowFiltering="true">
      <e-columns>
        <e-column field="OrderID" headerText="Order ID" textAlign="right" width="100"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="100"></e-column>
        <e-column field="OrderDate" headerText="Order Date" type="date" format="yMd" width="130"></e-column>
        <e-column field="Freight" headerText="Freight" type="number" format="C2" width="100"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>

<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page, Sort, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import { provide } from 'vue';

provide('grid', [Page, Sort, Filter]);
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material3.css";
</style>

よく使われるパターン

パターン 1：CRUD 操作を備えたグリッド

1. editSettings（allowEditing、allowAdding、allowDeleting）を有効にします
2. Edit、Add、Delete、Update、Cancel の項目で toolbar を設定します
3. isPrimaryKey: true で主キーを設定します
4. サーバー更新のために actionComplete イベントを処理します
5. 大規模なデータセットには allowPaging を使用します

パターン 2：フィルタリングと並べ替えに対応したデータ駆動型グリッド

1. dataSource をリモートデータを使う DataManager にバインドします
2. allowSorting と allowFiltering を有効にします
3. 適切なフィルター UI を表示するために、列の type を設定します
4. デフォルトのフィルターには filterSettings を使用します
5. toolbar: ['Search'] で検索を有効にします

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

1. allowGrouping を有効にし、Group モジュールを注入します
2. 列名を指定して groupSettings を設定します
3. 集計列を含む e-aggregates を追加します
4. 集計値の表示には footerTemplate を定義します
5. グループヘッダーには groupCaptionTemplate を使用します

主要な Props リファレンス

必須の Grid Props：

• dataSource - データソース（配列、DataManager、または URL）
• allowPaging - ページングを有効にします（boolean）
• pageSettings - ページャーの設定
• allowSorting - 並べ替えを有効にします（boolean）
• allowFiltering - フィルタリングを有効にします（boolean）
• allowGrouping - グループ化を有効にします（boolean）
• allowSelection - 行の選択を有効にします（boolean）
• selectionSettings - 選択の設定
• editSettings - CRUD の設定
• toolbar - ツールバー項目
• height - グリッドの高さ（ピクセルまたはパーセンテージ）
• enableVirtualization - 仮想スクロール

列の Props：

• field - データフィールドのバインディング
• headerText - 列ヘッダーのテキスト
• width - 列幅（ピクセルまたはパーセンテージ）
• type - 列のデータ型（string、number、date、boolean、checkbox）
• isPrimaryKey - 主キー列の識別子
• allowSorting - 列の並べ替えを許可します
• allowFiltering - 列のフィルタリングを許可します
• template - カスタムセルテンプレート
• editTemplate - カスタム編集テンプレート

主なユースケース

1. E コマースの商品管理：並べ替え、フィルタリング、編集、Excel エクスポートに対応した商品を表示します
2. 財務レポート：カテゴリ別にデータをグループ化し、集計値（合計、平均）を表示して、PDF にエクスポートします
3. CRM ダッシュボード：複数列のフィルタリング、一括操作のための行選択、仮想スクロール
4. パフォーマンス監視：グリッドをリアルタイムで更新し、10K 行以上のデータには仮想スクロールを使用します
5. 管理パネル：検証機能を備えたインライン編集、階層データ、状態の永続化
6. データ分析：複雑なグループ化、集計、カスタム可視化のためのテンプレート
7. 在庫管理システム：一括編集、検索、エクスポート、データベース接続
8. アンケート／フォームの収集：ダイアログ編集、カスタムバリデーター、PDF エクスポート

---

モジュールの注入

高度な機能のほとんどは、provide セクションでのモジュール注入が必要です。

provide('grid', [
  Page,           // Paging
  Sort,           // Sorting
  Filter,         // Filtering
  Search,         // Search feature
  Group,          // Grouping
  Aggregate,      // Aggregates
  Edit,           // CRUD editing
  ExcelExport,    // Excel export
  PdfExport,      // PDF export
  Resize,         // Column resize
  Reorder,        // Column reorder
  ColumnMenu,     // Column menu
  Selection,      // Row selection
  Toolbar,        // Toolbar
  CommandColumn   // Command column
])