Cursor App Template #3 — Pivot Tables & Cross-tab
Pivot Tables & Cross-tab
Explore sales by product, region, and month.
Overview
This pivot-table explorer lets analysts slice sales data without Excel. Drag fields into rows, columns, and values—or use dropdowns—then watch the pivot grid, heat map, and chart rebuild instantly. You can filter dimensions, save favorite layouts, and import or export spreadsheets, all in one browser page.
Key features
Pivot builder
A sidebar Pivot Builder walks through how to configure the report. Available fields:
- Dimensions: Product, Region, Month
- Measures: Sales, Units
Drop zones support Rows (multiple fields), Columns, Values, and Aggregation. Drag-and-drop chips highlight valid targets; dropdowns offer the same controls if you prefer menus.
Aggregation and filters
Choose Sum, Count, or Average for the value field. A dimension filter lets you pick a field and a specific value (or All) to narrow the dataset before pivoting.
Pivot result grid
The result grid rebuilds on every config change. Dynamic column headers follow your row/column layout. Values use heat-map coloring (high / mid / low relative to the current result set). Each row includes a total column. You can show or hide the underlying source data grid (product, region, month, sales, units) with sortable columns.
Charts
A bar chart reflects row totals using the current aggregation—useful for spotting top combinations at a glance.
Saved pivots
Save Current Pivot names and stores the layout (up to twelve saved pivots in localStorage). Load restores a saved configuration from a dropdown.
Import and export
- Import Excel/CSV replaces the source dataset
- Export downloads the current pivot result as Excel
Appearance
Dark mode toggle with remembered preference. Responsive sidebar + main content layout.
Data & persistence
Sample sales data covers products across regions and months. Saved pivot layouts persist in localStorage.
Built with
Tailwind CSS, AG Grid Community, Alpine.js, Chart.js, SheetJS, HTML5 drag-and-drop, and a client-side pivot engine (vanilla JavaScript).
Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.
Pivot Tables & Cross-tab — Polished app
Pivot Tables & Cross-tab
Explore sales by product, region, and month.
| Product | Region | Month | Sales | Units |
|---|---|---|---|---|
| Widget A | North | Jan | $4,200 | 120 |
| Widget B | South | Feb | $3,800 | 95 |
| Gadget Pro | East | Mar | $5,100 | 140 |
| Gadget Lite | West | Apr | $2,900 | 88 |
| Region | Jan | Feb | Mar | Apr | Total |
|---|---|---|---|---|---|
| North | $12,400 | $11,800 | $13,200 | $12,600 | $50,000 |
| South | $10,200 | $9,400 | $14,100 | $11,300 | $45,000 |
| East | $15,600 | $12,800 | $8,900 | $13,700 | $51,000 |
