Difference between Table.Body and Table.VirtualBodyJune 1, 2020 at 10:52am
I might be overthinking this somewhat, but what is the difference?
It doesn't really explain it anywhere and I thought in either case none of the
<Table>component uses HTML table elements. So they are all 'virtual tables' right?
June 1, 2020 at 3:58pm
Good question! Whether a table is "virtualized" or not actually isn't related to what DOM element it uses under the hood. The virtualized table takes advantage of a technique called "windowing" -- or only showing DOM elements / table rows that are visible in the table body, and recycling those DOM nodes to show new data as a user scrolls.
If you have a table with thousands of items to render, and each of those table rows renders some complex logic, there might be a performance hit rendering all that out to the DOM, so the virtualized table only renders what's visible in the given viewport.
Specifically for Evergreen, I don't think there's too much of a difference in APIs between
<Table.VirtualBody />, but the implementation for
<Table.VirtualBody />under the hood takes advantage of the aforementioned windowing technique (and, thus, is preferable if you're rendering a really large dataset).
Let me know if that answers your question!
June 1, 2020 at 10:44pm
June 2, 2020 at 5:04am
June 2, 2020 at 8:57pm