CODEWITHSUNDEEP
reactjstypescriptmaterial-uimaterial-table
Anurag Mishra
Anurag Mishra

Reputation: 699

How to add vertical scroll to my React material table?

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 ?

Upvotes: 0

Views: 6535

Answers (2)

Nikhil Waykos
Nikhil Waykos

Reputation: 924

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

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

Upvotes: 2

user0101
user0101

Reputation: 1517

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

Upvotes: 0

Related Questions