React Data GridCustomising Colours & Fonts

react logo

Change the overall colour scheme and appearance of data.

The grid exposes many CSS --ag-*-color variables that affect the colour of elements. --ag-font-size and --ag-font-family control the default font for the grid.

Example

.ag-theme-quartz {
    --ag-foreground-color: rgb(126, 46, 132);
    --ag-background-color: rgb(249, 245, 227);
    --ag-header-foreground-color: rgb(204, 245, 172);
    --ag-header-background-color: rgb(209, 64, 129);
    --ag-odd-row-background-color: rgb(0, 0, 0, 0.03);
    --ag-header-column-resize-handle-color: rgb(126, 46, 132);

    --ag-font-size: 17px;
    --ag-font-family: monospace;
}

The above code produces these results:

Key colour variables

Some of the most important colour variables are listed below. For the full list check the full CSS variables reference - every colour variable is ends with -color.