Theming
Grid Theme Customization
Explore the three-level customization system: High-level presets, fine-grained parameters, and CSS overrides.
Level 1: High-Level Presets
Use Theme, Density, and VisualStyle parameters for quick customization.
Compact + Striped
Dense layout with alternating rows
Spacious + Bordered
Relaxed layout with cell borders
Level 2: Fine-Grained Parameters
Override specific theme settings with DataGridThemeParameters component.
Custom Accent Color
Red accent with custom row height
Custom Typography
Larger font with custom border radius
Theme Comparison
Compare Shadcn theme with AG Grid's built-in themes.
Shadcn Theme
View how the grid looks with the Shadcn theme
Precedence Demonstration
DataGridThemeParameters overrides Density presets. Compact sets rowHeight=36, but we override it to 50.
Standard Compact (36px rows)
Default compact density
Compact Override (50px rows)
Compact density but custom row height