Merge pull request #428 from plotly/427-dash-ag-grid-v33-doesnt-support-withpart-for-theming-updates

Allows for `createPart` to be used to craft parts to be utilized with `withPart`

Author: BSd3v

CHANGELOG.md

@@ -10,6 +10,7 @@ Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source D
     - fixes [#416] (https://github.com/plotly/dash-ag-grid/issues/416)
     - fixes [#407](https://github.com/plotly/dash-ag-grid/issues/407)
 - [#412](https://github.com/plotly/dash-ag-grid/issues/412) fix "Multi-Column Filter not properly recognized in filterParams"
+- [#427](https://github.com/plotly/dash-ag-grid/issues/427) exposes `agGrid` from the community package for use in custom themes and functions
 
 ## [33.3.2rc2] - 2025-09-17
 

src/lib/fragments/AgGrid.react.js

@@ -42,13 +42,12 @@ import RowMenuRenderer from '../renderers/rowMenuRenderer';
 import {customFunctions} from '../renderers/customFunctions';
 
 import {AgGridReact, useGridFilter} from 'ag-grid-react';
-import {
-    themeAlpine,
-    themeBalham,
-    themeMaterial,
-    themeQuartz,
-} from 'ag-grid-community';
-const themes = {themeAlpine, themeBalham, themeMaterial, themeQuartz};
+import * as agGrid from 'ag-grid-community';
+let themes = {};
+if (agGrid && typeof agGrid === 'object' && !Array.isArray(agGrid)) {
+    const {themeAlpine, themeBalham, themeMaterial, themeQuartz} = agGrid;
+    themes = {themeAlpine, themeBalham, themeMaterial, themeQuartz};
+}
 
 // d3 imports
 import * as d3Format from 'd3-format';
@@ -157,6 +156,7 @@ export function DashAgGrid(props) {
                     esprima.parse(funcString).body[0].expression;
                 const context = {
                     ...themes,
+                    agGrid,
                     d3,
                     dash_clientside,
                     ...customFunctions,
@@ -175,6 +175,7 @@ export function DashAgGrid(props) {
                     esprima.parse(funcString).body[0].expression;
                 const context = {
                     ...themes,
+                    agGrid,
                     d3,
                     dash_clientside,
                     ...customFunctions,
@@ -195,6 +196,7 @@ export function DashAgGrid(props) {
                     esprima.parse(funcString).body[0].expression;
                 const context = {
                     ...themes,
+                    agGrid,
                     d3,
                     ...customFunctions,
                     ...window.dashAgGridFunctions,

tests/assets/dashAgGridFunctions.js

@@ -539,3 +539,6 @@ dagfuncs.testToyota = (params) => {
     return params.data.make == 'Toyota' ? {'color': 'blue'} : {}
 }
 
+dagfuncs.customTheme = (theme, agGrid) => {
+    return theme.withPart(agGrid.createPart(agGrid.colorSchemeDark)).withPart(agGrid.createPart(agGrid.iconSetAlpine));
+}

tests/test_user_style.py

@@ -109,9 +109,58 @@ def test_us002_legacy_themes(dash_duo, theme):
 
     # Base styles: assert that the grid height is <= 400px because an unstyled
     # grid is very "tall"
-    root_wrapper = dash_duo.find_element(".ag-root-wrapper")
-    wrapper_height = root_wrapper.size["height"]
-    assert wrapper_height <= 400, f"Grid appears to be unstyled: height is too tall ({wrapper_height}px)"
+    until(
+        lambda: dash_duo.find_element(".ag-root-wrapper").size["height"] <= 400,
+        timeout=3,
+        msg=f"Grid appears to be unstyled: height is too tall ({dash_duo.find_element('.ag-root-wrapper').size['height']}px)"
+    )
+    # Specific themes: Assert that cell headers are bold
+    header_cell_text = dash_duo.find_element(".ag-header-cell-text")
+    font_weight = header_cell_text.value_of_css_property("font-weight")
+    assert font_weight in ["bold", "700", "600", "500",], "Grid appears to be unstyled: cell headers are not bold"
+
+@pytest.mark.parametrize("theme", ["themeAlpine", "themeBalham", "themeMaterial", "themeQuartz"])
+def test_us003_part_themes(dash_duo, theme):
+    app = Dash(
+        __name__
+    )
+
+    columnDefs = [
+        {"field": "name", "width": "500"},
+    ]
+
+    rowData = [
+        {"name": "a"},
+        {"name": "b"},
+        {"name": "c"},
+    ]
+
+    app.layout = html.Div(
+        [
+            dag.AgGrid(
+                id="grid",
+                columnDefs=columnDefs,
+                rowData=rowData,
+                dashGridOptions={'theme': {'function': f'customTheme({theme}, agGrid)'}},
+            ),
+        ]
+    )
+
+    dash_duo.start_server(app)
+
+    grid = utils.Grid(dash_duo, "grid")
+
+    grid.wait_for_cell_text(0, 0, "a")
+
+    # Test that the CSS files are actually loaded and applied
+
+    # Base styles: assert that the grid height is <= 400px because an unstyled
+    # grid is very "tall"
+    until(
+        lambda: dash_duo.find_element(".ag-root-wrapper").size["height"] <= 400,
+        timeout=3,
+        msg=f"Grid appears to be unstyled: height is too tall ({dash_duo.find_element('.ag-root-wrapper').size['height']}px)"
+    )
 
     # Specific themes: Assert that cell headers are bold
     header_cell_text = dash_duo.find_element(".ag-header-cell-text")