I am using the Material UI Grid component for my Grids in a React application which are rendered based on data coming back from an external API. I have a requirement to add a column that allows rows to be expanded to render additional child content beneath each row, as you can do using DataTables here https://datatables.net/examples/api/row_details.html

Essentially I want to be able to create a nested row and render a component into it dynamically per row.

I dont have any example code of what I have tried as I cannot find anything obvious online or in the Material UI documentation to really get me started.

CodePudding user response：

Well, you are talking about Grid component but this component is mainly used to create layouts instead (https://mui.com/components/grid/#main-content).

What you are searching for is the following:

https://mui.com/components/tables/#collapsible-table

A table with expandable rows.