Search

React 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);
}

Cell Selection CSS Variables

--ag-range-selection-border-color
CSS color (e.g. `red` or `#fff`)
Color to draw around selected cell ranges
--ag-range-selection-border-style
a CSS border style (e.g. `dotted`, `solid` or `none`)
Border style for range selections, e.g. solid or dashed. Do not set to none, if you need to hide the border set the color to transparent
--ag-range-selection-background-color
CSS color (e.g. `red` or `#fff`)
Background colour of selected cell ranges.
--ag-range-selection-background-color-2
CSS color (e.g. `red` or `#fff`)
Background-color when 2 selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^2) where X is the opacity of --ag-range-selection-background-color
--ag-range-selection-background-color-3
CSS color (e.g. `red` or `#fff`)
Background-color when 3 selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^3) where X is the opacity of --ag-range-selection-background-color
--ag-range-selection-background-color-4
CSS color (e.g. `red` or `#fff`)
Background-color when 4 or more selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^4) where X is the opacity of --ag-range-selection-background-color
--ag-range-selection-highlight-color
CSS color (e.g. `red` or `#fff`)
Background colour to briefly apply to a cell range when it is copied from or pasted into
--ag-range-selection-chart-category-background-color
CSS color (e.g. `red` or `#fff`)
Background colour for cells that provide categories to the current range chart
--ag-range-selection-chart-background-color
CSS color (e.g. `red` or `#fff`)
Background colour for cells that provide data to the current range chart