Help virtualizing the columns on a table
I'm working on a data-grid table, that's meant to display some report data, and its using the native HTML <table> markup. I'm looking to add column virtualization to the table to improve mobile performance.
The table itself, isn't too special in terms of a data-grid. It's got a sticky header, with column sorting and resizing. Though I understand, the resizing could affect the virtualization performance.
Following the examples, it was pretty straight forward setting up virtualization on the table rows as well as setting up the sticky header with a ref. However, over the weekend, every attempt I took at trying to get the columns virtualized ended badly.
Any help would be appreciated. I've got a stackblitz set up with the table here: https://stackblitz.com/edit/github-ei2kl4?file=src%2Fmain.tsx
Sean Cassiere
StackBlitz
virtualized-datagri-starter - StackBlitz
Run official live example code for Virtual Table, created by Tan Stack on StackBlitz
7 Replies
other-emeraldOP•2y ago
This is the closest I've come so far to getting it working. Just need the header to remain sticky and get the offset of the header for the first row.
https://stackblitz.com/edit/github-ei2kl4-e6owpj?file=src%2Fmain.tsx
Sean Cassiere
StackBlitz
virtualized-datagrid-attempt - StackBlitz
Run official live example code for Virtual Table, created by Tan Stack on StackBlitz
other-emeraldOP•2y ago
This is what I finally came up with. https://stackblitz.com/edit/github-ei2kl4-xmtmjb?file=src%2Fmain.tsx
Not the cleanest thing I've written, but it works I guess. Open to any feedback.
Sean Cassiere
StackBlitz
virtualized-datagrid-fix-sticky - StackBlitz
Run official live example code for Virtual Table, created by Tan Stack on StackBlitz
generous-apricot•2y ago
Looks good 👍
genetic-orange•2y ago
Will it be working using tag <div> instead of tags <table> <th><tr><td>?
other-emeraldOP•2y ago
My example above uses the
<table> tags.
If you want to use <div> tags, then you could refer the Tanstack Virtual examples (or any virtualization library of your choice).genetic-orange•2y ago
Thanks!)
Why does columnsVirtualizer return the same count of columns instead of visible columns count? For example, your example has 22 columns and virtualizer visible columns returns 22 columns
genetic-orange•2y ago
I added columns and it seems that table renders all of them, without virtualization
