React Data GridCustomising Selections
React Data GridCustomising Selections
Control how selected rows and cells appear.
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);
}
Range Selections
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-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);
}