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

Dash Python
1

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() {
        setData();
    }
    return React.createElement(
        'button',
        {
            onClick: onClick,
            className: props.className,
        },
        props.value
    );
};

Any suggestions will be welcome. Thanks!

2

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?

3

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:

Screenshot 2023-07-25 at 14.53.05
Screenshot 2023-07-25 at 14.53.052776×934 129 KB

4

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:

https://ag-grid.com/react-data-grid/master-detail-custom-detail/#custom-detail-with-grid

2 Likes
5

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

2 Likes
6

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!!!

7

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?