ReoGrid ReoGrid Web

ピボットテーブルを作る

ソース範囲を集計し、計算結果をグリッドに書き戻すライブなピボット(クロス集計)を作ります。v1.4 で追加されました。

Pro 限定。 createPivot には有効な licenseKey が必要です。

基本的な使い方

先頭行に見出しを持つソース範囲を指定し、出力ブロックのアンカーセルを選び、行 / 列 / 値のフィールドを宣言します:

import { createReogrid } from '@reogrid/pro';

const grid = createReogrid('#grid', { licenseKey: 'YOUR-LICENSE-KEY' });
const ws = grid.worksheet;

// ソースデータは A1:E201 — 0行目が見出し: Region, Product, Quarter, Channel, Sales
const pivot = ws.createPivot({
  source: { row: 0, col: 0, rows: 201, columns: 5 }, // 左上 + 行数/列数(見出し行を含む)
  anchor: { row: 0, column: 6 },                     // G1 から出力
  rows:    [{ field: 'Region' }],
  columns: [{ field: 'Product' }],
  values:  [{ field: 'Sales', agg: 'sum', numberFormat: '#,##0' }],
});

console.log(pivot.id);     // 安定した id
console.log(pivot.bounds); // 出力が現在占める RangePosition

総計の行と列は既定で追加され(showRowGrandTotals / showColumnGrandTotals)、出力セルはロックされます。

集計方法と複数の値

agg'sum''count''countNumbers''average''max''min''product' のいずれか。値フィールドは複数指定できます:

ws.createPivot({
  source: { row: 0, col: 0, rows: 201, columns: 5 },
  anchor: { row: 0, column: 6 },
  rows:   [{ field: 'Region' }],
  values: [
    { field: 'Sales', agg: 'sum',     caption: '売上合計', numberFormat: '#,##0' },
    { field: 'Sales', agg: 'average', caption: '平均売上', numberFormat: '#,##0.0' },
  ],
});

ピボットに渡すレコードを絞り込む

ws.createPivot({
  source: { row: 0, col: 0, rows: 201, columns: 5 },
  anchor: { row: 0, column: 6 },
  rows:    [{ field: 'Region' }],
  values:  [{ field: 'Sales', agg: 'sum' }],
  filters: [{ field: 'Channel', include: ['Online'] }], // Online のレコードのみ
});

更新・再計算・削除

createPivotPivotHandle を返します:

pivot.update({ columns: [{ field: 'Quarter' }] }); // 変更をマージして再計算
pivot.refresh();                                    // ソースから強制再計算
pivot.remove();                                     // ブロックを消してピボットを破棄

同じ操作は id 指定でワークシート上からも行えます: ws.getPivot(id)ws.getPivots()ws.updatePivot(id, partial)ws.refreshPivot(id)ws.removePivot(id)

構造変更後は再計算する

ピボットは sourceanchor固定範囲として保持します。行・列の挿入や削除ではシフトしません。構造を変更したら、ソースを読み直してください:

ws.insertRows(5, 3);       // 構造変更
ws.refreshPivot(pivot.id); // ソースを読み直して再描画

既存のソース範囲内のを編集した場合はライブに再計算されます。挿入・削除のときだけ手動の再計算が必要です。

関連

ニュースレター

開発の最新情報をお届けします

新しいリリース・機能追加・お知らせをいち早く受け取るには、
メーリングリストにご登録ください。