Components
Pivot Grid
A standalone pivot grid with 3-level row and column hierarchies, subtotals, grand totals, drilldown, pinning, resizing, and export.
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-pivot-gridUI Primitives(3 components)
npx shadcn@latest add button dropdown-menu tooltipRequired Packages(6 packages)
pnpm add @tanstack/react-table @tanstack/react-virtual jsonata exceljs html2canvas-pro pdf-libUsage
import {
PivotGridToolbar,
PivotGridView,
usePivotGrid,
type PivotGridCellColorRule,
type PivotGridDimension,
type PivotGridMeasure
} from '@docyrus/ui/components/pivot-grid';
const rowDimensions: PivotGridDimension<SalesRow>[] = [
{ id: 'region', label: 'Region', getValue: row => row.region },
{ id: 'country', label: 'Country', getValue: row => row.country },
{ id: 'city', label: 'City', getValue: row => row.city }
];
const columnDimensions: PivotGridDimension<SalesRow>[] = [
{ id: 'year', label: 'Year', getValue: row => row.year },
{ id: 'quarter', label: 'Quarter', getValue: row => row.quarter },
{ id: 'channel', label: 'Channel', getValue: row => row.channel }
];
const measures: PivotGridMeasure<SalesRow>[] = [
{
id: 'revenue',
label: 'Revenue',
aggregate: 'sum',
getValue: row => row.revenue,
formatValue: value => new Intl.NumberFormat(undefined, {
style: 'currency',
currency: 'USD',
maximumFractionDigits: 0
}).format(value)
},
{
id: 'orders',
label: 'Orders',
aggregate: 'sum',
getValue: row => row.orders
}
];
const cellColorRules: PivotGridCellColorRule[] = [
{
scope: 'leaf',
formula: 'measureId = "revenue" and value > 10000',
color: 'emerald-100'
},
{
scope: 'grand-total',
formula: 'value > 0',
color: 'slate-200'
}
];
function SalesPivot() {
const pivot = usePivotGrid({
data,
rowDimensions,
columnDimensions,
measures,
getRowId: row => row.id,
cellColorRules
});
return (
<div className="space-y-3">
<PivotGridToolbar controller={pivot} />
<PivotGridView controller={pivot} />
</div>
);
}Notes
- Row groups and column groups can be collapsed independently at each visible branch.
- Subtotals are emitted after every visible branch. Grand totals remain available even when groups are collapsed.
- Drilldown opens a read-only
DataGriddialog with the raw rows that contributed to the selected aggregate cell. - CSV flattens the current visible header paths. Excel and PDF preserve the current visible hierarchy more faithfully.