Pivot
Nested row and column axes with totals, collapse, top N with Other, and drill-through to the matching records.
2 demos
Nested row and column axes with totals, collapse, top N with Other, and drill-through to the matching records.
The same records grouped by month, with each total shown as its share of the grand total.
Build one like it
The smallest complete version, in each language CanopyX supports for this view. The demo above is the same API with more data.
using CanopyX;
using CanopyX.Html;
var sales = new CanopyDataGridView("sales", "Sales by region") {
Reporting = new CanopyGridReporting { Pivotable = true }
};
sales.Columns.Add(new CanopyColumn("region", "Region") { Sortable = true });
sales.Columns.Add(new CanopyColumn("quarter", "Quarter") { Sortable = true });
sales.Columns.Add(new CanopyColumn("amount", "Amount") {
Kind = CanopyColumnKind.Number
});
sales.Reporting.Aggregates.Add(new CanopyGridAggregate(
"total", "amount", CanopyGridAggregateOperation.Sum, "Total"));
var pivot = sales.Reporting.Pivot = new CanopyGridPivot();
pivot.Rows.Add(new CanopyGridGroupLevel("region"));
pivot.Columns.Add(new CanopyGridGroupLevel("quarter"));
pivot.Values.Add("total");
var id = 0;
foreach (var region in new[] { "North", "South", "Central" }) {
foreach (var quarter in new[] { "Q1", "Q2", "Q3", "Q4" }) {
var row = new CanopyGridRow("sale-" + ++id);
row.Cells["region"] = region;
row.Cells["quarter"] = quarter;
row.Cells["amount"] = id * 137 % 900 + 100;
sales.Rows.Add(row);
}
}
sales.SaveHtmlPage("pivot.html");Run this snippet (pivot, C#)Its output, generated with the site.
Try this in the demo
- Totals
Read the Query totals row.
Each month's total amount and record count add up across the three regions.
- Drill-through
Select North's total for 2026-01, then Show records.
The records behind that one number open as rows, filtered to North and January.
- Back to the pivot
Press Return to pivot.
The pivot comes back with the same axes and values.