CODEWITHSUNDEEP
reactjsmui-datatable
Tamothee
Tamothee

Reputation: 21

MUI table header and table body not aligned

picture of the problem

from the picture, i got no idea why is the layout like this. the code is lifted from mui docs collapsible table https://mui.com/material-ui/react-table/#collapsible-table with some changes to the data only.

<TableContainer component={Paper}>
            <Table aria-label="collapsible table" >
                <TableHead >
                    <TableRow >
                        <TableCell />
                        <TableCell >sid</TableCell>
                        <TableCell >vid</TableCell>
                        <TableCell >sensorname</TableCell>
                        <TableCell >name</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map((row) => (
                        <Row key={row.sid + row.vid} row={row} />
                    ))}
                </TableBody>
            </Table>
        </TableContainer>

export default function Row(props) {
const { row } = props;
const [open, setOpen] = React.useState(false);

return (
  <React.Fragment>
    <TableRow >
      <TableCell>
        <IconButton
          aria-label="expand row"
          size="small"
          onClick={() => setOpen(!open)}
        >
          {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
        </IconButton>
      </TableCell>
      <TableCell style={{textAlign:'left'}}>{row.sid}</TableCell>
      <TableCell style={{textAlign:'left'}}>{row.vid}</TableCell>
      <TableCell style={{textAlign:'left'}}>{row.sensorname}</TableCell>
      <TableCell style={{textAlign:'left'}}>{row.name}</TableCell>
    </TableRow>
    <TableRow>
      <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
        <Collapse in={open} timeout="auto" unmountOnExit>
          <Box sx={{ margin: 1 }}>
            <Typography variant="h6" gutterBottom component="div">
              Settings
            </Typography>
            <Table size="small" aria-label="purchases">
              <TableHead>
                <TableRow>
                  <TableCell>Date</TableCell>
                  <TableCell>Customer</TableCell>
                  <TableCell align="right">Amount</TableCell>
                  <TableCell align="right">Total price ($)</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {row.history.map((historyRow) => (
                  <TableRow key={historyRow.date}>
                    <TableCell component="th" scope="row">
                      {historyRow.date}
                    </TableCell>
                    <TableCell>{historyRow.customerId}</TableCell>
                    <TableCell align="right">{historyRow.amount}</TableCell>
                    <TableCell align="right">
                      {Math.round(historyRow.amount * 100) / 100}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Box>
        </Collapse>
      </TableCell>
    </TableRow>
  </React.Fragment>
);

i have tried to use css grid.

<Table style={{display: 'grid', gridTemplateColumns: 'repeat(autofit, minmax(100px, 1fr))'}} >

but this gave me a misaligned header and body.

picture of using css grid

i've got no idea what is going on and have been stuck on this for 2 days. any help would be appreciated

Upvotes: 1

Views: 5155

Answers (3)

Ahmad aziz
Ahmad aziz

Reputation: 43

Add back <React.Fragment> to your table row.

<React.Fragment>
(...your row here)
</React.Fragment>

like this.

Upvotes: 0

CodeFox
CodeFox

Reputation: 39

Restore the display property.

<TableHead sx={{ display: "table-header-group" }}>

Upvotes: 3

Tamothee
Tamothee

Reputation: 21

Ok i have found somewhat of a solution. the solution is to remove <TableHead>. I dont know why <TableHead> does not work properly maybe someone more experienced than me could explain.

Upvotes: 1

Related Questions