Theming

The pivot table draws every colour, space, radius and shadow from a --pivot-* CSS variable. You choose a look in one of four ways, from the least work to the most control: a ready-made colour scheme, the built-in dark look, a theme object with your own colours, or the variables themselves.

One look for both grids

The pivot table takes the same palette and dark props as the DataGrid, and the 36 colour schemes exist for both under the same ids, so a page that shows both colours them with one setting:

import '@kanunilabs/datagrid-react/styles.css';
import '@kanunilabs/datagrid-react/themes/porcelain.css';
import '@kanunilabs/pivotgrid-react/styles.css';
import '@kanunilabs/pivotgrid-react/themes/porcelain.css';

<DataGrid palette="porcelain" … />
<BasePivotGrid palette="porcelain" … />

The DataGrid's six classic palettes (nord, dracula, solarized, gruvbox, catppuccin, tokyo-night) are part of its own stylesheet and have no pivot counterpart; for a matched pair, use the schemes.

A scheme you build in the Theme Builder works the same way: it exports one stylesheet per grid under the name you give it. In a shadcn/ui app the grids can follow your shadcn variables instead, dark mode included — see Tailwind CSS and shadcn/ui.

Colour schemes

Both packages ship 36 colour schemes, light and dark, each one a small stylesheet next to the grid's own. Import the one you want after styles.css and name it with palette:

import '@kanunilabs/pivotgrid-react/styles.css';
import '@kanunilabs/pivotgrid-react/themes/graphite.css';

<BasePivotGrid gridId="sales" data={data} initialFields={fields} palette="graphite" />

The plain JavaScript package has the same files and the same option:

import '@kanunilabs/pivotgrid/styles.css';
import '@kanunilabs/pivotgrid/themes/graphite.css';

createPivotGrid(host, { data, initialFields: fields, palette: 'graphite' });

The grid marks its root with data-theme="graphite", and every popup it opens (field menus, the filter list, dialogs, the field chooser, the drill-down) carries the same mark, so the scheme reaches all of them. themes/all.css holds every scheme at once, for an app that lets its users choose. Earlier versions named the scheme with theme={{ id: 'graphite' }}; that still works, and palette wins when both are given.

Dark

dark switches to the built-in dark look — the DataGrid's own dark palette, so the two components match side by side:

<DataGrid dark … />
<BasePivotGrid dark … />

A colour scheme decides its own mode: with palette set, dark has no effect. For a dark scheme other than the built-in one, pick a dark palette (graphite, midnight, onyx…).

Your own colours

The theme object sets colours from code. Anything in it wins over a scheme and over dark, so a scheme can be the starting point for a brand colour:

<BasePivotGrid … palette="graphite" theme={{ primary: '#f59e0b' }} />

For a dark header band over light panels, give the band its own pair:

theme={{ surfaceHeader: '#f1f5f9', headerBackground: '#1e293b', headerText: '#f8fafc' }}

Try the presets live in the Theming playground.

Density

density sets the row rhythm and changes no colours, so it combines with any scheme: 'compact' (24px rows), 'normal' (28px, the default) or 'comfortable' (36px). Details in Features → Density.

Typeface and numbers

The grid inherits the page's font. To give it, and every popup it opens, a font of its own, set --pivot-font-family once:

:root {
  --pivot-font-family: 'Inter', system-ui, sans-serif;
}

A font set only on the grid's container would not reach the menus and dialogs, which are portalled to <body>; the variable does. The DataGrid reads --dg-font-family the same way. Data cells use equal-width digits (font-variant-numeric: tabular-nums), so amounts line up column by column in any font.

The variables

Set these on .kanuni-pivot-root — or on .kanuni-pivot-root[data-theme="<your-id>"] for a named look — and the grid and its popups pick them up.

Colours

Type — --pivot-font-family (unset: the page's font), --pivot-text-xs (11px), --pivot-text-sm (13px), --pivot-text-base (14px), --pivot-text-lg (16px), --pivot-text-xl (18px).

Spacing — --pivot-space-0 to --pivot-space-12: 0, 4, 6 (-1-5), 8, 12, 16, 20, 24, 32 and 48px.

Radii — --pivot-radius-none, -sm (4px), -md (6px), -lg (8px), -xl (12px), -full; --pivot-border-radius is the one most controls use (-md).

Elevation — --pivot-shadow-none, -sm, -md, -lg, -xl, -inset (a pressed toolbar toggle) and -menu (field and view menus).

The colour schemes set the colour variables only, measured for contrast (body text 4.5:1 on every ground a cell can have); the type, spacing, radius and elevation variables are yours to change.

Next to the DataGrid

The two components use their own prefixes so they can be themed side by side without collisions. The everyday pairs: