ReoGrid ReoGrid Web

ピボットテーブル

v1.4.0 から、ワークシートはピボットテーブルを描画できます — 元データ範囲を行・列フィールドで集計したクロス集計を、元データの変更に応じて再計算されるライブなブロックとして書き出します。

Note: ピボットテーブルは Pro 版で利用可能です。

ピボットの作成

PivotDefinition を元データ範囲(先頭行がフィールドヘッダー)に向け、出力のアンカーセルを選び、行・列・値フィールドを指定します。

import { createReogrid } from '@reogrid/pro'

const grid = createReogrid({ workspace: '#app' })
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

createPivotPivotHandle を返します。出力セルはロックされ、既定で総計の行と列が追加されます。

PivotDefinition

フィールド既定値説明
sourceRangePosition元データ範囲。source.row がヘッダー行。
anchor{ row, column }出力ブロックの左上セル。
rows{ field: string }[][]行軸フィールド(ヘッダー名で指定)。
columns{ field: string }[][]列軸フィールド。
values{ field, agg, caption?, numberFormat? }[]集計対象の値フィールド。
filters{ field, include?: string[] }[]fieldinclude に含まれるレコードだけを残す。
layout'tabular''tabular'出力レイアウト(v1 は 'tabular' のみ)。
showRowGrandTotalsbooleantrue右側の総計列。
showColumnGrandTotalsbooleantrue下部の総計行。
idstring自動安定した id(省略時は自動割り当て)。

集計タイプ

各値フィールドの agg は次のいずれかです。

'sum' · 'count' · 'countNumbers' · 'average' · 'max' · 'min' · 'product'

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 のレコードのみ
})

ハンドルの操作

PivotHandle はワークシートへ委譲する薄いステートレスなハンドルです。

pivot.update({ columns: [{ field: 'Quarter' }] }) // 変更をマージして再計算
pivot.refresh()                                    // 元データから強制的に再計算
pivot.definition                                   // 現在の解決済み定義
pivot.bounds                                       // 出力矩形、または null
pivot.remove()                                     // ブロックを消去してピボットを破棄

同等のメソッドは id 指定でワークシートにもあります:ws.getPivot(id)ws.getPivots()ws.getPivotBounds(id)ws.updatePivot(id, partial)ws.refreshPivot(id)ws.removePivot(id)

既知の制限:構造変更後は refresh が必要

ピボットは sourceanchor を固定範囲として保持します。行・列の挿入・削除では保持された範囲がシフトしないため、構造変更後はピボットが誤ったセルを読むことがあります。挿入・削除の後は refreshPivot(または pivot.refresh())を呼んで元データを読み直してください。

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

既存の元データ範囲内の値を編集した場合はピボットがライブに再計算されます — 手動 refresh が必要なのは構造的な挿入・削除だけです。

関連項目

ニュースレター

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

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