Table support

[mcabs3]

I am currently trying to find a way to use one of your components to render table rows (specifically using material ui).

Here is the general idea of what I'm aiming for

<Table>
    <TableHead>...</TableHead>
    <TableBody>
        <Virtuoso ... />
    </TableBody>
</Table>

however I see the issue is that your Virtuoso component renders a few divs I'm assuming to track height, number of items in view, etc.

Maybe there is a way we can pass our own component as a prop to render as a parent element? something={TableBody}?

I'm essentially asking if there is a good way to prevent this kind of markup below?

...
<tbody>
    <div ...>
        <div ...>
            <tr>
...

Let me know what else I can provide. I appreciate what you have done so far!

[petyosi]

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.

[mcabs3]

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

[josephstgh]

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

[petyosi]

@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!

[josephstgh]

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.

[toonvd]

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

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

[toonvd]

@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.

[josephstgh]

Yup, I did saw that. Thanks.

Will be trying out and see if it works together.

[b-zurg]

@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.

[josephstgh]

@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.

[petyosi]

@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.

[toonvd]

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.

[markwoon]

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).

[fabiospampinato]

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.

[piecyk]

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

[codemaster115]

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?

[hannupekka]

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

[petyosi]

@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.

[toonvd]

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?

[piecyk]

@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 🤔

[petyosi]

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

[reidbarber]

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.

[hubertsuprunowicz]

@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

[nightwolf-041]

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

[github-actions[bot]]

:tada: This issue has been resolved in version 2.5.0 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket:

[petyosi]

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,