帳票出力でデータの集計や分類を行える「ActiveReportsJS」のテーブル機能
「ActiveReportsJS」ではじめるフロントエンド帳票開発 第2回
ダウンロード サンプルファイル (202.6 KB)
データのグループ化
Tableレポートコントロールでは、特定の条件でデータを集めて、グループ単位で表示できます。図8のサンプルでは、メーカー（データ項目「vendor」）が同じデータをグループ化して表示します。また、前述の集計機能で、グループ単位と、全体での平均価格／在庫数を表示します。
グループを設定するには、まず表を右クリックして、「グループ」-「グループの挿入」を選択します。
次に、グループの基準とするデータ項目を設定します。表の右側に表示される「グループ」欄からグループを選択して、「プロパティ」の「式」で、グループの基準とするデータ項目（ここでは「vendor」）を選択します。
グループを追加すると、グループに対応するヘッダ行とフッタ行が1組増えて表示されるので、グループ単位で表示したい内容（ヘッダ行のタイトルやフッタ行の集計式など）を設定できます。グループ単位とは別に、表全体のヘッダ行とフッタ行も設定できます。
なお、グループは入れ子にして複数設定できます。図12は、メーカー（vendor）の下位に、5G対応（is5G）のグループを設定した例です。基本的な設定方法は1グループの場合と変わりません。詳細はサンプルコード（p003-group-multi/p003-group-multi.rdlx-json）を参照してください。
［補足］Tableを操作するメニュー
Tableの操作時は、帳票デザイナの上部（リボン部分）に「Table」というメニューが表示されます。このメニューは、表、行、列、セルの各選択時で異なる内容が表示され、選択している要素に対する操作が行えます。
この記事は参考になりましたか？
- 「ActiveReportsJS」ではじめるフロントエンド帳票開発連載記事一覧
- この記事の著者
-
WINGSプロジェクト 吉川 英一（ヨシカワ エイイチ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社
この記事は参考になりましたか？
この記事をシェア
