Nail Tables (resizability, infinite scrolling, performance, expandability, and more)

[alexkim205]

Bug description

We've modded antd tables and introduced a lot of (past and present) bugs in the process, including (but not limited to):

• Events and Persons page stacks when selected #4483
• Events table gets two scrollbars on load #4870
• Related Fix and standardize multiple table UI inconsistencies #4727 (comment)
• Table Overflow Revamp #4725
• Inconsistent scroll shading for fully visible table #4724
• Actions Table Overflow inaccessible on smaller screens #4723
• Squishy Tables #4721
• Feature flags table formatted wrong on the first load #4500

We use a custom component built on top of antd's table which makes it hard to maintain new features and debug existing bugs. This issue proposes we move away from our dependence on antd functionality and implement tables that are extensible and future proof.

Today's features

• Expandable rows with custom components
• Resizable columns
• Export data as csv
• Column visibility toggle options
• column sort
• full width rows

Tomorrow's features

• Everything above
• Infinite list scroll
• Performance improvements onResize (for looonnnng lists like our events table)

Possible Solutions

• react-table - CodeSandbox doesn't handle many rows well either.
• react-virtualized - CodeSandbox is promising.
• react-window - smaller lightweight version of react-virtualized
• react-table + react-window - highly extensible way to use hooks and custom ui components to bring expandable, virtualization, resizable features to existing table

react-table is headless utility library so it's pretty cool that you can pick and choose features you want to include. One feature I've been having a hard time playing nicely is expandability. Still trying to figure out a way to make rows expandable without breaking resizability and virtualization.

[clarkus]

Just a quick +1 on this issue. Let me know how I can support. How did you determine the must have features?

[paolodamico]

It'd be helpful if you can share specific instances of bugs that have caused pain here to understand how important is this to prioritize soon

[alexkim205]

Thanks for the quick responses. The must have features are features that we have already + improvements we want to make, but please let me know if there's a feature I've missed! I've updated the ticket above with more details

[clarkus]

I think those features makes sense, but I think we should track the problems they're solving, as well. Infinite scrolling can be a great solution in some scenarios, but in others it can actually make more problems than it solves. I just want to be sure we're measuring these changes against the problems we're aiming to solve.

[paolodamico]

This is great and indeed looks quite needed! As this supports satellite features for now, I'd advocate for working on this after @mariusandra is back. I'm sure he'll have some pretty useful insights on this too, but feel free to push back if you think this is more urgent.

[paolodamico]

@Twixes what's the status here? Should we keep this issue around?

[Twixes]

Doesn't seem really relevant anymore, so I'll close.