Grid Theme Playground | Playground | Ignite UI Web Components

Grid Type

One set of grid tokens serves every grid. Switch here to see the same tokens applied to a different one.

Flat

Tree

Hierarchical

Pivot

Primary tokens

Start here. Background and accent are enough to theme the whole grid — header, rows, icons and popups all derive from them. Foreground is picked for contrast automatically; set it only to override that.

Header

Optional. The header normally derives from the background. Declare one here and it detaches, becoming a root of its own — its text then takes contrast against the new header rather than following the grid foreground.

Structure

Density

Small

Medium

Large

Roundness

Square

Soft

Round

Horizontal dividers

Vertical dividers

Zebra rows

Both dividers use the same derived colour, and switching one off tints it to the surface rather than removing it, so the row metrics never change.

Reset

Show code

Theme code

CSS variables