Having an issue where dnd-kit, resizable columns, and the virtualizer don't play nice together
I wasn't sure which thread to post this question under since it's quite multi-faceted and uses a combination of different TanStack bits and pieces (namely both Table and Virtual).
A few weeks ago, we were making a grid view for our internal system that required the following functionality:
- Resizable columns
- Reorderable columns
- Virtualization
- A static header
- And a vertical scroll-bar that stays visible even if the table itself is wider than the surrounding div (enabling horizontal scrolling)
We spent three weeks trying to finesse all the bits and pieces to try and make them work nicely together, but every time we solved one issue, a new one sprung up.
Anything from weird UI bugs causing the column headers to stretch and squish when dragged to a flickering drag handle when trying to resize the columns.
Eventually the issue that did us in and made us drop all those features was seemingly the Virtualizer.
The issue became that we could make it work without the virtualizer, and make the virtualizer work without all the other stuff, but not all of it together.
It flickers and stutters when loading in the various items (we put in 10k dummy elements to try), and all that flickering would then cause the column reordering and resizing logic to malfunction.
I've now tried to replicate the code as it was, cutting away anything not relevant or under NDA to a minimum viable product to link here.
It should be fairly close to what we had back then, but I can't test the previously broken functionality because the table won't load more than approx 270 items of the 2000 I try to show.
Can anyone here help?
Here's a link to the MVP code:
https://gist.github.com/ElectricCoffee/5936a83568fc4f51adb7e2e6780e38e7
PS: the left column in the table was just a sanity check to see if it really did load everything or not.
A few weeks ago, we were making a grid view for our internal system that required the following functionality:
- Resizable columns
- Reorderable columns
- Virtualization
- A static header
- And a vertical scroll-bar that stays visible even if the table itself is wider than the surrounding div (enabling horizontal scrolling)
We spent three weeks trying to finesse all the bits and pieces to try and make them work nicely together, but every time we solved one issue, a new one sprung up.
Anything from weird UI bugs causing the column headers to stretch and squish when dragged to a flickering drag handle when trying to resize the columns.
Eventually the issue that did us in and made us drop all those features was seemingly the Virtualizer.
The issue became that we could make it work without the virtualizer, and make the virtualizer work without all the other stuff, but not all of it together.
It flickers and stutters when loading in the various items (we put in 10k dummy elements to try), and all that flickering would then cause the column reordering and resizing logic to malfunction.
I've now tried to replicate the code as it was, cutting away anything not relevant or under NDA to a minimum viable product to link here.
It should be fairly close to what we had back then, but I can't test the previously broken functionality because the table won't load more than approx 270 items of the 2000 I try to show.
Can anyone here help?
Here's a link to the MVP code:
https://gist.github.com/ElectricCoffee/5936a83568fc4f51adb7e2e6780e38e7
PS: the left column in the table was just a sanity check to see if it really did load everything or not.
