React virtual to virtualize millions of rows with the element as table and not div

[spandzgit]

I've implemented the infinite scroll example for an implementation to virtualize millions of rows. The virtual scroll is working great and the data rendering is perfectly fine.

For some feature requirements on the rendered data in the list, I need to have a <table> instead of <div>s. I replaced the <div>s with <table> <tr> <td> and the scroll works fine. But because of the dynamic positioning of the rows position: absolute and transform: translateY(${virtualRow.start}px) the <tr> <td> s are losing the default abilities of the table - like growth of the width of all the <td> s based on the highest content of one of <td> s.

Need some ideas or help if someone has tried something along these lines or any help is appreciated.

[tannerlinsley]

Try replicating the markup of this table implementation: https://devexpress.github.io/devextreme-reactive/react/grid/demos/featured/virtual-scrolling/

[ksorbello]

@tannerlinsley Is it possible to achieve virtualization without using position:absolute and transform: translateY(${virtualRow.start}px)? I have been referring to the example implementation you provided, but wondering if you have any other examples since this comment?

[noghartt]

@ksorbello you can but isn't recommended. Both rules helps you to handle with render pipeline during the virtualization of these elements, without it, you can have a big decrease in performance when scroll the page.

[ksorbello]

I've implemented the infinite scroll example for an implementation to virtualize millions of rows. The virtual scroll is working great and the data rendering is perfectly fine.

For some feature requirements on the rendered data in the list, I need to have a <table> instead of <div>s. I replaced the <div>s with <table> <tr> <td> and the scroll works fine. But because of the dynamic positioning of the rows position: absolute and transform: translateY(${virtualRow.start}px) the <tr> <td> s are losing the default abilities of the table - like growth of the width of all the <td> s based on the highest content of one of <td> s.

Need some ideas or help if someone has tried something along these lines or any help is appreciated.

@spandzgit Curious if you were able to get this working with using a <table>? I am having the same issues using position: absolute and transform: translateY(${virtualRow.start}px). I have scroll and virtualization working but styling is broken for my inner elements.

[noghartt]

@ksorbello what is broken in your styles? Can you send an example about your code, please?

[ksorbello]

@noghartt height. I used the solution in the example @wuarmin linked. Before mapping the virtual rows I added a styled <tr/> using the virtualRows.start as the height. Also did not use position:absolute or transform: translateY(${virtualRow.start}px).

[noghartt]

To handle <tr /> style, you need to put height via virtualRow.size or doing a dynamic measurement via virtualRow.measureElement.

Both position and transform rules are necessary to improve performance while scrolling these virtual items.

Also, virtual container lost itself if you don't insert these rules, so you can find some bugs while scrolling too.

[noghartt]

I have the same problem. For some reason, both <th>s and <td>s is losing the reference from each column. https://www.material-react-table.com/ from @KevinVandy solves it.

[wuarmin]

Check this out https://tanstack.com/table/v8/docs/examples/react/virtualized-rows

[noghartt]

I'm using it but with v3 version. In this version, it's already broken these styles.

[baonv-acbs-com-vn]

tanstack/react-virtual 3.0.0-beta.49 not working with @tanstack/react-table": "^8.7.9",

[piecyk]

Hi, what part is not working?

[baonv-acbs-com-vn]

Can you give me a example

[LoiKos]

Hi guys,

i don't know if that can help here but i have create an discussion on a potential issue here.

Basic rendering works but unfortunately row size doesn't behave as expected when number of items change (when you add items row size growth 🤷 ).

It could also give an example how to make work tanstack/table and @tanstack/virtual together