The Ultimate Guide To Material-UI Table Row Height

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.

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.

Table of Contents hide

1 Set Material-UI Table Row Height with Class Override

2 Set Material-UI Table Row Height with Styled Components

3 Key Takeaways

4 Resources

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.