JavaScript Data GridTheming: Customising Selections

Control how selected rows and cells appear.

Row Selections Copy Link

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)',

    // alternating row colours will be visible through the semi-transparent
    // selection background colour
    oddRowBackgroundColor: '#8881',
});

Cell Selections Copy Link

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({
    // colour and style of border around selection
    rangeSelectionBorderColor: 'rgb(193, 0, 97)',
    rangeSelectionBorderStyle: 'dashed',
    // background colour of selection - you can use a semi-transparent colour
    // and it wil overlay on top of the existing cells
    rangeSelectionBackgroundColor: 'rgb(255, 0, 128, 0.1)',
    // colour used to indicate that data has been copied from the cell range
    rangeSelectionHighlightColor: 'rgb(60, 188, 0, 0.3)',

    // alternating row colours will be visible through the semi-transparent
    // selection background colour
    oddRowBackgroundColor: '#8881',
});

Cell Selection for Integrated Charts Copy Link

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