Ag Grid has a fantastic interactive theme builder / However, if you click Use Theme, you can see that it always has a Quartz base theme:

import { themeQuartz } from 'ag-grid-community';

I'd like to base my theme on Material, but I don't find a way to switch it. All the variations on top are based on Quartz, and there is no option for base theme in All parameters list on the left.

Do I miss something? If it's really impossible, is there any way maybe to run it locally with whatever base theme I want?

Ag Grid has a fantastic interactive theme builder https://www.ag-grid/theme-builder/ However, if you click Use Theme, you can see that it always has a Quartz base theme:

import { themeQuartz } from 'ag-grid-community';

I'd like to base my theme on Material, but I don't find a way to switch it. All the variations on top are based on Quartz, and there is no option for base theme in All parameters list on the left.

Do I miss something? If it's really impossible, is there any way maybe to run it locally with whatever base theme I want?

• themes
• ag-grid

1 Answer 1

The demos in the theme builder page are just examples using the themeQuartz. You can use any of the built-in themes and customize them to build a custom theme. You can import these themes in the same way as themeQuartz and customize them.

Example:

// Import the themes
import {
  themeAlpine,
  themeBalham,
  themeMaterial,
  themeQuartz,
} from "ag-grid-community";

// You can use any of the above mentioned themes and customize them
const myTheme = themeMaterial
    .withParams({
        backgroundColor: "#1f2836",
        browserColorScheme: "dark",
        headerFontSize: 14
    });

// And pass it to the theme grid option
<AgGridReact
  theme={theme}
  columnDefs={columnDefs}
  rowData={rowData}
  ...
/>

Check this Plunker demo.