From 9dbe7b02f5c989fb51013937782057f53940c8ab Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Tue, 30 Dec 2025 14:54:26 -0500 Subject: [PATCH 1/6] Allows for `createPart` to be used to craft parts to be utilized with `withPart` --- src/lib/fragments/AgGrid.react.js | 4 ++++ tests/assets/dashAgGridFunctions.js | 3 +++ 2 files changed, 7 insertions(+) diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index a51252c..fead88e 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/src/lib/fragments/AgGrid.react.js @@ -47,6 +47,7 @@ import { themeBalham, themeMaterial, themeQuartz, + createPart, } from 'ag-grid-community'; const themes = {themeAlpine, themeBalham, themeMaterial, themeQuartz}; @@ -157,6 +158,7 @@ export function DashAgGrid(props) { esprima.parse(funcString).body[0].expression; const context = { ...themes, + createPart, d3, dash_clientside, ...customFunctions, @@ -175,6 +177,7 @@ export function DashAgGrid(props) { esprima.parse(funcString).body[0].expression; const context = { ...themes, + createPart, d3, dash_clientside, ...customFunctions, @@ -195,6 +198,7 @@ export function DashAgGrid(props) { esprima.parse(funcString).body[0].expression; const context = { ...themes, + createPart, d3, ...customFunctions, ...window.dashAgGridFunctions, diff --git a/tests/assets/dashAgGridFunctions.js b/tests/assets/dashAgGridFunctions.js index 76d399e..5dc57a8 100644 --- a/tests/assets/dashAgGridFunctions.js +++ b/tests/assets/dashAgGridFunctions.js @@ -539,3 +539,6 @@ dagfuncs.testToyota = (params) => { return params.data.make == 'Toyota' ? {'color': 'blue'} : {} } +dagfuncs.customTheme = (theme, createPart) => { + return theme.withPart(createPart(agGrid.colorSchemeDark)) +} \ No newline at end of file From f75a501e119303e26decb60478ecd1347120c419 Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Tue, 30 Dec 2025 15:06:05 -0500 Subject: [PATCH 2/6] adding test for themes with parts --- tests/test_user_style.py | 49 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/tests/test_user_style.py b/tests/test_user_style.py index 8c66d71..fba87e0 100644 --- a/tests/test_user_style.py +++ b/tests/test_user_style.py @@ -117,3 +117,52 @@ def test_us002_legacy_themes(dash_duo, theme): 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__, + external_scripts=[ + f'https://cdn.jsdelivr.net/npm/ag-grid-community@{dag.grid_version}/dist/ag-grid-community.min.js' + ], + ) + + 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}, createPart)'}}, + ), + ] + ) + + 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" + 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)" + + # 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" From 29d08c31f320b18236d91c944b0b9131e72a2d19 Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Tue, 6 Jan 2026 15:55:43 -0500 Subject: [PATCH 3/6] adjustments for passing `agGrid` community to the functions --- src/lib/fragments/AgGrid.react.js | 16 +++++----------- tests/assets/dashAgGridFunctions.js | 4 ++-- tests/test_user_style.py | 7 ++----- 3 files changed, 9 insertions(+), 18 deletions(-) diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index fead88e..09b1a2d 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/src/lib/fragments/AgGrid.react.js @@ -42,14 +42,8 @@ import RowMenuRenderer from '../renderers/rowMenuRenderer'; import {customFunctions} from '../renderers/customFunctions'; import {AgGridReact, useGridFilter} from 'ag-grid-react'; -import { - themeAlpine, - themeBalham, - themeMaterial, - themeQuartz, - createPart, -} from 'ag-grid-community'; -const themes = {themeAlpine, themeBalham, themeMaterial, themeQuartz}; +import * as agGrid from 'ag-grid-community'; +const themes = {themeAlpine, themeBalham, themeMaterial, themeQuartz} = agGrid; // d3 imports import * as d3Format from 'd3-format'; @@ -158,7 +152,7 @@ export function DashAgGrid(props) { esprima.parse(funcString).body[0].expression; const context = { ...themes, - createPart, + agGrid, d3, dash_clientside, ...customFunctions, @@ -177,7 +171,7 @@ export function DashAgGrid(props) { esprima.parse(funcString).body[0].expression; const context = { ...themes, - createPart, + agGrid, d3, dash_clientside, ...customFunctions, @@ -198,7 +192,7 @@ export function DashAgGrid(props) { esprima.parse(funcString).body[0].expression; const context = { ...themes, - createPart, + agGrid, d3, ...customFunctions, ...window.dashAgGridFunctions, diff --git a/tests/assets/dashAgGridFunctions.js b/tests/assets/dashAgGridFunctions.js index 5dc57a8..a5bbcc3 100644 --- a/tests/assets/dashAgGridFunctions.js +++ b/tests/assets/dashAgGridFunctions.js @@ -539,6 +539,6 @@ dagfuncs.testToyota = (params) => { return params.data.make == 'Toyota' ? {'color': 'blue'} : {} } -dagfuncs.customTheme = (theme, createPart) => { - return theme.withPart(createPart(agGrid.colorSchemeDark)) +dagfuncs.customTheme = (theme, agGrid) => { + return theme.withPart(agGrid.createPart(agGrid.colorSchemeDark)).withPart(agGrid.createPart(agGrid.iconSetAlpine)); } \ No newline at end of file diff --git a/tests/test_user_style.py b/tests/test_user_style.py index fba87e0..94321c0 100644 --- a/tests/test_user_style.py +++ b/tests/test_user_style.py @@ -121,10 +121,7 @@ def test_us002_legacy_themes(dash_duo, theme): @pytest.mark.parametrize("theme", ["themeAlpine", "themeBalham", "themeMaterial", "themeQuartz"]) def test_us003_part_themes(dash_duo, theme): app = Dash( - __name__, - external_scripts=[ - f'https://cdn.jsdelivr.net/npm/ag-grid-community@{dag.grid_version}/dist/ag-grid-community.min.js' - ], + __name__ ) columnDefs = [ @@ -143,7 +140,7 @@ def test_us003_part_themes(dash_duo, theme): id="grid", columnDefs=columnDefs, rowData=rowData, - dashGridOptions={'theme': {'function': f'customTheme({theme}, createPart)'}}, + dashGridOptions={'theme': {'function': f'customTheme({theme}, agGrid)'}}, ), ] ) From d986a8473b11a98ef23a1591cf7a93a24d4e90ed Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Tue, 6 Jan 2026 15:58:28 -0500 Subject: [PATCH 4/6] fixing missing const --- src/lib/fragments/AgGrid.react.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index 09b1a2d..c8d900c 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/src/lib/fragments/AgGrid.react.js @@ -43,7 +43,11 @@ import {customFunctions} from '../renderers/customFunctions'; import {AgGridReact, useGridFilter} from 'ag-grid-react'; import * as agGrid from 'ag-grid-community'; -const themes = {themeAlpine, themeBalham, themeMaterial, themeQuartz} = agGrid; +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'; From b38472d66c09a34c809a288e74a0095a0b6a05a2 Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Tue, 6 Jan 2026 16:20:34 -0500 Subject: [PATCH 5/6] fixing flaky tests for stylesheet not loaded initially --- tests/test_user_style.py | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/tests/test_user_style.py b/tests/test_user_style.py index 94321c0..814410e 100644 --- a/tests/test_user_style.py +++ b/tests/test_user_style.py @@ -109,10 +109,11 @@ 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") @@ -155,9 +156,11 @@ def test_us003_part_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") From 1f61c085888f7ade910cab4e90e8937a852aba1b Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Tue, 6 Jan 2026 16:49:23 -0500 Subject: [PATCH 6/6] updating changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f39928b..1b43d7b 100644 --- a/CHANGELOG.md +++ b/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