Skip to content
CanopyX

Pivot

Nested row and column axes with totals, collapse, top N with Other, and drill-through to the matching records.

CanopyGridPivot96 records by region and monthDocumentation for the pivot

2 demos

Regions by month Open this demo full screen

Nested row and column axes with totals, collapse, top N with Other, and drill-through to the matching records.

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

  1. Totals

    Read the Query totals row.

    Each month's total amount and record count add up across the three regions.

  2. 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.

  3. Back to the pivot

    Press Return to pivot.

    The pivot comes back with the same axes and values.