Table support about react-virtuoso HOT 26 CLOSED

Everyone, v2.5.0 includes TableVirtuoso which works with HTML Tables, MUI Table and React Table. You can start from the example here: https://virtuoso.dev/hello-table/.

If something does not work as expected, please open a new issue with repro.

Cheers,

from react-virtuoso.

What about something like this? https://codesandbox.io/s/virtuoso-table-fshis?file=/src/App.tsx

from react-virtuoso.

@josephstgh I do want to focus on table support, as I think it is an awesome and widely used case :). The only limit is my spare time.

from react-virtuoso.

@petyosi any thoughts about this hack with tbody paddings via pseudo elements 🤔

What about something like this? https://codesandbox.io/s/virtuoso-table-fshis?file=/src/App.tsx

I know that basic it's add's a block element there breaking the specification, but in time of parsing html markup is correct 🤔

from react-virtuoso.

This is a bit rough around the edges but I will leave it here.

https://codesandbox.io/s/muivirtuoso-w5lmq

from react-virtuoso.

@hannupekka short answer is "no" unless something in my work/life radically changes. After doing a couple of POCs, I can say that this is a huge effort that I am unable to pull unless I spend months of full-time work on it.

At this stage, I have just enough bandwidth to ensure that the list, the grouped list, and the responsive grid are properly maintained and extended.

from react-virtuoso.

@piecyk that's ... beautiful, I should have checked it sooner :). Thank you very much for sharing that! I will mention this in the docs.

from react-virtuoso.

🎉 This issue has been resolved in version 2.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from react-virtuoso.

Hey @mcabs3 ,

Support for table rendering is something which I am currently working on (no ETA, I am afraid). The current necessary markup is not compatible with the table rendering, so it needs a separate approach.

from react-virtuoso.

No worries, if there is something I can do to help, I will most certainly try!

from react-virtuoso.

Hi @petyosi, wondering if this feature has any update?

from react-virtuoso.

@mcabs3 @josephstgh I have a working virtualized table - not public yet, since I am struggling to find the "MVP" state which would make it usable.

If you are interested in having a conversation around it, please reach out to my GH email address. Cheers!

from react-virtuoso.

We are currently at r&d stage, so many things are not well-defined yet.

One key thing, is that we will need to integrate with lib like react-table. Using react-table for its table features (sorting, filtering and what not), and then maybe try to use react-virtuoso to load its content.

Like I said, we haven't really done anything concrete yet.

But I'm also interested in knowing what kind of feature is being worked in your current working virtualized table. At the moment, I may not need all of the advance feature from react-table yet, so depending on what you have, we can try it out as well.

from react-virtuoso.

@petyosi @josephstgh react-table already has an example for virtualized rows with react-window, it is a very small step from there to an example for this lib. Just mentioning to avoid wasting time on this.

from react-virtuoso.

Yup, I did saw that. Thanks.

Will be trying out and see if it works together.

from react-virtuoso.

@josephstgh just curious was react-table good enough for your needs? If so then we might put a mention in the docs pointing to react table to save people time and indicate an active decision not to support table virtualization.

from react-virtuoso.

@b-zurg I did not continue to look into this for the past couple of months. I have however, used material-table briefly for some simpler use-case that did not require me to add table virtualization yet.

My project is currently using react-virtuoso for other purpose, and if react-virtuoso does provide table virtualization support, I can possibly reduce the dependencies and libraries for my project. I do understand if react-virtuoso decided not to focus on table virtualization. I think it is still a very awesome project.

from react-virtuoso.

I am actually planning on opensourcing a datatable based on MUI and Virtuoso using callbags as store. However, it needs a lot of refactoring since it was my playground. Will probably have a decent alpha by the end of next month.

from react-virtuoso.

Would also love to see table support. We're looking to use this with react-table as well.

Tried react-window but ran into some issues. This actually works better for us, if only it generated valid html (i.e. no div wrappers).

from react-virtuoso.

Is this supported, even experimentally, in v1? I'd like to play with this once it becomes available.

For my use case sometimes rendering huge tables is the performance bottleneck, without virtualizing or paginating the rendering of table rows directly it just takes a long time for huge tables to get painted on screen.

from react-virtuoso.

What about something like this? https://codesandbox.io/s/virtuoso-table-fshis?file=/src/App.tsx

This example looks great, but if trying with the latest version(1.5.14) it doesn't work. Header doesn't stay on the top.
@piecyk Will you please update it if possible?

from react-virtuoso.

Just checking if this is still on roadmap, @petyosi? :)

from react-virtuoso.

I am in the same pickle since I switched jobs and barely do any frontend anymore.
But, imho, several people already integrated this with react-table and MUI tables. You can just refactor examples from other frameworks. I wonder how you exactly see Table support. Your own table framework to go with Virtuoso?

from react-virtuoso.

One question related to that solution: Does the List component get remounted on every Virtuoso render?

For instance, if you put an input for filtering rows in the header, it will lose focus when you type and the rows change.

Forked example:
https://codesandbox.io/s/virtuoso-table-forked-jsmpg?file=/src/App.tsx

This is a pretty common use case, especially for react-table. Is this something that can be fixed in react-virtuoso, or am I missing something simple? Thanks.

from react-virtuoso.

@petyosi any thoughts about this hack with tbody paddings via pseudo elements 🤔

What about something like this? https://codesandbox.io/s/virtuoso-table-fshis?file=/src/App.tsx

I know that basic it's add's a block element there breaking the specification, but in time of parsing html markup is correct 🤔

Does not count header, therefore scroll to the bottom does not work properly

from react-virtuoso.

any updates on this react-table issue ??
@petyosi

from react-virtuoso.