Search

Vue Data GridTheming: Customising Tool Panels

Style the Filters Tool Panel and Columns Tool Panel.

TODO: content due in AG-13129

This page is a copy of the v32 theme docs, and needs updating for the Theming API.

Styling the Tool Panel Area

The Tool Panel is a tabbed container. It exposes CSS variables:

.ag-theme-quartz {
    --ag-control-panel-background-color: #CC222244;
    --ag-side-button-selected-background-color: #CC222244;

    --ag-selected-tab-underline-color: deeppink;
    --ag-selected-tab-underline-width: 2px;
    --ag-selected-tab-underline-transition-speed: 0.5s;

    --ag-side-bar-panel-width: 300px;
}

Styling the Columns Tool Panel

The --ag-column-select-indent-size CSS Variable sets the indent of each column group within the columns tool panel. For further customisation, use CSS selectors.

This example demonstrates changing the column indent and the style of the column drop component in the Row Groups area:

.ag-theme-quartz {
    --ag-column-select-indent-size: 40px
}

.ag-theme-quartz .ag-column-drop-cell {
    background-color: purple;
}

.ag-theme-quartz .ag-column-drop-cell .ag-icon {
    color: white;
}

.ag-theme-quartz .ag-column-drop-cell-text {
    color: white;
    font-weight: bold;
}