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 ***@***.***>, 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 useAbsoluteLayout plugins 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.

[zorzysty]

@blkc Were you able to implement infinite scroll + pinned columns? I'm evaluating react-table for my project and combining those features is a must-have for me. I wonder if it's possible to achieve.

EDIT: I ended up using solution mentioned here. Works like a charm!

[tar-aldev]

I am unable, to use it with infinite scroll. Sorry but some examples would be really useful.
I know that is more specific to react-virtualized but combining react-virtualized List, InfiniteLoader, Autosizer components and dynamic cell height with react-table is so much pain.
I spent around 3 days on this with no luck. You have react-window example with virtualization, but it doesn't seems to me like react-window supports dynamic cell height (which makes it quite useless).
Also it does not have inifinite scroll example, and autosizer (which is not clear at all, because autsizer works when List component wrapped inside, but when using it with table body messed everything up)

Sometimmes Autosier doesn' work at all, giving height 0 even though I set table body height explicitly (which is quite useless as well as static size is really awful)

Here is what I was trying to do (with no luck and it is obviousl not working as expected)
https://codesandbox.io/s/react-table-infinite-mzkkp?file=/src/MuiTable.js:6290-6304

A trick i used is to show a mock empty table and when the data loaded i rendered another table with:
defaultPageSize={data && data.length > 20 ? data.length : 20}