Material UI react missing action table header

0
votes

I'm currently using material UI and I want to add an action button in my material table but when I tried to add a table it's not showing the action header.

enter image description here

enter image description here

1
reactjsmaterial-uimaterial-table

1 Answers

2
votes

Generally, you would have to add another TableCell to your TableRow inside TableHead since the body is not linked to your header row.

I would recommend naming the header of this column something like "Actions" in case you add more "actions".

<TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            ...
            <TableCell> Actions </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          ...
        </TableBody>
      </Table>
</TableContainer>

If you want to add a Tooltip, you can try wrapping it inside a Tooltip component (Material-Ui Tooltip)

<TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            ...
          </TableRow>
        </TableHead>
        <TableBody>
          ...
          <Tooltip title="Save User">
             <Button/>
          </Tooltip>
        </TableBody>
      </Table>
</TableContainer>