You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In the docs I see there is an example of virtualized rows using react-window. However my issue as follows:
I have a table with the following requirements:
It should fetch data and then when user scrolled to the end, should load extra data.
Therefore I guess I should use inifnite loader of some sort along with react-virtualized (because I want to optimize it for cases when. user scrolled down many times and has a lot of rows)
I tried to do something with react-window but as far as I understand react-window cannot work with dynamic height of rows out of the box, which in my humble opinion is a thing that happens in nearly 90% of cases.
Although I am really overwhelmed by amount of additional libs you may need.
E.g. I tried to achieve my goal and started with react-virtualized (to add infinite loader later)
But the problem is - I couldn't get it to work with react-table. I tried both Table component from react-virtualized and List component from the same library.
Here is what I could achieve so far (https://codesandbox.io/s/react-table-infinite-mzkkp?file=/src/MuiTable.js)
But as soon as I add table header everything is messed up horribly.
The only way to fix it is by specifying a fixed height for table body(which I don't like at all)
I tried to use AutoSizer component but then table body is not showing at all.
Another issue is that it does not take all available width space like classic "Table" would.
And this is just the first part where I am trying to drop in react-virtualized and make it work with react-table.
P.S. I won't argue that implementing it may be easy" but it may be not for those who had never worked with stuff like react-virtualized or similar things. Moreover the fact that you need to combine react-virtualized, react-infinte-scroll and react-table (let alone styling library like materil ui) makes it really hard.
So if there could be any guide or FAQ for infinite loading with react-table it would be really useful and great.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
In the docs I see there is an example of virtualized rows using react-window. However my issue as follows:
I have a table with the following requirements:
It should fetch data and then when user scrolled to the end, should load extra data.
Therefore I guess I should use inifnite loader of some sort along with react-virtualized (because I want to optimize it for cases when. user scrolled down many times and has a lot of rows)
I tried to do something with react-window but as far as I understand react-window cannot work with dynamic height of rows out of the box, which in my humble opinion is a thing that happens in nearly 90% of cases.
Although I am really overwhelmed by amount of additional libs you may need.
E.g. I tried to achieve my goal and started with react-virtualized (to add infinite loader later)
But the problem is - I couldn't get it to work with react-table. I tried both Table component from react-virtualized and List component from the same library.
Here is what I could achieve so far (https://codesandbox.io/s/react-table-infinite-mzkkp?file=/src/MuiTable.js)
But as soon as I add table header everything is messed up horribly.
The only way to fix it is by specifying a fixed height for table body(which I don't like at all)
I tried to use AutoSizer component but then table body is not showing at all.
Another issue is that it does not take all available width space like classic "Table" would.
And this is just the first part where I am trying to drop in react-virtualized and make it work with react-table.
I don't even get close to infinite loading yet.
I saw a codesandbox with infinite loading component which I tried to modify to at least have a sticky header
https://codesandbox.io/s/infinte-scroll-without-virtualized-bbrg8?file=/src/App.js
But then for some reason it gets cut in width.
To sum up, I really appreciate react-table library but it is such a pain to not have any examples or out of the box solution for infinite loading.
Here are some examples (sorry for link to other packages)
Angular table which has infinite loading out of the box with small changes needed:
https://swimlane.github.io/ngx-datatable/#server-scrolling
React grid which has it out of the box:
https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/lazy-loading/
P.S. I won't argue that implementing it may be easy" but it may be not for those who had never worked with stuff like react-virtualized or similar things. Moreover the fact that you need to combine react-virtualized, react-infinte-scroll and react-table (let alone styling library like materil ui) makes it really hard.
So if there could be any guide or FAQ for infinite loading with react-table it would be really useful and great.
Beta Was this translation helpful? Give feedback.
All reactions