How can I use react-perfect-scrollbar on react-table to override default scrollbar?

Question

I'm trying to use react-perfect-scrollbar on react-table but it doesn't work, it does on a custom table.

<PerfectScrollbar>
        <Table className='table'>
          <thead className='table-head'><tr>{head}</tr></thead>
          <tbody className='DashboardCard-table-body'>{body}</tbody>
        </Table>
      </PerfectScrollbar>

I tried this:

<PerfectScrollbar>
    <ReactTable data={data} columns={columns} />    
</PerfectScrollbar>

It should show the new scrollbar but it doesn't.. haven't found information anywhere.

lauchness · Accepted Answer · 2019-04-24 18:56:32Z

2

Have you tried setting a height on the PerfectScrollbar JSX element? I had a similar issue that I solved with this:

<PerfectScrollbar style={{ height: "100vh" }}>
    ...Your content...
</PerfectScrollbar>

You might need to use a different value for height, but apparently the scrollbar needs a height value.

answered Apr 24, 2019 at 18:56

lauchness

3693 silver badges6 bronze badges

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

Collectives™ on Stack Overflow

How can I use react-perfect-scrollbar on react-table to override default scrollbar?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related