react-table supports infinite scrolling?

[saniko]

Hello,
Does react-table support infinite scrolling out of the box?

Best

[tannerlinsley]

Via A plugin you can integrate easily with React virtualized or React window. There is an example that you can follow in the docs.

Tanner Linsley
On Dec 8, 2019, 12:01 AM -0700, Dani Koren [e-mail], wrote:

Hello,
Does react-table support infinite scrolling out of the box?
Best
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or unsubscribe.

[tannerlinsley]

https://github.com/tannerlinsley/react-table/tree/master/examples/virtualized-rows

[simkessy]

The issue I see with the example is that you're using divs instead of table elements, which makes things quite challenging to style. Any advice on how to address this?

[tannerlinsley]

When implementing virtual scrolling, you cannot use traditional table elements because:

• To virtualize, you must nest a few divs and create a scrollable overflow container, which you cannot do with table elements
• This would produce non-semantic HTML (which produces errors in React)
• Table elements do not behave normally in an absolutely positioned environment

Other than that, I would like to know what you find challenging to style? As far as I know, the useBlockLayout and useAbsoluteLayoutplugins should take care of the positioning, and after that, it's just your own personal styles. Are you facing a bug or a challenge other than just look and feel?

[simkessy]

Well I'm using Material UI in my application, which uses components like <TableRow>. So essentially I can't use Material-UI with this. I need to roll up my own style sheet or find another.

[tannerlinsley]

If you could find anywhere that material ui styles support infinite scrolling then you could use use the styles it uses.

[sebastianfrey]

@simkessy I know this has been closed, but I would like to know, if you have tried to set the component prop of TableRow to div?

<TableRow component="div" />

So the TableRow is renderd as div.

[kencarpenter-now]

FWIW, you _can_ implement virtual scrolling with traditional table elements. The trick is to set the height of the top and bottom <tr> tags (e.g., <tr style="height: 2536px;">).

Change the heights of them both whenever you scroll far enough to swap rows in/out.

Here is a component that uses this technique:

https://devexpress.github.io/devextreme-reactive/react/grid/demos/featured/virtual-scrolling/

[tannerlinsley]

Holy moly, this is absolutely genius! I need to build something with this concept and modularize it for sure. Thanks for the link!

[Blkc]

A side question to this issue, is there a recommended approach to infinite scroll + pinned columns?

using this library https://github.com/GuillaumeJasmin/react-table-sticky puts position sticky on cells, but infinite scroll from react-window utilizes overflow: auto to limit window size which offsets what position sticky does.