What Is the Way to Add Horizontal Scroll on Material-Ui Table With Many Columns

How to add horizontal scroll in Material UI grid

Notice that when you shrink the window of the browser then it appears horizontal scrollbar. Horizontal scrollball only appears when the content overflows outside the browser window. Try to set the width of your root wider than the wide of your browser window. For example 2000px. And delete the width: "100%"

How to implement horizontal scrolling of tiles in MUI GridList?

Note: In the newer versions of MUI, GridList's been changed to ImageList, the code below uses the latest API.

You can fill the column instead of row by using the code below:

<ImageList
sx={{
gridAutoFlow: "column",
gridTemplateColumns: "repeat(auto-fill,minmax(160px,1fr)) !important",
gridAutoColumns: "minmax(160px, 1fr)"
}}
>
{images.map((image) => (
<ImageListItem>
<img src={image.thumbnail.uri} />
<ImageListItemBar title={image.thumbnail.name} />
</ImageListItem>
))}
</ImageList>
  • gridAutoFlow: 'column': Tell the grid to create another column if there is no space left instead of going to the next row.
  • gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))': Set the column min and max width, min is 160px, if there is more than enough space (no need for horizontal scrollbar), set each column width equally.
  • gridAutoColumns: 'minmax(160px, 1fr)': Same as above but for the columns outside of the viewport.

Live Demo

V5

Codesandbox Demo

V4

Codesandbox Demo

References

  • https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
  • https://css-tricks.com/snippets/css/complete-guide-grid/

Material UI grid with independent scrolling columns

In my determination to recreate how I used to do it in bootstrap (https://jsfiddle.net/aq9Laaew/226591/) I was actually able to get it working in Material UI as well. And since I wasn't able to find any sort of examples of this online for this specific use case (React / Material UI scrollable columns), hopefully this will help someone else.

Here is the example: https://codesandbox.io/s/z24wl3n58m

html,
body {
margin: 0;
height: 100%;
}

#root {
height: 100%;
display: flex;
flex-direction: column;
}

.flex-section {
flex-grow: 1;
display: flex;
flex-direction: column;
min-height: 0;
}

.flex-col-scroll {
flex-grow: 1;
overflow: auto;
min-height: 100%;
}

.flex-no-shrink {
flex-shrink: 0;
}

What I was missing was setting the flex on the root. Once we do that, then we can utilize flex-section, flex-col-scroll, and flex-no-shrink (the latter of which is used to prevent elements above the scrolling from being compressed)

Grid in material ui causes horizontal scroll- React

I had the same issue. I figured out a couple solutions but neither feel very elegant:

Disable spacing

Unfortunately this removes all padding from child grid items within the container:

<Grid container
spacing={0}>

Manually fix the CSS

This is what I ended up doing:

<Grid container
style={{
margin: 0,
width: '100%',
}}>


Related Topics



Leave a reply



Submit