dash-ag-grid v33 doesn't support withPart for theming updates #427

Activity

1. BSd3v

   self-assigned this

   on Dec 30, 2025
2. BSd3v

   linked a pull request that will close this issueAllows for `createPart` to be used to craft parts to be utilized with `withPart` #428on Dec 30, 2025
3. AnnMarieW commented on Dec 31, 2025

   

   AnnMarieW

   on Dec 31, 2025

   Last edited by AnnMarieW

   Collaborator

   More actions

   To use legacy themes (by setting the className), it looks like you need to import the old css stylesheets, and set theme to "legacy" Here's an example of setting a dark theme:

   from dash import Dash, html
   import dash_ag_grid as dag
   import plotly.express as px
   
   
   app = Dash(external_stylesheets=[dag.themes.BASE, dag.themes.ALPINE])
   
   df = px.data.gapminder()
   df = df[['country', 'continent', 'year', 'pop']]
   
   app.layout = html.Div(
       [
           dag.AgGrid(
               id="getting-started-themes-example",
               columnDefs= [{"field": x, } for x in df.columns],
               rowData= df.to_dict('records'),
               className="ag-theme-alpine-dark",
               columnSize="sizeToFit",
              dashGridOptions={"theme": "legacy"}
           ),
       ]
   )
   
   if __name__ == "__main__":
       app.run(debug=True)
4. AnnMarieW commented on Dec 31, 2025

   

   AnnMarieW

   on Dec 31, 2025

   Collaborator

   More actions

   Here's an example using the solution in PR #428

   from dash import Dash, html
   import dash_ag_grid as dag
   import plotly.express as px
   
   
   app = Dash(
       external_scripts=[
               f'https://cdn.jsdelivr.net/npm/ag-grid-community@{dag.grid_version}/dist/ag-grid-community.min.js'
       ]
   )
   
   
   df = px.data.gapminder()
   df = df[['country', 'continent', 'year', 'pop']]
   
   app.layout = html.Div(
       [
           dag.AgGrid(
               id="getting-started-themes-example",
               columnDefs= [{"field": x, } for x in df.columns],
               rowData= df.to_dict('records'),
               columnSize="sizeToFit",
               dashGridOptions={'theme': {'function': 'customTheme(themeAlpine, createPart)'}},
           ),
       ]
   )
   
   if __name__ == "__main__":
       app.run(debug=True)
   

   var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});
   
   dagfuncs.customTheme = (theme, createPart) => {
       return theme.withPart(createPart(agGrid.colorSchemeDarkBlue))
   }
5. BSd3v

   closed this as completedin #428on Jan 6, 2026
6. nhoover commented on Jan 22, 2026

   

   nhoover

   on Jan 22, 2026

   More actions

   Thanks @AnnMarieW - adding

   app = Dash(external_stylesheets=[dag.themes.BASE, dag.themes.ALPINE])

   and

   dashGridOptions={"theme": "legacy"}

   I was able to get my dark mode grids working with 33.3.3 (community).

   Is this the preferred method going forward?
7. BSd3v commented on Jan 22, 2026

   

   BSd3v

   on Jan 22, 2026

   Collaborator

   More actions

   Hello @nhoover,

   It is an option of how to render. The legacy means that you can config without breaking your app immediately. The docs should be updated soon, if not already.

   The newer api allows for a easy way to mix and match styles without needing to get into the css necessarily. AG Grid also has a theme builder that can construct things for you.

   👍React with 👍1Reacted by Nathan Hoover
8. fedarko

   added a commit that references this issue on Jan 29, 2026

   fix table styling due to dash ag grid update

   ...

   cd06349