How do I use predefined themes in the theme builder when using CDNs?

Background

• AG-Grid docs specify that it is acceptable to use a CDN for ag-grid-community.
• AG-Grid 33+ errors when using < div class="ag-theme-balham" and recommends using the Theme API.
• AG-Grid does not find themeBalham for gridOptions = {theme: <theme>} from the any CDNs that I tried:

<!-- AG-Grid + Styles -->
<script src=".min.js"></script>
<link  href=".min.css" rel="stylesheet">
<link  href=".min.css" rel="stylesheet">

How do I use predefined themes in the theme builder when using CDNs?

Background

• AG-Grid docs specify that it is acceptable to use a CDN for ag-grid-community.
• AG-Grid 33+ errors when using < div class="ag-theme-balham" and recommends using the Theme API.
• AG-Grid does not find themeBalham for gridOptions = {theme: <theme>} from the any CDNs that I tried:

<!-- AG-Grid + Styles -->
<script src="https://cdn.jsdelivr/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
<link  href="https://cdn.jsdelivr/npm/ag-grid-community/styles/ag-grid.min.css" rel="stylesheet">
<link  href="https://cdn.jsdelivr/npm/ag-grid-community/styles/ag-theme-balham.min.css" rel="stylesheet">

• javascript
• css
• ag-grid
• ag-grid-js

1 Answer 1

With CDN, instead of

import { someVariableName } from 'ag-grid-community',

just use

agGrid.someVariableName

wherever desired.

For example:

const gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  theme: agGrid.themeBalham.withPart(agGrid.colorSchemeDark),
};