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 diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index a51252c..c8d900c 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/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, diff --git a/tests/assets/dashAgGridFunctions.js b/tests/assets/dashAgGridFunctions.js index 76d399e..a5bbcc3 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, 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 8c66d71..814410e 100644 --- a/tests/test_user_style.py +++ b/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")