How to add vertical scroll to my React material table?

Question

I want to add vertical scroll if my data is too long. Horizontal scroll is working fine is data is too large but I am not getting how to vertical scroll in material table in react typescript ?

My code is -

{isLoading ?
        (<Spinner></Spinner>)
        : error && error.length > 0 ?
          (<ErrorDetails error={error}></ErrorDetails>)
          : result && (<div className={classes.root}>
            {result && result.length > 0 ?
              (<><MaterialTable
                icons={icons}
                columns={columns}
                data={result}
                options={{
                  exportButton: true,
                  sorting: true,
                  search: false,
                  paging: false,
                  fixedColumns: {
                    left: 2,
                  },
                  toolbar: false
                }}
              /> <section className={classes.rightToolbar}>
                  <Link className={classes.a} to="/scenarioDetails">
                    <OutlinedButtons></OutlinedButtons>
                  </Link>
                </section></>)
              : (<NoRecords></NoRecords>)}
          </div>)}</>)

I have not added horizontal scroll but still it's working fine. But I wanna add vertical scroll so how can I get it done ?

Nikhil Waykos · Accepted Answer · 2021-04-14 09:46:09Z

2

you can use maxBodyHeight property, which will create vertical scrollbar if data exceeding the given height.

<MaterialTable
    options={{
      maxBodyHeight: 400,
    }}
/>

answered Apr 14, 2021 at 9:46

Nikhil Waykos

9247 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Radwan Nizam Over a year ago

That was a helpful answer to fix the height of table body. Is there a way to fix the location of table navigation bar (next, last, first, etc..). It means, having the scrollbar just over the navigation bar

user0101 · Accepted Answer · 2020-05-27 10:20:42Z

0

It's not up to MaterialTable props/settings. You might want to place the table within fixed height HTMLElement

answered May 27, 2020 at 10:20

user0101

1,5772 gold badges13 silver badges18 bronze badges

2 Comments

Anurag Mishra Over a year ago

so how can I fix height in this case ?

user0101 Over a year ago

It's based on your layout. The table will now take as much space as the data needs. In order to have a vertical scrollbar you would have to limit table's container height.

Collectives™ on Stack Overflow

How to add vertical scroll to my React material table?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related