Vue Data GridTheming: Customising Selections

Control how selected rows and cells appear.

TODO: content due in AG-13129

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

Row Selections

When row selection is enabled, you can set the color of selected rows using --ag-selected-row-background-color. If your grid uses alternating row colours we recommend setting this to a semi-transparent colour so that the alternating row colours are visible below it.

.ag-theme-quartz {
    /* bright green, 10% opacity */
    --ag-selected-row-background-color: rgb(0, 255, 0, 0.1);
}

Cell Selections

Cell selections can be created by clicking and dragging on the grid. Multiple overlapping range selections can be made by holding ^ Ctrl while creating a new range outside the existing range. Copying from a selection will briefly highlight the range of cells (Ctrl + C). There are several variables to control the selection and highlight style:

.ag-theme-quartz {
    --ag-range-selection-border-color: rgb(193, 0, 97);
    --ag-range-selection-border-style: dashed;
    --ag-range-selection-background-color: rgb(255, 0, 128, 0.1);
    /* these next 3 variables control the background colour when 2, 3 or 4+ ranges overlap,
       and should have progressively greater opacity to look realistic - see the docs below
       for the correct formulas to use */
    --ag-range-selection-background-color-2: rgb(255, 0, 128, 0.19);
    --ag-range-selection-background-color-3: rgb(255, 0, 128, 0.27);
    --ag-range-selection-background-color-4: rgb(255, 0, 128, 0.34);

    --ag-range-selection-highlight-color: rgb(60, 188, 0, 0.3);
}