React Data GridTheming: Customising Selections

Control how selected rows and cells appear.

Row Selections

When row selection is enabled, you can set the color of selected rows using the selectedRowBackgroundColor parameter. 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.

const myTheme = themeQuartz.withParams({
    /* bright green, 10% opacity */
    selectedRowBackgroundColor: 'rgba(0, 255, 0, 0.1)',
});

Cell Selections

Cell selections can be created by clicking and dragging on the grid. Copying from a selection will briefly highlight the range of cells (Ctrl + C). There are several parameters to control the selection and highlight style:

const myTheme = themeQuartz.withParams({
    // color and style of border around selection
    rangeSelectionBorderColor: 'rgb(193, 0, 97)',
    rangeSelectionBorderStyle: 'dashed',
    // background color of selection - you can use a semi-transparent color
    // and it wil overlay on top of the existing cells
    rangeSelectionBackgroundColor: 'rgb(255, 0, 128, 0.1)',
    // color used to indicate that data has been copied form the cell range
    rangeSelectionHighlightColor: 'rgb(60, 188, 0, 0.3)',
});

Cell Selection for Integrated Charts

When using integrated charts with cell selections, the grid uses different colors to indicate the purpose of the cell ranges:

• rangeSelectionChartBackgroundColor - background color for cells used as chart data
• rangeSelectionChartCategoryBackgroundColor - background color for cells used as categories / axis labels