Pivot Table v2 Plugin#

plugin-chart-pivot-table is the Superset Pivot Table v2 chart. It summarizes data by grouping statistics along two axes (rows and columns) and is registered under the Table category with behaviors InteractiveChart, DrillToDetail, DrillBy.

Key source files:

Data Model#

PivotData is the core data model. On construction it iterates every record and populates a nested tree keyed by flatKey(rowKey) / flatKey(colKey). flatKey joins an array of attribute values with a null-byte delimiter to produce stable, unique string keys — these same keys drive expand/collapse state.

When subtotals are enabled (rowEnabled / colEnabled), the model registers partial-length keys (e.g., a 1-element key for a 3-level hierarchy) so subtotal rows/columns can be shown independently of leaf data 1.

PivotTableChart.tsx unpivots the raw data by expanding each record × each metric into a separate row keyed by METRIC_KEY, before handing it to PivotData.

Hierarchical Expand / Collapse#

Expand/collapse state is held entirely in TableRenderer local state as two plain objects: collapsedRows and collapsedCols. Keys are flatKey strings; a truthy value means that key is collapsed.

Four state-mutation methods control this:

At render time, visibleKeys() filters the full key list to only those not hidden by a collapsed ancestor: a key is hidden if any prefix of it appears in the collapsed map. Subtotal keys (shorter-than-full-depth keys) are shown only when their children are collapsed or hideOnExpand is false.

The axis-label header row shows a collapse/expand toggle arrow next to each attribute name (when subtotals are enabled and the attribute is not the leaf level). Clicking it calls collapseAttr or expandAttr depending on whether the next depth is currently visible.

Visual Indicators#

Arrow icons for collapsed/expanded state are customizable. PivotTableChart.tsx overrides the defaults with Ant Design icons wrapped in theme-aware styled components:

• StyledPlusSquareOutlined — shown on a collapsed node
• StyledMinusSquareOutlined — shown on an expanded node

Both use theme.colors.grayscale.light2 for their stroke and stroke-width: 16px. These are passed into PivotTable via subtotalOptions.arrowCollapsed / arrowExpanded.

The fallback (when not overridden) is Unicode ▲ / ▼ 2.

displayHeaderCell() wraps toggle-able cells in a .toggle-wrapper span containing a .toggle button (the arrow) and a .toggle-val span (the label). Non-toggleable cells render the label directly.

Header cells also gain a .hoverable CSS class when cross-filters, Drill to Detail, or Drill By are enabled 3, and an .active class when their value matches the current filter selection 4.

Value cells for subtotal rows render { fontWeight: 'bold' }; leaf cells render an optional backgroundColor from cellColorFormatters 5.

Context Menu and Drilling#

Right-clicking any data cell or header cell fires handleContextMenu, which builds and passes three payloads to onContextMenu:

1. drillToDetail — a BinaryQueryObjectFilterClause[] constructed from the cell's colKey (starting from index 1, skipping the metric label) and the full rowKey, with optional date-grain info 6.
2. crossFilter — the result of getCrossFilterDataMask(dataPoint), which encodes the clicked cell as an IN filter (or clears it if already active).
3. drillBy — a single == filter on the first key of dataPoint, with groupbyFieldName set to 'groupbyRows' or 'groupbyColumns' depending on whether a rowKey was present 7.

Header cells individually attach onContextMenu handlers via renderColHeaderRow and renderTableRow, passing the partial colKey/rowKey at the clicked depth.

Cross-filter toggling on click (not context menu) is handled by toggleFilter, which is wired as clickRowHeaderCallback and clickColumnHeaderCallback in tableOptions. It is a no-op on subtotal or grand-total cells, and on text-selection events 8.

Subtotals and Totals Configuration#

Row and column subtotals are controlled through a combination of tableOptions and subtotalOptions objects assembled in PivotTableChart.tsx.

• colTotals / rowTotals — toggles the grand total row/column 9.
• colSubTotals / rowSubTotals — enables intermediate subtotals at each hierarchy level, which also activates the collapse/expand arrows.
• colSubtotalPosition / rowSubtotalPosition — displayOnTop: true puts subtotals above their children; false puts them below.

Inside TableRenderer.getBasePivotSettings(), colSubtotalDisplay and rowSubtotalDisplay objects are constructed from these flags and passed to PivotData so the model pre-generates the partial-key aggregators needed for subtotal cells 10.