So I created one - and you may find this weird design - but this is how I did in my main application (maybe was not a smart choice and I am going to update this as soon as possible)
`set_props is the culprit
import dash
import dash_ag_grid as dag
from dash import Dash, html, Output, Input, callback, State, no_update
import dash_mantine_components as dmc
import pandas as pd
import dash_bootstrap_components as dbc
app = Dash(__name__,url_base_pathname="/dash_ag_grid_test/")
data = [
{
"localTime": "5:00am",
"a": 0.231,
"b": 0.523,
"c": 0.423,
"d": 0.527,
},
{
"localTime": "5:15am",
"a": 0.423,
"b": 0.452,
"c": 0.523,
"d": 0.543,
},
{
"localTime": "5:30am",
"a": 0.537,
"b": 0.246,
"c": 0.426,
"d": 0.421,
},
{
"localTime": "5:45am",
"a": 0.893,
"b": 0.083,
"c": 0.532,
"d": 0.983,
},
{
"localTime": "6:00am",
"a": 0.231,
"b": 0.523,
"c": 0.423,
"d": 0.527,
},
{
"localTime": "6:15am",
"a": 0.423,
"b": 0.452,
"c": 0.523,
"d": 0.543,
},
{
"localTime": "6:30am",
"a": 0.537,
"b": 0.246,
"c": 0.426,
"d": 0.421,
},
{
"localTime": "6:45am",
"a": 0.893,
"b": 0.083,
"c": 0.532,
"d": 0.983,
},
{
"localTime": "7:00am",
"a": 0.231,
"b": 0.523,
"c": 0.423,
"d": 0.527,
},
{
"localTime": "7:15am",
"a": 0.423,
"b": 0.452,
"c": 0.523,
"d": 0.543,
},
{
"localTime": "7:30am",
"a": 0.537,
"b": 0.246,
"c": 0.426,
"d": 0.421,
},
{
"localTime": "7:45am",
"a": 0.893,
"b": 0.083,
"c": 0.532,
"d": 0.983,
},
{
"localTime": "8:00am",
"a": 0.231,
"b": 0.523,
"c": 0.423,
"d": 0.527,
},
{
"localTime": "8:15am",
"a": 0.423,
"b": 0.452,
"c": 0.523,
"d": 0.543,
},
{
"localTime": "8:30am",
"a": 0.537,
"b": 0.246,
"c": 0.426,
"d": 0.421,
},
{
"localTime": "8:45am",
"a": 0.893,
"b": 0.083,
"c": 0.532,
"d": 0.983,
},
{
"localTime": "8:00am",
"a": 0.231,
"b": 0.523,
"c": 0.423,
"d": 0.527,
},
{
"localTime": "8:15am",
"a": 0.423,
"b": 0.452,
"c": 0.523,
"d": 0.543,
},
{
"localTime": "8:30am",
"a": 0.537,
"b": 0.246,
"c": 0.426,
"d": 0.421,
},
{
"localTime": "8:45am",
"a": 0.893,
"b": 0.083,
"c": 0.532,
"d": 0.983,
},
]
columnDefs = [
{"field": "localTime"},
{"field": "a"},
{"field": "b"},
{"field": "c"},
{"field": "d"},
]
popover = dmc.Group(
[
dmc.Button(
"Toggle",id="toggle",n_clicks=0,
),
html.Div([], id="target"),
dbc.Popover(
[
dbc.PopoverBody(dmc.Stack(
[
dmc.Select(
value=None,
data=[x["field"] for x in columnDefs],
id="column_populate",
clearable=True,comboboxProps={'zIndex':8000}
),
dmc.Button("Remove Column", id="my-button", color="blue",fullWidth=True),
]
)),
],
id="popover",
is_open=False,
target="target",
),
],align='flex-end', justify='flex-end'
)
ag_grid = dag.AgGrid(
id="grid",
rowData=data,
columnDefs=columnDefs,
defaultColDef={
"resizable": True,
"sortable": True,
"filter": True,
"flex": 1,
},
dashGridOptions={"suppressRowTransform": True},
)
asset_tab = dmc.Tabs(
[
dmc.TabsList(
[
dmc.TabsTab("asset1", value="asset1"),
dmc.TabsTab("asset2", value="asset2"),
dmc.TabsTab("asset3", value="asset3"),
]
),
dmc.TabsPanel(dmc.Stack([
ag_grid
]), value="asset1"),
dmc.TabsPanel("Messages tab content", value="asset2"),
dmc.TabsPanel("Settings tab content", value="asset3"),
],
color="red", # default is blue
orientation="vertical", # or "vertical"
variant="default", # or "outline" or "pills"
value="asset1"
)
app.layout = dmc.MantineProvider(
dmc.Modal(children=dmc.Tabs(
[
dmc.TabsList(
[
dmc.TabsTab("Gallery", value="gallery"),
dmc.TabsTab("Messages", value="messages"),
dmc.TabsTab("Settings", value="settings"),
]
),
dmc.TabsPanel(dmc.Grid(children=[
dmc.GridCol(span=12,children=popover),
dmc.GridCol(span=12,children=asset_tab),
],align='flex-end'), value="gallery"),
dmc.TabsPanel("Messages tab content", value="messages"),
dmc.TabsPanel("Settings tab content", value="settings"),
],
color="red", # default is blue
orientation="horizontal", # or "vertical"
variant="default", # or "outline" or "pills"
value="gallery"
),centered=True,opened=True,size='xl')
)
@callback(
Output("popover", "is_open"),
[Input("toggle", "n_clicks")],
[State("popover", "is_open")],
)
def toggle_popover(n, is_open):
if n:
return not is_open
return is_open
@callback(
# [ Output("grid", "rowData")],
Input("my-button", "n_clicks"),
State("column_populate", "value"),
State("grid", "columnDefs"),
State("grid", "rowData"),
)
def remove_column(n_clicks, column_name, input_columnDefs, row_data):
if n_clicks is None or column_name is None:
return no_update
data = pd.DataFrame.from_records(row_data)
data = data.drop(columns=list({column_name, "id"}.intersection(data.columns)))
data.index.name = "id"
print(data)
dash.set_props("grid",{"columnDefs":[
col for col in input_columnDefs if col["field"] != column_name
],"rowData": data.to_dict("records")})
# return data.to_dict("records")
# return [
# col for col in input_columnDefs if col["field"] != column_name
# ], data.to_dict("records")
# app.clientside_callback(
# """async function () {
# var api = await dash_ag_grid.getApiAsync("grid")
# api.redrawRows();
# return dash_clientside.no_update
# }""",
# Output("grid", "id"),
# Input("grid", "virtualRowData"),
# )
if __name__ == "__main__":
app.run(debug=True)
After running the app - click on the toggle button and select a column name and then click remove - check the console and it hits that maximum depth issue.
