React-table: Customized Scrolling

[Apofenic]

I am using version 5.6.0

Is there anyway to easily customize the scrolling UI for a react-table?
i.e.:

• move the vertical scroll bar to the top of the table or have one at both the top and the bottom?
• click the table body and drag to scroll?
• scroll bar restyling /invisibility?

[gary-menzel]

No - nothing like that is available. It's lightweight. If you can achieve it with CSS and not break the layout then that is probably the only answer.

[adduss]

@Apofenic you can do it pretty easily, unless version 5.6 has no TbodyComponent property

use TbodyComponent to assign you body:

<ReactTable TbodyComponent={this.props.bodyComponent} />

and than in bodyComponent use custom scrollbar to wrap it (in example below scrollbars from react-custom-scrollbars library):

bodyComponent(tableState) { return <Scrollbars style={{height: 500}}> <div className='my-tbody-class'> {tableState.children} </div> </Scrollbars> }

[Apofenic]

thanks guys ill give it a shot

[dorklord23]

@Apofenic you can do it pretty easily, unless version 5.6 has no TbodyComponent property

use TbodyComponent to assign you body:

<ReactTable TbodyComponent={this.props.bodyComponent} />

and than in bodyComponent use custom scrollbar to wrap it (in example below scrollbars from react-custom-scrollbars library):

bodyComponent(tableState) { return <Scrollbars style={{height: 500}}> <div className='my-tbody-class'> {tableState.children} </div> </Scrollbars> }

One thing to remember is you need to use the default class (rt-tbody) as well for the custom component. Otherwise, it would bring a sleuth of broken CSS rules into the table.