Dash AG Grid table in a Dash AG Grid table with custom component

Hi, I have just started experimenting with Dash AG grid and like that we are able to create custom components for it.

I have two different Dash AG grid tables, and I want in one of it to be able to have a button which will open the other one.
In the first one I edit some things, but then I need more granularity to add different things on that row, and therefore I need the second table within that row.

This is the component for the button, but I don’t know how to place the other dash AG grid table in.

//button for table

dagcomponentfuncs.TableButton = function (props) {
    const {setData, data} = props;

    function onClick() {
    return React.createElement(
            onClick: onClick,
            className: props.className,

Any suggestions will be welcome. Thanks!

Hello @kjurukova,

Welcome to the community!

To clarify, you want to display the table below the button when clicked?

Could you perhaps edit the extra info in a pop out grid?

Thank you @jinnyzor !

Yes I want to display the table on click, like a popup basically, but it’s more configuration like that I need to show, so that’s why just info is not enough.

This is how the second table would look like, it has components in itself:

Note this is a standard feature in AG Grid Enterprise. See the Master Detail section of the docs

See more examples in the AG Grid docs:



You can also just have a modal pop out with the extra row info that you want to adjust, either on cellRendererData or cellClicked


That is one way, although I would be a bit tricky because I add new rows in the second table where I make configurations depending on how many combinations the user will need to configure…

But thank you for your input!!!

You can have the second table make rows into the new table via a callback or using the rowTransactions.

Can you work up an MRE and then explain when you want there to be more rows added?