Grid Theming - BlazorUI

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 GridThemeParameters 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.

Select Theme:

Shadcn Theme

View how the grid looks with the Shadcn theme

Precedence Demonstration

GridThemeParameters overrides Density presets. Compact sets rowHeight=28, but we override it to 50.

Standard Compact (28px rows)

Default compact density

Compact Override (50px rows)

Compact density but custom row height

Usage Examples

How to use the three-level customization system

@* Level 1: High-Level Presets *@
<Grid TItem="Order" Items="@orders" 
      Density="GridDensity.Compact" 
      VisualStyle="GridStyle.Striped">
    <Columns>...</Columns>
</Grid>

@* Level 2: Fine-Grained Parameters *@
<Grid TItem="Order" Items="@orders">
    <GridThemeParameters
        AccentColor="#ff6b6b"
        BorderRadius="8"
        RowHeight="48"
    />
    <Columns>...</Columns>
</Grid>

@* Level 3: Advanced CSS (not shown, use style or Class parameter) *@
<Grid TItem="Order" Items="@orders" Class="my-custom-grid">
    <Columns>...</Columns>
</Grid>

<style>
.my-custom-grid {
  --ag-cell-horizontal-padding: 20px;
}
</style>