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

[LiamConnors]

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

This means some examples in AG Grid docs do not work and require using legacy theming.

For example, this one that switches out the icons https://www.ag-grid.com/archive/33.3.2/react-data-grid/custom-icons/#swapping-the-provided-icon-set

And this one here that configures the color scheme https://www.ag-grid.com/archive/33.3.2/react-data-grid/theming-parts/#configuring-theme-parts

[AnnMarieW]

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)

[AnnMarieW]

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))
}