Document difference from react-virtualized and react-table

[gajus]

I have originally used fixed-data-table when it was just released. Since then few similar projects have emerged, such as react-virtualized and react-table. If there is a case for it, an article/ documentation section explaining the difference between all these libraries would help with adoption.

[wcjordan]

I don't have any documentation on hand, but I could provide a quick run-down.

FDT & React-Virtualized

• Both are built as windowing / virtualization tools for large tables
• React-Virtualized is built as a series of utilities which can make lists & grids, it holds a BYO grid functionality philosophy and sticks to its roots as a virtualization library
• FDT is designed as a grid with open design to make it extensible

Scrolling

• React-Virtualized renders a large div to occupy the missing row space. This uses the browsers built in scroll functionality
• FDT renders it's own scrollbar rather than using the browser built in one.
• React virtualized tends to give better performance with minimal effort since it doesn't re-render components on scroll
• FDT gives comparable performance once effort is put into making cells pure components. We use it to render million cell grids with high performance.

Row Heights

• React-Virtualized handles dynamic row heights by getting the height for all rows above the viewport and caching them. This means scrolls up are fast, but the initial render can be slow if starting far down the table (as occurs in chat apps) since you have to get the height of all rows above.
• FDT only fetches the row height for rows in the viewport. All other rows just use a default row height. It also refetches the row heights for every row in the viewport on each scroll and only caches the ones outside of the viewport. This means the total scrollbar size can be less accurate if rows have varying heights.

FDT & React-Table I don't know much about React-Table, but it advertises itself as not supporting row virtualization. It looks to have many more built in table features than FDT or React-Virtualized I'm not sure how open / extensible it is. I can imagine the more built in features you have, the harder it is to support open modification.

[dinislam-benchling]

@wcjordan Just wanted to chime in and say that this comment remains very useful 5 years on :)

[wcjordan]

I'm glad to hear. It may also be worth comparing Tanstack for anyone looking in this space as well since that has gotten lots of attention over these past years.