How to Create a Material-UI Table Sticky Column in Only Three Lines of Code

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.

(Video version of this article here.)

Code Sandbox link is in the Resources section.

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.


Related: Test your JavaScript proficiency with these 50 questions!


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:

  1. Create a css class containing the three style properties mentioned above (the class is named “sticky” in my example).
  2. In the first TableCell component in TableHead > TableRow, add the sticky class.
  3. In the first TableCell of the rows map of the TableBody, add the sticky class.

After these three things, you should have a sticky first column.

In order to demonstrate the “sticky” nature of the column, I set TableContainer maxWidth: 400.

Sticky Column for Vanilla HTML table Elements

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.

Dev Tools tells the truth

Additional Resources

View Code Sandbox Here

Read this article to learn about an enhanced Material-UI Table library called Material Table for React.

This article on sticky columns on pure HTML tables was very helpful and may be good additional reading.

Share this post:

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.