I am trying to use MUI table with Collapse to expand/collapse rows. However when using collapse, the the expanded rows are squashed into one cell. How can I align the cells to the parent table?

 export default function App() {
  const [expanded, setExpanded] = useState(false);

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell />
          <TableCell>Header 1</TableCell>
          <TableCell>Header 2</TableCell>
          <TableCell>Header 3</TableCell>
          <TableCell>Header 4</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell onClick={() => setExpanded(!expanded)}>Expand</TableCell>
          <TableCell>A</TableCell>
          <TableCell>B</TableCell>
          <TableCell>C</TableCell>
          <TableCell>D</TableCell>
        </TableRow>
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <TableRow>
            <TableCell />
            <TableCell>E</TableCell>
            <TableCell>F</TableCell>
            <TableCell>G</TableCell>
            <TableCell>H</TableCell>
          </TableRow>
        </Collapse>
      </TableBody>
    </Table>
  );
};

Removing the Collapse results in the correct format. e.g. current state is:

Desired result (after expanding is)

I am trying to use MUI table with Collapse to expand/collapse rows. However when using collapse, the the expanded rows are squashed into one cell. How can I align the cells to the parent table?

 export default function App() {
  const [expanded, setExpanded] = useState(false);

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell />
          <TableCell>Header 1</TableCell>
          <TableCell>Header 2</TableCell>
          <TableCell>Header 3</TableCell>
          <TableCell>Header 4</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell onClick={() => setExpanded(!expanded)}>Expand</TableCell>
          <TableCell>A</TableCell>
          <TableCell>B</TableCell>
          <TableCell>C</TableCell>
          <TableCell>D</TableCell>
        </TableRow>
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <TableRow>
            <TableCell />
            <TableCell>E</TableCell>
            <TableCell>F</TableCell>
            <TableCell>G</TableCell>
            <TableCell>H</TableCell>
          </TableRow>
        </Collapse>
      </TableBody>
    </Table>
  );
};

Removing the Collapse results in the correct format. e.g. current state is:

Desired result (after expanding is)

• javascript
• css
• reactjs
• material-ui

Share Improve this question Follow asked Dec 30, 2021 at 1:05 RppRpp 11322 silver badges1212 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Here is how I did it:

<Table>
    <TableHead>
        <TableRow>
          <TableCell padding="checkbox"/>
          <TableCell>Area name</TableCell>
          <TableCell>2011</TableCell>
          <TableCell>2012</TableCell>
          <TableCell>2013</TableCell>
          <TableCell>2014</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell padding="checkbox">
            <IconButton
              size="small"
              onClick={() => setOpen(prev => !prev)}
            >
              {open ? <KeyboardArrowUpIcon/> : <KeyboardArrowDownIcon/>}
            </IconButton>
          </TableCell>
          <TableCell ponent="th">Paris</TableCell>
          <TableCell>1000</TableCell>
          <TableCell>2000</TableCell>
          <TableCell>3000</TableCell>
          <TableCell>4000</TableCell>
        </TableRow>
        <TableRow sx={{ visibility: open ? 'visible' : 'collapse' }}>
          <TableCell padding="checkbox"/>
          <TableCell ponent="th">1er arondissement</TableCell>
          <TableCell>100</TableCell>
          <TableCell>200</TableCell>
          <TableCell>300</TableCell>
          <TableCell>400</TableCell>
        </TableRow>
      </TableBody>
    </Table>

The trick being sx={{ visibility: open ? 'visible' : 'collapse' }} on the TableRow you want to be collapsible.

The problem is that the <Collapse /> ponent is a div, and divs can't be wrapped around table rows. You need to make a second table inside the Collapse, and align the cells so they are all the same size.

Codesandbox demo.

I just tweaked above answer so that each rows can be expanded or collapsed on clicking.

import {
  Collapse,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from '@mui/material'
import { useState } from 'react'

export default function App() {
  const Row = () => {
    const [exp, setExp] = useState(false)

    return (
      <>
        <Table>
          <TableBody>
            <TableRow>
              <TableCell onClick={() => setExp(!exp)}>Expand</TableCell>
              <TableCell colSpan={4}></TableCell>
            </TableRow>
          </TableBody>
        </Table>
        <Collapse in={exp} timeout='auto' unmountOnExit>
          <Table>
            <TableBody>
              <TableRow>
                <TableCell />
                <TableCell>E</TableCell>
                <TableCell>F</TableCell>
                <TableCell>G</TableCell>
                <TableCell>H</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </Collapse>
      </>
    )
  }

  return (
    <>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell />
            <TableCell>Header 1</TableCell>
            <TableCell>Header 2</TableCell>
            <TableCell>Header 3</TableCell>
            <TableCell>Header 4</TableCell>
          </TableRow>
        </TableHead>
      </Table>
      {Array(5)
        .fill()
        .map(item => (
          <Row />
        ))}
    </>
  )
}

Codesandbox demo