I don't see any examples or questions about adding another muitable INSIDE an expandable row.

[aahock]

In many use cases, there is a summary -> detail view. For instance, a table of patients, where each patient is an expandable row that would have another table of all the doctor encounters for that patient. Then there could even be an equal level expansion into all the tests ordered for that patient, or another nested table with tests ordered based on that encounter.

something like this:

Patient1 Row --PatientEncounters --Encounter1 Row ----Patient Orders ----Order 1 Row ----Order 2 Row --Encounter2 Row ... Patient2 Row

or

Patient1 Row --PatientEncounters --Encounter 1 Row --Encounter 2 Row --PatientTestOrders --Order 1 Row --Order 2 Row Patient2 Row ...

The same use case would be relevant in the financial world. But I don't see any examples on if this is possible w/muitables.

I'm not asking for an example. I just want to know if it is possible, or will there be element id conflicts when attempting this. Of course, an example would also be great. If someone tells me nested muitables is not an issue I can work on providing an example.

[patorjk]

The table doesn't have any baked in ability to handle nested data like that, however, I believe it would be possible to do. What would need to happen would be Patient1's renderExpandableRow would render a table row that had a MUIDataTable inside of it. This table would have expandable rows that showed the orders.

The Patient1 data could store the data for the sub-tables in a hidden column (display: "excluded"). Additionally, to avoid showing a table toolbar and footer for the nested table, custom toolbars/footers could be inputted to the sub-table that made sure they didn't display.

This is just an idea though, I haven't tried it out.

[aahock]

Ok thanks. I had been writing a table that will accomplish this. Stopped working on it, after seeing the extra features I would get from using muitable. But it sounds like a hack to get it to work. Guess I'll just continue duplicating most of your features, which seems a tremendous waste of resources, but my client needs the functionality of the above use cases.

Really wanted to not have to do this! Would be a great addition IMO for future release. But I'm the only person who has asked fo it, so I don't see that happening anytime soon. Thanks for the quick response.

[patorjk]

It might make more sense to fork this table and add that feature, rather than the other way around.

You could then also submit a PR for possible inclusion back here. Creating a datatable is more work than it seems, and there's a lot of benefit to using one that others are using (community updates, bug fixes, etc). I actually forked this table a year ago for a rather large project I was working on. When I saw the previous maintainer had left, I reached out to Greg and he let me take over (a lot of the 3.0 updates were updates from my fork - I'd been periodically syncing back up with this library so my fork wasn't out of date).

For a nested structure to work with this data, the transformData routine would have to structure the data in a way to allow this. Right now it creates an array of arrays (each of these arrays represent a row). One idea could be to add a "nested" property to the row arrays that would contain the data to display when the row is open (and these nested rows could also have their own "nested" property). A property may also need to be added that would specify if the row was open or closed.

Rendering these rows would seem pretty straight forward, TableBody would just need to be updated to render the nested rows, though this might require some thought on the best way to do this.

I don't have any immediate need for this feature so it's not really on my radar. Good luck with whatever you choose to do.

[aahock]

Hi patorjk. That's a good idea. The quality of your knowledge of REACT is much greater than mine, though I've done java and C#/VB.NET for decades (Really happy to move away from M$!). But I have a deadline, and most of the features I need I've already implemented (search, add/remove columns for display/export/print via icons, sorting, selection, paging. The only thing left is grouping, and I'm much more familiar w/my code.

I would also have to change the selecting use case you implemented. I have no need for multiple selecting rows, or delete, so would need to remove that, and need to add other actions to the row like a popup menu via an icon that shows all the actions that can be accomplished in selecting the row.

I would definitely learn more by going through your code, and adapting it to my needs, but my client would fire me for being late.

Wish I'd found you 3 months ago. I didn't notice the mention in material-ui table until last week.. I truly appreciate your quick responses.

[patorjk]

No worries, good luck with your project.

[cahna]

I am also using a nested muitable inside an expandable row. I have found that dragging columns in the outer muitable will affect the nested muitable while being dragged. Once the outer column is dropped, the inner muitable's columns revert back to the correct ordering. I will create a sandbox to demo.

[cahna]

See this sandbox: https://codesandbox.io/s/fervent-minsky-9eem8?file=/src/App.js

Try:

1. Expand a row
2. Drag a column on the outer MUIDataTable
3. Watch the inner MUIDataTable's columns move along with the outer columns
4. Release/drop the outer column

Once complete, the columns will be in the correct positions. It only looks strange when dragging the column.

[patorjk]

Ah, I didn't even think of nested tables. This line's the problem:

https://github.com/gregnb/mui-datatables/blob/master/src/hooks/useColumnDrop.js#L131

I'll have to have each instance of the table generate a unique ID, and then add that to the selector. If you can, can you create a separate issue for this? This should be a straight forward fix.

[cahna]

Thanks! :) Created: https://github.com/gregnb/mui-datatables/issues/1406

[aahock]

Yikes, now this looks promising. Please let me know when this fix is made. I'm going to put off continuing work on what I'm doing and move on to another part of the project. It would truly be great if I didn't have to recreate the wheel to get the feature I need. I've done that all too many times already!

Thanks guys!

[wdh2100]

@aahock released 3.2.0

codesandbox: https://codesandbox.io/s/crazy-borg-dwx60?file=/src/App.js