Expand/Collapse TableRow component in Materail UI

material-ui expansion panel table
material-ui table
material-ui expansion panel onchange
material-ui table fixed header
material-ui table row height
material-ui table border
material-ui/icons
material table

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 ?

Depending on your use-case you may want to use expansion panels instead.

If you still want to use a table, you can set the component prop on the Collapse component. You'll have to use this outside of your original TableRow. Inside of a TableCell or td, you can use any element you want. Check out this codesandbox for a working example.

The interesting snippet:

<Collapse in={open} component="tr" style={{ display: "block" }}>
  <td>
    <div>Expanded data.</div>
  </td>
</Collapse>

The important parts here:

  1. component="tr" tells the Collapse component to use a tr instead of a div
  2. display: "block" to overwrite the default display: "table-row" of the tr component

Expand/Collapse TableRow component in Materail UI � Issue #4476 , Is there any way to customize the material-ui TableRow to expand/collapse ? I'm adding a stripped down version of how I'm trying to add a div in� Expand/Collapse TableRow component in Materail UI #4476. Expand/Collapse TableRow component in Materail UI #4476. shiveeg1 opened this issue Jun 12,

This solution works, you can also add colSpan to the TableCell that contains the Collapse to match the border width with the number of TableCells at the top.

function ExpandingRow({ summary, details }) {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <TableRow hover onClick={() => { setOpen(!open) }}>
        <TableCell>
          {summary}
        </TableCell>
      </TableRow>

      <TableRow>
        <TableCell style={{ padding: 0 }}>
          <Collapse in={open}>{details}</Collapse>
        </TableCell>
      </TableRow>
    </>
  )
}

TableRow API, Should be valid <tr> children such as TableCell . classes, object, Override or extend the styles applied to the component. See CSS API below for more details. 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 ?

<div> is not supported inside a TableRow. Removing the <div> tag and using a Card component in its place worked for me.

You can see the code here : https://github.com/shiveeg1/tracker-quick-entry/blob/master/src/components/super-row.js

Also there are multiple alternatives provided on this thread which were very helpful: https://github.com/mui-org/material-ui/issues/4476

Collapse API, The content node to be collapsed. classes, object, Override or extend the styles applied to the component. See CSS API below for more details. Testing a <Switch /> component with React Testing Library, can't simulate a click event hot 2 TreeView Expand all Nodes - material-ui hot 2 TypeError: color.charAt is not a function hot 2

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.

ExpansionPanel API, The API documentation of the ExpansionPanel React component. Learn more expanded, bool, If true , expands the panel, otherwise collapse it. Setting this� [x] This is not a v0.x issue. <!-- (v0.x is no longer maintained) --> [x] I have searched the issues of this repository and believe that this is not a duplicate.; The ripple effect of material UI buttons with href links hangs infinitely, when clicked repeatedly and very fast.

Table React component, Collapsible table. An example of a table with expandable rows, revealing more information. It utilizes the Collapse component. Testing a <Switch /> component with React Testing Library, can't simulate a click event hot 2 onloadwff.js:71 Assertion failed: Input argument is not an HTMLInputElement hot 2 TypeError: color.charAt is not a function hot 2

Expand/Collapse TableRow component in Materail UI, 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� Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client.

Expand/Collapse TableRow component in Materail UI, See RowComponent > TableRow > tr > div. Required functionality is similar to ^ button from the nested list component to collapse / expand. Is there any way to� Stack Overflow Public questions and answers; Teams Private questions and answers for your team; Enterprise Private self-hosted questions and answers for your enterprise; Jobs Programming and related technical career opportunities

Comments
  • You can use github.com/gregnb/mui-datatables
  • Are there solution to avoid divs within <tr>? <tr><div><td/></div> ?
  • This suggestion still throws the warning Warning: validateDOMNesting(...): <td> cannot appear as a child of <div>