syncfusion-blazor-pivot-table

Syncfusion Blazor Pivot Table

Syncfusion Blazor Pivot Table（SfPivotView）は、行、列、値、フィルターの各軸にわたってデータを整理、集計、可視化できる強力な多次元データ分析コンポーネントです。Excel のピボットテーブルと同様に使用できます。リレーショナルデータ（JSON/IEnumerable）と OLAP キューブに対応しており、フィールドリストやグループ化バーなど、実行時に操作できるコントロールを備えています。

⚠️ 重要： API のクラス名、プロパティ、メソッドのシグネチャは、必ずこのスキルのリファレンスファイル（references/*.md）で確認してください。これらのファイルには、検証済みの動作する例が記載されています。他の情報源に基づいて API の詳細を推測しないでください。

⚠️ セキュリティに関する警告：データソースの検証

重大なセキュリティに関する通知： ピボットテーブルを実装する際は、必ず信頼できるデータソースを使用してください。適切な検証とサニタイズを行わずに、信頼できない URL やユーザーが提供した URL からデータを取得したり、データをバインドしたりしないでください。

セキュリティのベストプラクティス：

1. ローカルデータを使用する： セキュリティを最大限に高めるため、ローカルのインメモリデータソースを優先します
2. リモートソースを検証する： 自身が管理する、認証済みかつ認可済みの API エンドポイントにのみ接続します
3. ユーザー入力をサニタイズする： ユーザーが任意の URL やデータソースを指定できるようにしないでください
4. 認証を実装する： 必ず認証ヘッダーとセキュアな API エンドポイントを使用します
5. コンテンツを検証する： 外部ソースから受信したすべてのデータを、バインドする前に検証してサニタイズします
6. HTTPS を使用する： リモートデータ接続では必ず HTTPS を使用します
7. レート制限： 不正利用を防ぐため、API エンドポイントにレート制限を実装します

セキュリティリスク：

• 間接的なプロンプトインジェクション： 信頼できないサードパーティのデータに、AI エージェントの動作を操作する悪意のあるコンテンツが含まれている可能性があります
• データの流出： 悪意のあるデータソースが機密情報の抽出を試みる可能性があります
• コードインジェクション： 信頼できないデータにスクリプトや有害なコンテンツが含まれている可能性があります

推奨する方法：

✅ 実施する： 管理下にある、認証済みのバックエンド API を使用します ✅ 実施する： サーバー側のデータ検証を実装します ✅ 実施する： API エンドポイントには設定ファイルを使用します ✅ 実施する： 許可するデータソースをホワイトリストに登録します

❌ 実施しない： ユーザーが提供した URL を受け入れないでください ❌ 実施しない： 公開された信頼できないエンドポイントにバインドしないでください ❌ 実施しない： データの検証とサニタイズを省略しないでください ❌ 実施しない： 機密データに HTTP を使用しないでください

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

• Blazor WASM、Server、または MAUI アプリに SfPivotView を実装する場合
• JSON、リモート、または OLAP データを使用して PivotViewDataSourceSettings を設定する場合
• フィールドリスト、グループ化バー、集計、または計算フィールドを使用する場合
• ピボットデータにフィルター、並べ替え、またはグループ化を適用する場合
• ピボットテーブルで編集、エクスポート（Excel/PDF）、またはツールバーを有効にする場合
• ピボットグラフをグリッドと一緒に、またはグリッドの代わりに表示する場合
• 仮想スクロール、ページング、またはサーバーサイドエンジンを使用してピボットのパフォーマンスを最適化する場合
• 数値書式や条件付き書式、ドリルダウン、ドリルスルーを適用する場合
• ピボットの状態を永続化する場合、またはピボットイベントを処理する場合
• AI を活用した Smart Pivot 機能を構築する場合

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージをインストールし、サービスを登録して、CSS/JS を追加する
• Blazor WASM、Server、または MAUI アプリで SfPivotView を初期化する
• サンプルデータを割り当て、行／列／値／フィルターの各軸を設定する
• 最小限の実用例

データバインディング

📄 参照： references/data-binding.md

• ローカルの JSON/IEnumerable データをバインドする
• JsonAdaptor、WebApiAdaptor、ODataV4Adaptor を使用して SfDataManager を利用する
• リモートデータバインディングのパターンと遅延読み込み

OLAP データソース

📄 参照： references/olap.md

• Microsoft SQL Server Analysis Services（SSAS）OLAP キューブに接続する
• OLAP キューブの要素（階層、メジャー、ディメンション、名前付きセット）を設定する
• 計算フィールドと MDX 式
• 認証とロールベースのアクセス
• OLAP 固有の機能：フィールドリスト、グループ化バー、仮想スクロール

データベースへの接続

📄 参照: references/connecting-to-data-sources.md

• SQL Server、MySQL、PostgreSQL、MongoDB、Oracle、Snowflake、Elasticsearch に接続します
• Blazor 向けのサーバーサイドデータサービスのパターン
• 接続文字列の設定とアダプターの構成

フィールドリスト

📄 参照: references/field-list.md

• 組み込み（ポップアップ）またはスタンドアロンのフィールドリストを有効にします
• フィールドのカスタマイズ：キャプション、表示設定、ドラッグ動作
• フィールドをまとめて変更する際にレイアウトの更新を遅延させます

グループ化バー

📄 参照: references/grouping-bar.md

• ShowGroupingBar を有効にして、ドラッグ＆ドロップでフィールドを管理します
• 実行時にフィールドのフィルター、並べ替え、削除を行います
• グループ化バーの外観と動作をカスタマイズします

集計

📄 参照: references/aggregation.md

• すべての SummaryTypes（Sum、Count、Avg、Min、Max、合計に対する割合など）
• PivotViewValue.Type で値フィールドごとに集計を設定します
• DifferenceFrom、PercentageOfDifferenceFrom、RunningTotals

計算フィールド

📄 参照: references/calculated-field.md

• UI ダイアログまたは PivotViewCalculatedFieldSettings を使用して、数式ベースのカスタムフィールドを作成します
• 値軸に計算フィールドを表示します
• ダイアログをプログラムで開きます

フィルタリング

📄 参照: references/filtering.md

• メンバーのフィルタリング（含める／除外する）、ラベルフィルタリング、値フィルタリング
• PivotViewFilterSettings を使用したプログラムでのフィルター設定
• 日付フィルターと OLAP フィルタリング

並べ替え

📄 参照: references/sorting.md

• メンバーの並べ替え（昇順／降順）に EnableSorting を有効にします
• PivotViewSortSettings を使用したプログラムでの並べ替え
• 列ヘッダーをまたいだ値の並べ替え

グループ化

📄 参照: references/grouping.md

• 数値のグループ化（範囲）、日付のグループ化（年／四半期／月／日）、カスタムグループ化
• AllowGrouping と右クリック UI を有効にします
• プログラムでグループ化を構成します

ドリルダウン

📄 参照: references/drill-down.md

• メンバー階層を展開／折りたたみます
• ExpandAll を設定して、読み込み時にすべてのレベルを表示します
• ドリル操作をプログラムで行います

ドリルスルー

📄 参照: references/drill-through.md

• ドリルスルーポップアップで、値セルの背後にある生データを表示します

編集

📄 参照: references/editing.md

• PivotViewCellEditSettings を有効にして、生データの CRUD を行います
• 編集モード：Normal、Dialog、Batch、Command Columns
• インライン編集；確認ダイアログで追加／更新／削除を行います

書式設定

📄 参照: references/formatting.md

• PivotViewFormatSettings を使用した数値の書式設定（N、C、P、カスタム）
• PivotViewConditionalFormatSettings を使用した条件付き書式設定
• ツールバーから実行時に書式設定を適用します

レイアウトと表示

📄 参照: references/layout-and-display.md

• コンポーネントの幅／高さ、クラシックレイアウト
• 行／列のカスタマイズ（固定ヘッダー、列幅、自動調整）
• 総計と小計の表示／非表示
• セル内のハイパーリンク、ツールチップ

ツールバー

📄 参照: references/tool-bar.md

• 組み込み項目（Grid、Chart、Export、Formatting、Field List）を備えた ShowToolbar を有効にします
• カスタムツールバー項目とイベント処理
• レポート管理（保存、読み込み、名前変更、削除）

Excel エクスポート

📄 参照: references/excel-export.md

• Excel エクスポート：ExportToExcelAsync、スタイル設定、カスタムファイル名
• CSV エクスポート、メモリストリームとしてのエクスポート
• ツールバーまたはプログラムからエクスポートします

PDF エクスポート

📄 参照: references/pdf-export.md

• PDF エクスポート：ExportToPdfAsync、ページ設定、テーマ
• テーブルとともにチャートをエクスポートします

パフォーマンスの最適化

📄 参照： references/performance-best-practices.md

• 大規模なデータセットには仮想スクロール（EnableVirtualization）
• 仮想化の代替としてページング（PivotViewPageSettings）
• データ圧縮、レイアウト更新の遅延
• WebAssembly 固有の最適化
• 計算をオフロードするサーバー側ピボットエンジン

ピボットチャート

📄 参照： references/pivot-chart.md

• チャートのみ、グリッドのみ、または両方を表示（PivotViewDisplayOption）
• PivotChartSettings による 15 種類以上のチャートタイプ
• チャートでのドリルダウン、複数の軸、チャートのエクスポート

状態の永続化とイベント

📄 参照： references/state-and-events.md

• EnablePersistence によるブラウザーのローカルストレージへの自動保存
• レイアウトをプログラムで保存／読み込み（GetPersistDataAsync / LoadPersistDataAsync）
• 主なイベントのリファレンス：BeforeColumnsRender、CellClick、DrillThrough、OnLoad

Smart Pivot（AI）

📄 参照： references/smart-pivot.md

• AI を活用した機能向けの Syncfusion.Blazor.AI NuGet
• スマートデータ集計、予測モデリング、適応型フィルタリング
• OpenAI、Azure OpenAI、または Ollama を設定

クイックスタートの例

@using Syncfusion.Blazor.PivotView

<SfPivotView TValue="ProductDetails" Height="350">
    <PivotViewDataSourceSettings DataSource="@data" EnableSorting="true">
        <PivotViewColumns>
            <PivotViewColumn Name="Year"></PivotViewColumn>
        </PivotViewColumns>
        <PivotViewRows>
            <PivotViewRow Name="Country"></PivotViewRow>
            <PivotViewRow Name="Products"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
        </PivotViewValues>
        <PivotViewFormatSettings>
            <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping="true"></PivotViewFormatSetting>
        </PivotViewFormatSettings>
    </PivotViewDataSourceSettings>
</SfPivotView>

@code {
    public List<ProductDetails> data { get; set; }
    protected override void OnInitialized()
    {
        data = ProductDetails.GetProductData().ToList();
    }
}

よく使われるパターン

フィールドリストとグループ化バーを有効にする

<SfPivotView TValue="ProductDetails" ShowFieldList="true" ShowGroupingBar="true">

エクスポート機能付きのツールバーを有効にする

<SfPivotView TValue="ProductDetails" ShowToolbar="true"
             Toolbar="@toolbar" AllowExcelExport="true" AllowPdfExport="true">
@code {
    public List<ToolbarItems> toolbar = new List<ToolbarItems> {
        ToolbarItems.Grid, ToolbarItems.Chart, ToolbarItems.Export,
        ToolbarItems.SubTotal, ToolbarItems.GrandTotal, ToolbarItems.FieldList
    };
}

大規模なデータ向けの仮想スクロール

<SfPivotView TValue="MyData" EnableVirtualization="true" ShowTooltip="false"
             Width="100%" Height="500">

ピボットチャートのみを表示する

<SfPivotView TValue="ProductDetails">
    <PivotViewDisplayOption View=View.Chart></PivotViewDisplayOption>
    <PivotChartSettings Title="Sales Analysis">
        <PivotChartSeries Type=ChartSeriesType.Column></PivotChartSeries>
    </PivotChartSettings>
</SfPivotView>

主なプロパティ

プロパティ	型	目的
TValue	Generic	データ行のモデル型
Height / Width	string/int	コンポーネントの寸法
ShowFieldList	bool	ポップアップフィールドリストを有効にする
ShowGroupingBar	bool	グループ化バーを有効にする
ShowToolbar	bool	ツールバーを有効にする
EnableVirtualization	bool	仮想スクロール
AllowGrouping	bool	日付／数値のグループ化を有効にする
AllowCalculatedField	bool	計算フィールドを有効にする
AllowExcelExport	bool	Excel へのエクスポートを有効にする
AllowPdfExport	bool	PDF へのエクスポートを有効にする
AllowEditing	bool（PivotViewCellEditSettings 内）	CRUD 編集を有効にする
EnablePersistence	bool	状態を localStorage に保存する