Can you add a button inside a custom TableCell in material UI? - reactjs

Question

Currently, I am creating a table with material-ui, and the last column of the TableHead should contain an upload button. Something like this:
image
I have tried the following:
const StyledTableCell = withStyles((theme) => ({
head: {
color: theme.palette.text.dark,
backgroundColor: theme.palette.success.light,
},
body: {
fontSize: 14,
}
}))(TableCell);
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="left">Position</StyledTableCell>
<StyledTableCell align="right">Defect Type by Worker</StyledTableCell>
<StyledTableCell align="right">Tool Decision by Worker</StyledTableCell>
<StyledTableCell align="center">
<Button variant="contained" color="primary">
Upload
</Button>
</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
...
</TableBody>
</Table>
</TableContainer>
But react will not render if you directly add a button component inside a custom tablecell. Is there a way to add a button inside a custom tablecell? Thank you.

Answer 1

I try your code and because you didn't provide the StyledTableRow code so I change it to TableRow and the button is working fine.
So maybe your problem is in the StyledTableRow, you can try my code like below:
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<StyledTableCell align="left">Position</StyledTableCell>
<StyledTableCell align="right">Defect Type by Worker</StyledTableCell>
<StyledTableCell align="right">Tool Decision by Worker</StyledTableCell>
<StyledTableCell align="center">
<Button variant="contained" color="primary">
Upload
</Button>
</StyledTableCell>
</TableRow>
</TableHead>
</Table>
</TableContainer>