Expand/Collapse TableRow component in Material-UI

reactjs tablerow material-ui
knewsense picture knewsense · Jun 12, 2016 · Viewed 12.9k times · Source

I need to expand the TableRow component to open another div containing some fields. But React throws a warning if I try to add divs in the table body.

warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>. See RowComponent > TableRow > tr > div.

Required functionality is similar to ^ button from the nested list component to collapse / expand. Is there any way to customize the material-ui TableRow to expand/collapse ?

Answer

Chris picture Chris · May 9, 2020

The material-ui site table component page has an example of a "Collapsible table": https://material-ui.com/components/tables/#collapsible-table.

That example is exactly what I was looking for, and I'm sure many others as well.

Related questions

Can you force a React component to rerender without calling setState?

I have an external (to the component), observable object that I want to listen for changes on. When the object is updated it emits change events, and then I want to rerender the component when any change is detected. With …

Read More
Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More
"SyntaxError: Unexpected token < in JSON at position 0"

In a React app component which handles Facebook-like content feeds, I am running into an error: Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0 I ran into a similar error which turned out to be a …

Read More