adverse-sapphire

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.

Gist

GridViewMVP.tsx

GitHub Gist: instantly share code, notes, and snippets.

8 Replies

foreign-sapphire•4mo ago

Hi @Niko@ROIMA i can try to help if you could prepear and example at stackblitz

adverse-sapphireOP•4mo ago

I'll look into it

adverse-sapphireOP•4mo ago

I have attempted to port it to stackblitz but for whatever reason the editor won't render my output https://stackblitz.com/edit/vitejs-vite-bsmts7u4 It works fine if I run it locally however https://github.com/lepkanik/GridViewMVP exact same files exact same setup and config. 🤷‍♂️

lepkanik

StackBlitz

GridView MVP - StackBlitz

Next generation frontend tooling. It's fast!

GitHub

GitHub - lepkanik/GridViewMVP

Contribute to lepkanik/GridViewMVP development by creating an account on GitHub.