Site icon BotFlo

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:

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

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.

Region
Month
Sales
Source data
ProductRegionMonthSalesUnits
Widget ANorthJan$4,200120
Widget BSouthFeb$3,80095
Gadget ProEastMar$5,100140
Gadget LiteWestApr$2,90088
Pivot result (sum of Sales)
RegionJanFebMarAprTotal
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
Pivot chart
Exit mobile version