React Data GridTheming: Master / Detail Styling

This section shows how the detail grid can be styled.

Styling Detail Grids Copy Link

Detail grids must have the same theme as their master grid. If you omit the theme grid option in a detail grid it will default to the same theme as the master grid. If you attempt to set a different theme you'll get an error message in your console.

Instead, use CSS to change the style of the detail grid.

/* Style the row containing the detail grid */
.ag-details-row {
    background: #f442;
    padding: 5px 5px 5px 40px;
}

/* Apply styles only to detail grids by wrapping them in .ag-details-grid: */
.ag-details-grid {
    --ag-row-height: 20px;

    .ag-header-cell {
        color: #f80;
        font-weight: bold;
    }

    .ag-details-grid {
        /* If you have nested detail grids, these styles would only apply
           from the second level down */
    }
}

See Customising the grid with CSS for more details on CSS use.

Limitations of CSS variables on detail grids Copy Link

You can set CSS variables on detail grids, but be aware of a difference in how they work compared to setting them on a master grid.

Some high-level variables control the behaviour of many lower-level variables by providing default values. This is the case for general colors like --ag-background-color and for --ag-spacing.

In this example we set the background color on the master grid to red. Setting --ag-background-color to red sets default values for --ag-data-background-color, --ag-odd-row-background-color and --ag-header-background-color, so because these variables have no values defined, they are set to red. We attempt to set the detail grid to green using the same technique, but now these three variables already have values defined - the red color inherited from the master grid, so the default value provided by --ag-background-color has no effect.

body {
    --ag-background-color: IndianRed;
}
.ag-details-grid {
    --ag-background-color: MediumSeaGreen;
}

In order to avoid this, you need to set all the lower-level variable explicitly:

body {
    --ag-background-color: IndianRed;
}
.ag-details-grid {
    --ag-background-color: MediumSeaGreen;
    --ag-data-background-color: MediumSeaGreen;
    --ag-odd-row-background-color: MediumSeaGreen;
    --ag-header-background-color: SeaGreen;
}