[Python] How to match Dash Ag Grid with the DDK Style setup?

I just made a dashboard using ddk and some other libraries :

import pandas as pd
from dash import Dash, html
import dash_design_kit as ddk

from . import country_dropdown
from . import bond_dropdown
from . import rfq_ag_grid
from . import bar_plot_bonds


My layout includes multiple ddk.Block and ddk.Card components and everything except the ag grid matches the style I set up with the "show_editor" menu from Dash Design Kit.

I cannot figure out why as this article mention the fact that DDK works with Dash Ag Grid...

"Dash Design Kit works seamlessly with Dash AG Grid, so your grid matches the styling of the rest of your app, while you focus on your data, not CSS. Change the style in one place and your whole app reacts together."
​

I tried to include my ag grid into several ddk components but nothing works.

ddk.Card([
ag_grid.render(app, report, 1)
])


Or

ddk.Block([
ddk.Card([
ag_grid.render(app, report, 1)
])
])


Or

ddk.Block([
ag_grid.render(app, report, 1)
])


Here are the args of my ag_grid :

return dag.AgGrid(
id=f'ag_grid_{index}',
enableEnterpriseModules=True,
rowData=[],
columnDefs=columns_defs,
defaultColDef={"filter": True},
columnSize="sizeToFit",
style={'width': '100%', 'height': '800px'},
dashGridOptions={"animateRows": False, 'cellSelection':True},

)


Does anyone have an idea if this is normal and I only need to specify a quick argument ? Or is matching ag grids with ddk_styles impossible and I'll need to create a css file ?(hopefully not..)

Thank you

Continue reading...