Table of Contents

• Live Examples
  • Fundamentals
  • Filtering & Sorting
  • Renderers
  • Aggregators
  • Advanced
  • Putting It All Together
• How To Configure & Embed
• Attributes

Live Examples

Click Configuration on any demo to switch to the Configuration view with a copy button.

Fundamentals

Basic Sum Pivot Table

The starting point for any pivot: one row dimension, one value field, one aggregator. This example groups revenue by region using rows, vals, aggregatorName, and rendererName — the four properties every pivot config needs.

pivotTable {
  rows 'region'
  vals 'revenue'
  aggregatorName 'Sum'
  rendererName 'Table'
}

Cross-Tabulation

Adding cols turns a flat list into a matrix. Here products form the rows, quarters form the columns, and the Count aggregator tallies orders per cell — the classic cross-tab found in every ERP and sales analytics tool.

pivotTable {
  rows 'product'
  cols 'quarter'
  aggregatorName 'Count'
  rendererName 'Table'
}

Multi-Dimension

Multiple entries in rows and cols create nested hierarchies — region then country on the left, product line across the top. Executives use this three-way breakdown to drill from high-level totals into the specific country and product driving the numbers.

pivotTable {
  rows 'region', 'country'
  cols 'productLine'
  vals 'revenue'
  aggregatorName 'Sum'
  rendererName 'Table'
}

Average Aggregator

Switching from Sum to Average changes the analytical question entirely. "What is the typical order value per sales channel?" reveals that Enterprise orders are 10x the size of Marketplace orders — information hidden when you only look at totals.

pivotTable {
  rows 'salesChannel'
  vals 'orderValue'
  aggregatorName 'Average'
  rendererName 'Table'
}

Filtering & Sorting

Value Filter

The valueFilter property removes specific dimension values before any calculation runs. Here Inactive and Pending records are excluded so the pivot shows only Active revenue — essential when source data contains mixed statuses and you need a clean view.

pivotTable {
  rows 'category'
  vals 'revenue'
  aggregatorName 'Sum'
  rendererName 'Table'
  valueFilter {
    status exclude: ['Inactive', 'Pending']
  }
}

Sorted by Value Descending

rowOrder 'value_z_to_a' ranks rows by their aggregated total (highest revenue region on top), while colOrder 'key_a_to_z' keeps years in chronological order. This combination — value-ranked rows, time-ordered columns — is the standard executive summary layout.

pivotTable {
  rows 'region'
  cols 'year'
  vals 'revenue'
  aggregatorName 'Sum'
  rendererName 'Table'
  rowOrder 'value_z_to_a'
  colOrder 'key_a_to_z'
}

Custom Sort Order

sorters overrides alphabetical ordering with a business-specific sequence. Here regions appear as West → Central → East → International, matching how the sales organization is structured rather than the dictionary.

pivotTable {
  rows 'region'
  vals 'revenue'
  aggregatorName 'Sum'
  rendererName 'Table'
  sorters region: ['West', 'Central', 'East', 'International']
}

Renderers

Heatmap

The Table Heatmap renderer colors every cell relative to the global maximum — the highest value across the entire table gets the darkest shade. Useful for spotting the single biggest number at a glance. In this CRM pipeline, Nora's Negotiation deals immediately stand out as the peak.

pivotTable {
  rows 'dealStage'
  cols 'salesRep'
  vals 'dealValue'
  aggregatorName 'Sum'
  rendererName 'Table Heatmap'
}

Grouped Bar Chart

Grouped Bar Chart places one bar per column value side by side for each row. Here each deal stage shows three bars — one per sales rep — so you can instantly compare individual contributions within a stage. Nora dominates Negotiation, Priya leads Qualification, and Closed Won is Marco's strength.

pivotTable {
  rows 'dealStage'
  cols 'salesRep'
  vals 'dealValue'
  aggregatorName 'Sum'
  rendererName 'Grouped Bar Chart'
}

Line Chart

Line Chart draws one line per sales rep across deal stages, making it easy to follow each person's pipeline trajectory. All three reps peak at Negotiation before dropping at Closed Won — the classic pipeline funnel shape. Where lines cross or diverge reveals exactly at which stage performance differs.

pivotTable {
  rows 'dealStage'
  cols 'salesRep'
  vals 'dealValue'
  aggregatorName 'Sum'
  rendererName 'Line Chart'
}

Aggregators

Revenue per Unit (Ratio)

Sum over Sum divides the first val by the second — here revenue / quantity — producing a price-per-unit ratio. Widget B commands the highest unit price (around $800), while Gadget X is a volume play (around $155). This is the only aggregator that uses two value fields simultaneously.

pivotTable {
  rows 'product'
  cols 'quarter'
  vals 'revenue', 'quantity'
  aggregatorName 'Sum over Sum'
  rendererName 'Table'
}

Percentage of Total

Sum as Fraction of Total converts raw numbers into percentages of the grand total. Each cell shows what share of overall revenue it represents — making it immediately clear that North America Software alone accounts for nearly a third of all revenue.

pivotTable {
  rows 'region'
  cols 'productLine'
  vals 'revenue'
  aggregatorName 'Sum as Fraction of Total'
  rendererName 'Table'
}

Count Distinct

Count Unique Values counts how many distinct values appear, not how many rows exist. Here it answers "how many different products were ordered per region per quarter?" — a fundamentally different question than Count, which would just tally rows regardless of duplicates.

pivotTable {
  rows 'region'
  cols 'quarter'
  vals 'product'
  aggregatorName 'Count Unique Values'
  rendererName 'Table'
}

Advanced

Derived Attributes (Year from Date)

derivedAttributes creates new dimensions from existing fields at render time. Here year and quarter are extracted from raw orderDate timestamps, so users can pivot by time period without the source data needing pre-computed year/quarter columns.

pivotTable {
  rows 'region'
  cols 'year'
  vals 'revenue'
  aggregatorName 'Sum'
  rendererName 'Table'
  derivedAttributes year: 'dateFormat(orderDate, "%y")', quarter: 'dateFormat(orderDate, "Q%q")'
}

Field Visibility Controls

Three levels control what users see and interact with. hiddenAttributes removes fields entirely (internal IDs, timestamps). hiddenFromAggregators keeps fields draggable as dimensions but prevents them from being summed or averaged (employee names, free-text notes). hiddenFromDragDrop locks a field in place so users cannot rearrange it.

pivotTable {
  rows 'department'
  vals 'salary'
  aggregatorName 'Average'
  rendererName 'Table'
  hiddenAttributes 'employee_id', 'manager_id', 'created_at'
  hiddenFromAggregators 'employeeName', 'notes'
  hiddenFromDragDrop 'department'
}

Putting It All Together

Sales Overview — Region × Product × Quarter

What you're looking at: 64 rows of sales data — 4 Regions × 4 Products × 4 Quarters. The pivot table transforms this into an instant analysis grid. No SQL, no formulas.

pivotTable {
  rows 'Region', 'Product'
  cols 'Quarter'
  vals 'Revenue'
  aggregatorName 'Sum'
  rendererName 'Table'
  rowOrder 'key_a_to_z'
  colOrder 'key_a_to_z'
}

Quick Actions (Try These Now)

Real Business Questions This Answers

• "Which product is our cash cow?" — Put Product in rows, look at Totals column. Laptop has the highest revenue.
• "Is East region underperforming?" — Compare region totals in the current view. Spot gaps instantly.
• "Who gets the sales bonus?" — Drag SalesRep to rows, sort by totals. Highest revenue wins.
• "Are we profitable or just busy?" — Switch from Revenue to Profit. High revenue + low margins? Now you see it.

The Point: Why This Matters

-- Question 1: Revenue by region
SELECT Region, SUM(Revenue)
FROM sales GROUP BY Region;
 
-- Question 2: Revenue by product
SELECT Product, SUM(Revenue)
FROM sales GROUP BY Product;
 
-- 20 more queries for different angles...

Bottom line: Pivot tables = SQL GROUP BY + Excel formulas + visualization — combined. Drag and drop. Instant answers. Questions answered faster = better decisions.

How To Configure & Embed

First, configure your web components in ReportBurster — set up a report, define your data source, and customize the visualization under the Pivot Table tab.

Then drop the <rb-pivot-table> tag into any HTML page or framework component. Point it at your ReportBurster server and the web component handles data fetching, pivot calculation, and interactive rendering automatically.

<rb-pivot-table
  report-code="sales-analysis"
  api-base-url="http://localhost:9090/api/jobman/reporting">
</rb-pivot-table>

Tip: You can embed data directly in the config with data([...]) for small datasets that don't need a backend source. List syntax rows(['a', 'b']) also works alongside the comma form rows 'a', 'b'.

Attributes