Merge pull request #381 from plotly/feature/ag-grid-33

Feature: AG Grid 33

Author: KoolADE85

.gitignore

@@ -4,6 +4,8 @@
 # Build artifacts
 dash_ag_grid/*
 !dash_ag_grid/__init__.py
+!dash_ag_grid/_version.py
+!dash_ag_grid/themes.py
 R/
 deps/
 man/

dash_ag_grid/__init__.py

@@ -9,21 +9,18 @@
 # noinspection PyUnresolvedReferences
 from ._imports_ import *
 from ._imports_ import __all__
+from dash_ag_grid import themes
 
 if not hasattr(_dash, '__plotly_dash') and not hasattr(_dash, 'development'):
     print('Dash was not successfully imported. '
           'Make sure you don\'t have a file '
           'named \n"dash.py" in your current directory.', file=_sys.stderr)
     _sys.exit(1)
 
-_basepath = _os.path.dirname(__file__)
-_filepath = _os.path.abspath(_os.path.join(_basepath, 'package-info.json'))
-with open(_filepath) as f:
-    package = json.load(f)
+from ._version import __version__, grid_version, get_package_info
 
+package = get_package_info()
 package_name = package['name'].replace(' ', '_').replace('-', '_')
-__version__ = package['version']
-grid_version = package['dependencies']['ag-grid-community']
 
 _current_path = _os.path.dirname(_os.path.abspath(__file__))
 

dash_ag_grid/_version.py

@@ -0,0 +1,12 @@
+import json
+import os
+
+def get_package_info():
+    basepath = os.path.dirname(__file__)
+    filepath = os.path.abspath(os.path.join(basepath, 'package-info.json'))
+    with open(filepath) as f:
+        return json.load(f)
+
+package = get_package_info()
+__version__ = package['version']
+grid_version = package['dependencies']['ag-grid-community']

dash_ag_grid/themes.py

@@ -0,0 +1,9 @@
+from ._version import grid_version
+
+_base_url = f"https://cdn.jsdelivr.net/npm/ag-grid-community@{grid_version}/styles"
+
+BASE = f"{_base_url}/ag-grid.min.css"
+ALPINE = f"{_base_url}/ag-theme-alpine.min.css"
+BALHAM = f"{_base_url}/ag-theme-balham.min.css"
+MATERIAL = f"{_base_url}/ag-theme-material.min.css"
+QUARTZ = f"{_base_url}/ag-theme-quartz.min.css"

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "dash-ag-grid",
-    "version": "32.3.0",
+    "version": "33.3.2rc0",
     "description": "Dash wrapper around AG Grid, the best interactive data grid for the web.",
     "repository": {
         "type": "git",
@@ -32,11 +32,11 @@
     "dependencies": {
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
-        "ag-grid-community": "32.3.4",
-        "ag-grid-enterprise": "32.3.4",
-        "ag-grid-react": "32.3.4",
         "@mui/icons-material": "^5.15.7",
         "@mui/material": "^5.15.7",
+        "ag-grid-community": "33.3.2",
+        "ag-grid-enterprise": "33.3.2",
+        "ag-grid-react": "33.3.2",
         "d3-format": "^3.1.0",
         "d3-time": "^3.1.0",
         "d3-time-format": "^4.1.0",

package.json

@@ -1,6 +1,10 @@
 import PropTypes from 'prop-types';
 import LazyLoader from '../LazyLoader';
 import React, {lazy, Suspense, useState, useCallback, useEffect} from 'react';
+import {AllCommunityModule, ModuleRegistry} from 'ag-grid-community';
+
+// Register all community features
+ModuleRegistry.registerModules([AllCommunityModule]);
 
 const RealAgGrid = lazy(LazyLoader.agGrid);
 const RealAgGridEnterprise = lazy(LazyLoader.agGridEnterprise);
@@ -53,7 +57,7 @@ function DashAgGrid(props) {
 DashAgGrid.dashRenderType = true;
 
 DashAgGrid.defaultProps = {
-    className: 'ag-theme-alpine',
+    className: '',
     resetColumnState: false,
     exportDataAsCsv: false,
     selectAll: false,

src/lib/components/AgGrid.react.js

@@ -46,12 +46,13 @@ import RowMenuRenderer from '../renderers/rowMenuRenderer';
 import {customFunctions} from '../renderers/customFunctions';
 
 import {AgGridReact, useGridFilter} from 'ag-grid-react';
-
-import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-alpine.css';
-import 'ag-grid-community/styles/ag-theme-balham.css';
-import 'ag-grid-community/styles/ag-theme-material.css';
-import 'ag-grid-community/styles/ag-theme-quartz.css';
+import {
+    themeAlpine,
+    themeBalham,
+    themeMaterial,
+    themeQuartz,
+} from 'ag-grid-community';
+const themes = {themeAlpine, themeBalham, themeMaterial, themeQuartz};
 
 // d3 imports
 import * as d3Format from 'd3-format';
@@ -159,6 +160,7 @@ export function DashAgGrid(props) {
                 const parsedCondition =
                     esprima.parse(funcString).body[0].expression;
                 const context = {
+                    ...themes,
                     d3,
                     dash_clientside,
                     ...customFunctions,
@@ -176,6 +178,7 @@ export function DashAgGrid(props) {
                 const parsedCondition =
                     esprima.parse(funcString).body[0].expression;
                 const context = {
+                    ...themes,
                     d3,
                     dash_clientside,
                     ...customFunctions,
@@ -195,6 +198,7 @@ export function DashAgGrid(props) {
                 const parsedCondition =
                     esprima.parse(funcString).body[0].expression;
                 const context = {
+                    ...themes,
                     d3,
                     ...customFunctions,
                     ...window.dashAgGridFunctions,
@@ -1532,6 +1536,14 @@ export function DashAgGrid(props) {
         omit(NO_CONVERT_PROPS, {...dashGridOptions, ...restProps})
     );
 
+    if ('theme' in convertedProps) {
+        if (typeof convertedProps.theme === 'function') {
+            convertedProps.theme = convertedProps.theme();
+        } else if (convertedProps.theme in themes) {
+            convertedProps.theme = themes[convertedProps.theme];
+        }
+    }
+
     let alignedGrids;
     if (dashGridOptions) {
         if ('alignedGrids' in dashGridOptions) {