Material-UI’s table component is a versatile table capable of many customizations. However, finding the proper syntax for simple styling changes can sometimes be challenging.
This guide will show you how to set row height for a table row. By default, MUI Table has a minimum height of about 56px that is difficult to override. Below you will see how to override it using StyledComponents and using class-based overriding.
![Material-UI Table Row Height](https://i0.wp.com/smartdevpreneur.com/wp-content/uploads/2021/11/image-2.png?resize=547%2C155&ssl=1)
The height override will be applied to TableRow height in both the TableHead and the TableBody. The Code Sandbox for this demo is in the Resources section. It is a fork of this Codesandbox found in the MUI docs.
Set Material-UI Table Row Height with Class Override
I will override the TableRow in the TableHead using class based overrides. There are two steps to this for the Table component: set a height in the TableRow, and remove the vertical padding in the TableCell.
I will use makeStyles
, which is part of @material-ui/core
. Below are the classes.
const useStyles = makeStyles({
tableRow: {
height: 30
},
tableCell: {
padding: "0px 16px"
}
});
These classes are then applied like so:
<TableHead> <TableRow className={classes.tableRow}> <TableCell className={classes.tableCell}>Dessert</TableCell> <TableCell className={classes.tableCell} align="right"> Calories </TableCell> <TableCell className={classes.tableCell} align="right"> Fat </TableCell> <TableCell className={classes.tableCell} align="right"> Carbs </TableCell> <TableCell className={classes.tableCell} align="right"> Protein </TableCell> </TableRow> </TableHead>
Remember that all the TableCell components need to have the class name. The TableCell components by default have a paddingTop
and paddingBottom
of 16px. These may push the height of the TableRow to a px count greater than the height you are trying to apply.
Bootstrap table row height is also controlled via classes.
Set Material-UI Table Row Height with Styled Components
Styled Components take a Material-UI component and create an overridden form of that component. Styled Components use withStyles
which is part of @material-ui/core
. I will replace the rows in the TableBody using Styled Components.
***Update for MUI v5: instead of using withStyles, use the new MUI styled() API. It requires less boilerplate code and has the same syntax as the styled-components
library.
Below are the newly created components:
const StyledTableRow = withStyles((theme) => ({ root: { height: 30 } }))(TableRow); const StyledTableCell = withStyles((theme) => ({ root: { padding: "0px 16px" } }))(TableCell);
Once again, I must replace all TableCells within a TableRow in order to acheive the desired height.
<StyledTableRow key={row.name}>
<StyledTableCell component="th" scope="row">
{row.name}
</StyledTableCell>
<StyledTableCell align="right">{row.calories}</StyledTableCell>
<StyledTableCell align="right">{row.fat}</StyledTableCell>
<StyledTableCell align="right">{row.carbs}</StyledTableCell>
<StyledTableCell align="right">{row.protein}</StyledTableCell>
</StyledTableRow>
Key Takeaways
Sometimes the syntax for small styling updates is simply hard to find in the Material-UI docs or even via googling. This thread shows how a seemingly small style change can be difficult to implement for many people. Class-based overriding and Styled Components can often provide the solution you need for Material-UI customization.
Another option is exploring Material Table for React, an enhanced Material-UI Table library.
Resources
Here’s a tutorial on the basics of the MUI table.
Here’s how to add Expand and Collapse to MUI Table rows.
Here’s everything you need to know about Material-UI Table Pagination.