Performance Table

A wide analytics grid for campaign or product metrics: grouped two-tier headers, a pinned name column, expandable child rows and a sticky totals row. Jump-to pills and a draggable minimap scrub across column groups. Heatmap tints cells by how good they are, Compare shows change from the last period, and headers light their column.

Tags: table analytics data-grid horizontal-scroll pinned-columns heatmap totals grouped-headers expandable-rows marketing
Dependencies: @base-ui/react(npm, opens in a new tab)motion(npm, opens in a new tab)lucide-react(npm, opens in a new tab)

Props

Other props pass through to the root element.

rows*
T[]
columns*
PerformanceColumn<T>[]
getChildren
(row: T) => T[] | undefined
Nested rows (ad sets under a campaign). They expand under their parent and aren't counted in totals.
primary*
{ header: string; width?: number; cell: (row: T, ctx: { depth: number; query: s…
The pinned first column.
segments
PerformanceSegment<T>[]
Default []
Toggle chips that narrow the rows (channels, regions).
periods
{ id: string; label: string }[]
Default []
period
string
onPeriodChange
(id: string) => void
title
React.ReactNode
description
React.ReactNode
noun
{ one: string; many: string }
Default { one: "row", many: "rows" }
defaultHeat
boolean
Default false
defaultCompare
boolean
Default false
maxHeight
number
Default 540
Height of the scrolling body in px.

Props
			Description
rows*	T[]	–
columns*	PerformanceColumn<T>[]	–
getChildren	(row: T) => T[] \| undefined	–	Nested rows (ad sets under a campaign). They expand under their parent and aren't counted in totals.
primary*	{ header: string; width?: number; cell: (row: T, ctx: { depth: number; query: s…	–	The pinned first column.
segments	PerformanceSegment<T>[]	[]	Toggle chips that narrow the rows (channels, regions).
periods	{ id: string; label: string }[]	[]
period	string	–
onPeriodChange	(id: string) => void	–
title	React.ReactNode	–
description	React.ReactNode	–
noun	{ one: string; many: string }	{ one: "row", many: "rows" }
defaultHeat	boolean	false
defaultCompare	boolean	false
maxHeight	number	540	Height of the scrolling body in px.