Add pattern for virtualized table #3594
-
|
In Evergreen, we had a virtualized table component, which was important when we had to render 2,000+ sources for some customers. Having an example for virtualizing the Paste table component would be helpful in the transition from Evergreen to Paste |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary. Sorry, I don't know how to help with that. Here are some similar discussions:
|
Beta Was this translation helpful? Give feedback.
-
|
Hey @cdignam-segment ! For some context—Does the table you're trying to migrate have static content only (like, no buttons, links, etc.), or is there also interactive content? If there's interactive content, you'll want to use a Data Grid, and you can check out a similar response about virtualizing Data Grid here: #3369 . If not, let me know, and I'll sync up with our team! |
Beta Was this translation helpful? Give feedback.
-
|
If it is just a Table, then using something like TanStack Virtual would work well. We've avoided baking in this kind of feature into the components as it's just as easy for product teams to grab a third party library and use our basic HTML presentational components. Arguably, it's better, because it gives the consuming team control over dependencies and behaviors. I created a little Codesandbox to demo how you just use the library without our HTML replacements. https://codesandbox.io/p/sandbox/virtual-tables-8x6zlx?embed=1&file=%2Fsrc%2Fmain.tsx%3A7%2C40 I'm less confident you'll have success with DataGrid because of the roving index keyboard navigation that comes with it might break or just cause it to be pretty janky. Let us know what kind of table you're using. |
Beta Was this translation helpful? Give feedback.
-
|
I ended up using https://github.com/segmentio/app/commit/d772834e78c85ab01b75f7e2d5101bc1a392c2c1 |
Beta Was this translation helpful? Give feedback.
If it is just a Table, then using something like TanStack Virtual would work well.
We've avoided baking in this kind of feature into the components as it's just as easy for product teams to grab a third party library and use our basic HTML presentational components. Arguably, it's better, because it gives the consuming team control over dependencies and behaviors.
I created a little Codesandbox to demo how you just use the library without our HTML replacements. https://codesandbox.io/p/sandbox/virtual-tables-8x6zlx?embed=1&file=%2Fsrc%2Fmain.tsx%3A7%2C40
I'm less confident you'll have success with DataGrid because of the roving index keyboard navigation that comes with it might break or j…