Hello Dash team,
I am trying to implement a custom Mantine Menu cell renderer in Dash AG Grid, to act as a sort of row action menu. I used the first example from the mantine docs as the basis, then built a js component function off of this.
When the grid attempts to render, I encounter 2 different issues depending on the parameters I pass into React.createElement() for the Menu component - see the last few lines of included minimal app to demo the issue. Neither variant works for me.
Issue #1 - If I include a props argument as either null or an empty dictionary I get the error - "Cannot read properties of undefined (reading ‘type’)
let menu = React.createElement(
window.dash_mantine_components.Menu,
{},
[menutarget, dropdown]
);
Issue #2 - if I remove the props argument altogether, the error goes away but nothing renders in the grid.
let menu = React.createElement(
window.dash_mantine_components.Menu,
// {},
[menutarget, dropdown]
);
Here is the minimal app to reproduce the problem. As a comparison to what I’m after, I included a column that implements a DBC dropdown - thanks to @AnnMarieW, but can’t get the DMC Menu variant to work. Also in this demo, I added the sample from Mantine outside of the grid to show their component does work.
Any insight into what I’m missing would be appreciated.
import dash_ag_grid as dag
from dash import html, register_page, register_page, callback, set_props, Input, Output, State, dcc, html, ctx, no_update, MATCH, ALL, Dash, _dash_renderer
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
data = [
{"type": "Social Media", "links": "link"},
{"type": "Development", "links": "link"}
]
columnDefs = [
{
"field": "type",
"headerName": "Link Type",
},
{
"field": "links",
"headerName": "DBC Dropdown Menu",
"cellRenderer": "DBC_Menu",
"cellStyle": {"overflow": "visible"}
},
{
"field": "links",
"headerName": "DMC Dropdown Menu",
"cellRenderer": "DMC_Menu",
"cellStyle": {"overflow": "visible"}
},
]
grid = dag.AgGrid(
id="custom-component-btn-grid",
columnDefs=columnDefs,
rowData=data,
columnSize="autoSize",
dashGridOptions={"rowHeight": 48}
)
dropdown = html.Div(
[
dmc.Text(id="menu-text", mb="md"),
dmc.Menu(
[
dmc.MenuTarget(dmc.Button("Click for options!")),
dmc.MenuDropdown(
[
dmc.MenuItem(
"External Link",
href="#/action-2",
target="_blank",
),
]
),
]
),
]
)
app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP])
_dash_renderer._set_react_version('18.2.0')
app_layout = html.Div(
[
html.H1("Dash AG Grid + Dropdown Menu"),
grid,
html.Div(children="", id="div-selected-action"),
dropdown
]
)
# for Dash Mantine 0.14
app.layout = dmc.MantineProvider(
app_layout
)
@callback(
Output("div-selected-action", "children"),
Input("custom-component-btn-grid", "cellRendererData"),
prevent_initial_update=True
)
def cb_menu_action(data):
return f"You selected - {data}"
if __name__ == "__main__":
app.run(debug=True)
"""
Include this function in dashAgGridComponentFunctions.js
dagcomponentfuncs.DMC_Menu = function (props) {
const setValue = props.setValue;
function setProps(params) {
console.log("setProps", params)
if (params.value){
setValue(params.value);
};
}
let dropdown = React.createElement(
window.dash_mantine_components.MenuDropdown,
[
React.createElement(window.dash_mantine_components.MenuItem, {href: "#/action-2", target: "_blank"}, "External Link")
]
);
let menutarget = React.createElement(window.dash_mantine_components.MenuTarget,
{},
React.createElement(
window.dash_mantine_components.Button,
{
setProps: setProps,
},
"Click for options!"
)
);
let menu = React.createElement(
window.dash_mantine_components.Menu,
{},
[menutarget, dropdown]
);
return menu;
};
"""
Error from issue #1, including the props arg
Missing content from issue #2, where I’ve commented out the props arg
package info for relevant libraries
