menu
Channels
# All channels
view-forward
# General
view-forward
# Help me
view-forward
# Requests
view-forward
Team

Difference between Table.Body and Table.VirtualBody

June 1, 2020 at 10:52am

Difference between Table.Body and Table.VirtualBody

June 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.Body /> and <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!
Edited
  • reply
  • like

June 1, 2020 at 10:44pm
Ahh thanks that does! I've seen this before. Does it break things like trying to ctrl+f something on the page but not in the visible space?
  • reply
  • like

June 2, 2020 at 5:04am
I just tested, yes it breaks doing a page search. Has to - because those other elements haven't rendered yet.
  • reply
  • like

June 2, 2020 at 8:57pm
sorry! just seeing this. yep, that's exactly right. ctrl / cmd + f searching won't work since only a handful of DOM nodes are rendered at a time, but you can implement filtering / "scroll-to" behavior fairly easily that compensates for the lack of built-in browser search
  • reply
  • like