emilhe / dash-extensions

The dash-extensions package is a collection of utility functions, syntax extensions, and Dash components that aim to improve the Dash development experience

Home Page:https://www.dash-extensions.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How do you render Dash components passed to other components?

gaboc623 opened this issue · comments

Hello!

I am porting over MUI's DataGrid to Dash and want to pass any kind component (ie. dbc.Button, dcc.Inpput, etc) to fields in that table and then have access to them in Dash to wire callbacks to them. As of now, I am unpacking the object into its props using a function from the dash-extensions-js package (https://github.com/thedirtyfew/dash-extensions-js/blob/master/index.js), and then using DataGrid's renderCell (https://mui.com/x/react-data-grid/column-definition/#rendering-cells) call in the column to display those props as a React element; this works fine.

The issue comes when wiring a callback to the element in the table: Dash does not know about the element in the table and gives an "ID is not found" error. If I inspect the page the element is there and it has the correct ID.

I was wondering if someone would be able to talk me through how you all unpack components passed to other components to see if there is something I am missing that would help me unlock that wiring component. Happy to share any code if that would help as well.

Thank you!

The my knowledge, this is currently not possible. It would probably require an update to the Dash renderer itself.

If you manage to get it to work, please let know :)