ag-gridでpivot

前回のrow gorupingに続き今回はpivot

• 動作環境

Angular: 5.1.3
ag-grid: 16.0.0

pivot

テーブル定義に追加する

<ag-grid-angular .....
                 [pivotMode]="true"
                 .....
                 .....

columnDefs = [
.....
.....
  {
    field: 'date',
    pivot: true
  }
.....
.....
]

カラム定義は上記のような感じ

この場合日付x集計関数が設定されているカラムに対して掛け合わせた表が表示される

Pivot Tables: Enterprise Grade Feature of our Datagrid

ヘッダー内容

テーブル定義に設定

• ヘッダーの名称(sumとか出したくない)

suppressAggFuncInHeaderをテーブル定義に設定する

<ag-grid-angular .....
                 .....
                 suppressAggFuncInHeader
                 .....
                 .....

でカラムヘッダの文字列が

Sum(Imp)

から

Imp

になる

pivot使用時の合計計算

processSecondaryColDef

デフォルトだとpivotで生成されたカラムのfieldはpivot_1,pivot_2といった感じで区別がつけづらい感じになっている

processSecondaryColDefに関数を定義してあげることで任意の設定を追加したりfield名を変えたりすることができる

合わせ技で一意のIDを付与することでカラムが何かわかりやすくし、計算をやりやすくすることができる

  public processSecondaryColDef(colDef){
    const date = colDef.pivotKeys[0];
    const metric = colDef.pivotValueColumn.colId;

    colDef.field = `${date}_${metric}`;
    colDef.colId = `${date}_${metric}`;
  }

colDefがカラム定義、カラム定義の他の設定内容を元に定義を書き換えることができる

例ではpivotにdateを指定しているので生成されるカラム定義のfield,colIdを書き換えている

例えば2018-04-01_impのようなfield,colIdになる

これの何が嬉しいかというとグループ化の時に調べたgroupRowAggNodesでカラムを区別することができるようになる

secondaryカラムへのフィルタ

そもそもsecondaryとは、グルーピングやピボットなどを使用した際に計算されて算出された行たちのことをag-gridではsecondaryと呼んでいるよう

逆に計算の元データはprimaryと呼ばれている

カラムのオプションでfilterValueGetterを指定することでフィルタ対象のvalueを返してあげる

これは前回のグループ化の時に紹介した

感想

前回のrow groupingとpivotを組み合わせれば結構色々なことができそう