Material-UI is a popular component library with excellent functionality and slick styling. Sometimes, however, we need just a bit more than what is available “out-of-the-box”.
Material-UI comes with a Table component with significant customizations and styling options. The Table even includes a sticky header option. However, it does not have a prop for setting ‘sticky column’. We will solve that with a quick, light-weight styling solution.
Code Sandbox link is in the Resources section.
***UPDATE for MUI 5: Material-UI moved to a new styling API where styling is applied using the
sx prop. If you are using MUI v5, simply insert the styling code directly into the
sx prop instead of using
makeStyles and classes. I am working on updating my articles, but until I’m finished, read my guide to the MUI sx prop to learn more.
Here’s a YouTube video version of this article, or you can watch it below:
Sticky Column CSS
position: "sticky", left: 0, background: "white"
First, let’s discuss the above CSS. Then we’ll discuss precisely which components to apply it to.
position: "sticky" means the element is treated as
position: "relative" until it’s containing block crosses a specified threshold in the container it scrolls within. In simpler terms, it scrolls until it hits the edge, then sticks to the edge. See this example in the MDN docs.
left: 0 is used in tandem with
position: "sticky" to inform the element where to stick at.
background: white is needed so that it appears that the other cells in each row flow under the sticky first column cell.
If you are uncertain what each property does, check out the code sandbox below and remove/add each property to get an understanding of it.
Also, you might see developers recommend a z-index of >0 for a sticky column. While that may be needed in some cases for cells to “flow under” the stuck column, it is not needed in this Material-UI Table example. It would simply depend on any additional styling applied to other table cells.
Material UI Table Sticky Column Demo
The Codesandbox below is forked straight from the “basic table” example in the Material-UI Table docs.
Here are the three most important parts:
- Create a css class containing the three style properties mentioned above (the class is named “sticky” in my example).
- In the first TableCell component in TableHead > TableRow, add the
- In the first TableCell of the rows
mapof the TableBody, add the
After these three things, you should have a sticky first column.
In order to demonstrate the “sticky” nature of the column, I set TableContainer
Here’s how to style the sticky column so it stands out.
Sticky Column for Vanilla HTML
Instead of making a class, another method would be to target
th:first-child. Material-UI is actually generating an HTML table, as we can see from looking at dev tools. In other words, the class method discussed above and this css selector method described here both work for making a Material-UI Table sticky column or a vanilla HTML sticky column.
My MUI course on Udemy is now available!!! Build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and the theme, and tackle the most challenging components! Do you want an active Q&A with me?!? Check here for coupons for my MUI course on Udemy.
This article on sticky columns on pure HTML tables was very helpful and may be good additional reading.