JavaScript Data GridCustomising Selections
Control how selected rows and cells appear.
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-alpine {
/* bright green, 10% opacity */
--ag-selected-row-background-color: rgb(0, 255, 0, 0.1);
}Range 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-alpine {
--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);
}