How to Customize Material-UI Table Horizontal and Vertical Scrolling

Material-UI Table vertical and horizontal scrolling can be configured with only a few simple steps. We can force the scrollbars to appear or disable them completely. Additionally, the scrollbar and scroll thumb can styled with WebKit to create a truly customized user experience.

In this demo we will create the table from the screenshot below (the x scrollbar is disabled but I will show how to enable it).

Material-UI Table with styled vertical scrolling
Material-UI Table with styled vertical scrolling

A Code Sandbox with a live example is in the Resources section. A YouTube version of this article is here.

Material-UI Table Vertical Scrolling

There are two primary steps to force the vertical scrollbar to be visible:

  • Set a fixed height on the element that wraps the Table component. Often this will be a div or a MUI TableContainer component.
  • Set the height of the Table to be larger than the height of the wrapping component. I recommend that you accomplish this using height: "max-content".

Take a look at the code below:

<TableContainer
  sx={{
    height: 200    
  }}
>
  <Table
    sx={{
      height: "max-content"
    }}
  >
  //Child components
  </Table>
</TableContainer>

The actual Code Sandbox example has additional styling code and child components.

It also has enough rows that it naturally requires more than 200px to render all the rows at the same time. The Table component likely will size itself based on row height, but if you are having difficulty getting the scrollbar to appear then set Table height to max-content. This allows the Table to dynamically size itself based on child elements.

If you need to disable vertical scrolling, set overflowY: "hidden" on the TableContainer.

Material-UI Table Horizontal Scrolling

There are two primary steps to force the horizontal scrollbar to be visible:

  • Set a fixed width on the element that wraps the Table component. I am using a MUI TableContainer in my example.
  • Set the width of the Table to be larger than the width of the wrapping component. I recommend that you accomplish this using width: "max-content".
<TableContainer
  sx={{
    width: 400    
  }}
>
  <Table
    sx={{
      width: "max-content"
    }}
  >
  //Child components
  </Table>
</TableContainer>

The Code Sandbox example has five columns wrapped by the Table. These columns are each 100px, so they require more than the 400px width of the TableContainer. This naturally forces a scrollbar to render on the TableContainer.

For horizontal scrolling you will definitely need to set Table width to max-content. Otherwise the width of each cell will squish down to the width of each cell’s contents. It will ignore any width you set on the cells if the wrapping component is too narrow.

I also tried setting overflow: "scroll" to see if that would work instead of setting width to max-content. It did make the scrollbar track appear, but the scrollbar thumb did not appear because the TableContainer still was not actually scrollable.

If you need to disable horizontal scrolling, set overflowX: "hidden" on the TableContainer.

Material-UI Table Disable Scroll

If you need to disable scrolling or hide the scrollbar, a few quick options are:

  • overflow: "hidden" on the TableContainer sx prop.
  • Don’t set a fixed width or height on the TableContainer.
  • Use table pagination or infinite scroll so the sum of the row heights is less than the height of the TableContainer.

Material-UI Table Scrollbar Styling With Webkit

Using WebKit in Material-UI requires syntax that looks like syntax for nested selectors. Notice the &:: in each WebKit selector:

<TableContainer
  sx={{
    "&::-webkit-scrollbar": {
	  width: 20
    },
    "&::-webkit-scrollbar-track": {
	  backgroundColor: "orange"
    },
    "&::-webkit-scrollbar-thumb": {
	  backgroundColor: "red",
	  borderRadius: 2
    }
  }}
>

Styling the MUI Table scrollbar with WebKit required a tricky first step that took me a while to figure out: I had to set a width using -webkit-scrollbar before I could style the track and thumb. I’m not sure why this is required.

Once that was in place, I used "&::-webkit-scrollbar-track" to set a background color and "&::-webkit-scrollbar-thumb" to change the scrollbar thumb background color and give it rounded edges.

Resources

Here’s a tutorial on the basics of the MUI table.

Here’s how to implement a sticky column on the first table column.

Code Sandbox Link

MUI Table Docs

Share this post:

Leave a Comment

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