Horizontal scroll in React Table

Question

I have a problem to get pretty basic functionality, ie. I'd like to set horizontal scroll on React table when the page is less wider then the table size. There is nothing unusual in my code but I'll leave it here anyway:

<ReactTable
  data={bookingPerson}
  columns={columns}
  className="-striped -highlight"
  defaultPageSize={7}
  loading={loading}
/>

Have you tried adding style prop having some width like this? codesandbox.io/s/6ll7jk01yk — Hardik Modha
– Hardik Modha, Commented Aug 29, 2018 at 13:02
This is really weird but I think I have the same structure with the same values as in the example you showed but still it is not scrolling even though in example it does. — Murakami
– Murakami, Commented Aug 29, 2018 at 16:52
Maybe the style is getting overridden somewhere. Can you please inspect the overflow property for the react-table container? It will give you some hint. — Hardik Modha
– Hardik Modha, Commented Aug 29, 2018 at 17:09
No, unfortunately it is not so simple ;) I've checked it in Firefox as well and there I can see scrollbar and I can use it grabbing it but the mouse scrolling does not work. In chrome you even cannot see scrollbar. — Murakami
– Murakami, Commented Aug 30, 2018 at 9:28
But after all I think it is not a behaviour of react-table because even a div with a fixed height, fixed width and overflow: scroll does not scroll in chrome — Murakami
– Murakami, Commented Aug 30, 2018 at 10:19

Tamal · Accepted Answer · 2019-06-24 10:59:45Z

3

Just simply add style with a height of 400px, that will force it to be scroll able.

<ReactTable
      data={bookingPerson}
      columns={columns}
      className="-striped -highlight"
      defaultPageSize={7}
      loading={loading}
      style={{
        height: "400px"
      }}
 />

answered Jun 24, 2019 at 10:59

Tamal

464 bronze badges

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

1 Comment

yuric Over a year ago

I had a similar issue trying to avoid whole page horizontal scroll when having another inner React Table with many columns inside the "parent" table's expandable area... I solved it with this: style={{ width: "80vw" }} I used the width with viewport unit (vw) because I needed a dynamic width for the parent table. This way the inner table's horizontal scroll is displayed automatically depending on screen width size.

Collectives™ on Stack Overflow

Horizontal scroll in React Table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related