Case 005 UI Components

Canvas Data Grid

01 — Problem

DOM-rendered Blazor grids slow down as rows and features stack up, and the commercial alternatives (AG Grid, Syncfusion, Telerik) are licensed dependencies you don't control. Most teams accept the licence cost because building a serious grid is considered too expensive.

02 — Fix

A high-performance Blazor data grid that paints cells to a canvas and overlays real DOM inputs only where typing happens — with multi-column sort, a per-column filter row, pivot aggregations, pinning, formula columns and CSV export.

Exhibit 005-A The grid itself — thousands of rows painted to canvas with KPI headers, in-cell sparklines, status pills and a record-inspector rail, all scrolling at native speed.

Exhibit 005-B The pivot view: a row × column aggregation table bound to a canvas-rendered stacked chart, with sum / count / avg / min / max toggles.

03 — Proof

Rendering model: hybrid — canvas cells, DOM-overlay filter inputs
Sorting: multi-column with chained ThenBy and order badges
Pivot aggregations: sum / avg / min / max / count per column
Formula columns: spreadsheet-style computed cells (=SUM, cross-column expressions)
State persistence: column order, widths, pinning, visibility, sort and pivot to localStorage
Hardening: 8 audit-driven correctness and security fixes shipped (LINQ allowlist, cancellation, JS teardown)

04 — Method

Blazor Server + Canvas2D with dynamic-LINQ server-side queries; the roadmap came from a four-agent audit of the codebase against competitor feature surfaces, then each tier was shipped by dedicated agents.