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

@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 what is broken in your styles? Can you send an example about your code, please?

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

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.

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

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

Hi, what part is not working?

Can you give me a example

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