Material-table: Invoking action on any row causes collapsing of nested rows

[JKrymarys]

Describe the bug
Table used on my website consist with 3 layers of nested rows. Each of them has same set of actions. The issue is that, when I am invoking actions (clicking the button) on the any of the nested rows it causes collapse of all.

This is unwanted, as it breaks the functionality :)

I tried using _onTreeExpandChange_ method, but I couldn't influence this anyhow.

Expected behavior
I would like rows to stay expanded after the action is invoked.

[mbrn]

Hi @JKrymarys,

Can you share your code please. If you send data directly to component it would be. You should use data from your state.

[JasonLunsford]

I'm also experiencing this issue. Our tree can have 3 or greater levels of depth and after the third level is reached - boom - branch collapses.

[JKrymarys]

Hi Guys,
So in my case code looks like:

actions property in table:
actions={[ { icon: "more_vert", tooltip: "More", onClick: this.handleActionsClick } ]}

while the function handleActionsClick looks like:
handleActionsClick = (event, rowData) => { this.setState({ anchorEl: event.currentTarget, rowData: rowData }); };

Apparently "setState" causes collapsing of the tree. I tried also to ivoke setState in the "onClick" handler - the result was the same.

[natalia-migas]

Hi, I have this problem as well and I find it really annoying. @mbrn you can check it in docs: https://material-table.com/#/docs/features/tree-data

When you check/uncheck a checkbox on the expanded child row, the whole table is rerendering and all rows are collapsing.

[JKrymarys]

Table is apparently not remembering which rows were expanded.

I think that component should check it and pass to the re-render function.

[natalia-migas]

Hi, refering to my last comment this issue should be labeled "bug" :) Are you gonna look at this problem, pls?

[JKrymarys]

Hi @mbrn !
Any updates on this issue? :)

[TheGoodSpinach]

Hey, running into this issue on one of our tree grids, specifically when filtering. You can replicate it here:

https://codesandbox.io/s/keen-bassi-nuecq?fontsize=14

Steps to reproduce:

1. Type "foo" into filter

2. Expand "foo" row

3. Select "bar" row checkbox

4. "foo" row collapses again

I believe this may be related to the problems experienced by others in this thread, where tableData is not preserving the isTreeExpanded field correctly between renders.

[res63661]

Also getting. FYI was fine until i upgraded to latest material-ui

[esjayrockz]

Same issue happening.

[res63661]

I was able to get a fix by commenting out the following lines in material-table/idst/utils/datamanager.js

..line 665:
this.data.forEach(function (row) {
row.tableData.isTreeExpanded = false;
}); // expand the tree for all nodes present after filtering and searching

Issue: I think what's happening is that there is this brute forcing of isTreeExpanded on all the rows to false with the expectation that the correct expansions would be reset after applying search filtering. Not sure why this is necessary. The subsequent re-application of the expansions is non-existent or failing.

Still testing but haven't noted any adverse side effects yet.
Please sound off here if you do. Working on a PR but may take me a few days...

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.

[rozwell]

Quick solution for those who would like to have control over the expansion:

parentChildData={(row, rows) => {
    row.tableData.isTreeExpanded = false; // overrides fixed behavior after filtering/searching
    return rows.find(v => v.id === row.parent_id);
}}

Here is the source of the issue: https://github.com/mbrn/material-table/blob/a4659411489b1fb469096f92505b11a5f6157a6c/src/utils/data-manager.js#L856