SpreadJS テーブルシート入門7 複数のグループ化

このシリーズでは、SpreadJS（スプレッドJS）に搭載の「テーブルシート」機能について基本的な使い方や便利な応用例などをご紹介します。今回はテーブルシートによる「複数のグループ化」を解説します。

グループの中でさらにグループ化を行う

テーブルシートは、こちらの記事でご紹介した単一のグループ化だけでなく、グループの中でさらにグループ化を行う「複数のグループ化」にも対応しています。

以下に示すのはその実装例です。このコードは「テーブルシート入門4」でご紹介したグループ化設定に、複数のグループ化を行うための設定（コード強調部分）を追加したものになります。

// groupByメソッド使い、複数のグループ化を設定します
tableSheet.groupBy([
　　 /* 1つ目のグループ化設定 */
    {
      caption: "カテゴリ",
      field: "categoryName",
      width: 150
    }, 
　　/* 2つ目のグループ化設定 */
    {
      caption: "製品名",
      field: "productName",
      width: 150,
    }
]);

ポイントとなるのはコード内の強調部分です。groupByメソッドの引数に対し、単一のグループ化を行う場合と同じやり方でもう1つ、グループ化設定を追加することで「複数のグループ化」を実現できます。

上記のコードの実行例を次に示します（“Run Project”をクリックするとデモが起動します）。「カテゴリ」ごとにグループ化されたデータ内で、さらに「製品名」によるグループ化が行われていることがご確認いただけます。

集計やスライスとの併用も可能

本連載の第5回、第6回では、グループ集計やスライスといった機能をご紹介しました。テーブルシートにおけるグループ化機能の1つとして提供されるこれらの機能は、もちろん、複数のグループ化を行った場合にもお使いいただけます。

例えば以下に示すのは、上記のサンプルにおける「製品名」グループに対して集計を行い、受注年によるスライスを適用した例です。

// groupByメソッド使い、複数のグループ化を設定します
tableSheet.groupBy([
    /* 1つ目のグループ化設定 */
    {
     caption: "カテゴリ",
     field: "categoryName",
     width: 150
    }, 
    /* 2つ目のグループ化設定 */
    {
     caption: "製品名",
     field: "productName",
     width: 150,
     // グループのサマリーフィールドを追加します
     summaryFields: [{
        caption: "受注合計",
        formula: "=SUM([unitsOnOrder])",
        width: 125,
        // スライス（サブ集計）を設定します
        slice: {
            field: "=YEAR([@orderDate])",
            width: 125
        },
     }]
    }
]);

上記のコード実行例を次に示します（“Run Project”をクリックするとデモが起動します）。

このようにして複数のグループ化と、集計やスライスといった機能を組み合わせることにより、テーブルシート上のデータを様々なかたちで見やすく整理して表示することができます。

さいごに

テーブルシート入門シリーズ、第7回はグループのなかでさらにグループ化を行う「複数のグループ化」についてご紹介しました。本シリーズでは引き続きテーブルシートのさまざまな機能をご紹介していくほか、弊社Webサイトではテーブルシートを手軽に試せるデモアプリケーションや無料のトライアル版をご用意していますので、ぜひ、そちらもご確認ください。