Summary

The web content provides a comprehensive guide on how to customize the row height in Material-UI tables using class overrides and styled components.

Abstract

The article "The Ultimate Guide To Material-UI Table Row Height" offers developers a detailed walkthrough on adjusting the default row height in Material-UI tables. It addresses the challenge of overriding the minimum height of 56px that is typically difficult to modify. The guide presents two methods for setting the table row height: through class-based overrides using makeStyles from @material-ui/core, and by creating styled components with withStyles. The author emphasizes the importance of removing default vertical padding from TableCell components to achieve the desired row height. Additionally, the article provides a Codesandbox demo for practical reference and suggests that understanding Material-UI's styling syntax can be challenging, often requiring in-depth knowledge that may not be easily found in the official documentation or through a simple web search.

Opinions

The author acknowledges that finding the correct syntax for styling changes in Material-UI can be difficult, indicating a potential gap in the framework's documentation.
The use of makeStyles and withStyles is recommended for effectively overriding default styles in Material-UI components.
The article implies that the Material-UI community may struggle with custom styling, as evidenced by a GitHub thread discussing the challenges of implementing small style changes.
The author endorses their book, "Styling Material-UI Components," as a resource for gaining a deeper understanding of Material-UI's styling APIs and component customization.
The inclusion of a Codesandbox demo suggests a preference for practical, hands-on examples to complement written guides and documentation.

The Ultimate Guide To Material-UI Table Row Height

Setting Table Row Height Using Class Overrides and Styled Components

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. Here is the Codesandbox for this demo. 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.

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.

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.

If you want to gain an in-depth understanding of Material-UI syntax and APIs for styling components, I recommend you read my book, Styling Material-UI Components (affiliate link). I cover the class object API, Styled Components, and overriding components using the theme. Furthermore, there are many more examples of custom component styling.

Resources

Codesandbox:

Docs: https://material-ui.com/components/tables/

Originally published at https://smartdevpreneur.com on December 22, 2020.