Virtual columns with pinned columns
I haven't so far seen and example of pinned columns working with virtual columns, is there one out there?
The main problem is that the pinned columns get removed when they are supposed to become "virtual".
I have played with the rangeExtractor with mixed results. Has anyone done this before successfully? I can post links to my code so far if helpful 🙂
Thanks 🙏
6 Replies
exotic-emerald•6mo ago
Hey, I think this guide does this:
https://dev.to/morewings/lets-create-data-table-part-4-column-pinning-5eb7
DEV Community
Let's create Data Table. Part 4: Column pinning
This is an article from the series about creating of an advanced Data table component using React,...
deep-jadeOP•6mo ago
oooo okay thanks, looking now 👀
It only uses virtual rows, which I already have working 😦
exotic-emerald•6mo ago
Ah apologies my bad
deep-jadeOP•6mo ago
So I have managed to get it working with a super hacky and non optimised way, it will have to do for now.
Let me know if anyone wants to see it and maybe even improve it 😛
exotic-emerald•6mo ago
Haha not sure I could improve it but it would be cool to see
deep-jadeOP•6mo ago
https://github.com/ynput/ayon-frontend/blob/9731b5cb58f21a90404aeb866db228e7c6860cf3/src/containers/ProjectTreeTable/hooks/useColumnVirtualization.tsx
The "hack" is counting all columns as "pinned" up until the last real pinned column.
I found if I didn't do this and provided the correct pinned indexes for example [0,1,3] then column 3 would get dropped off for some reason. [0,1,2,3] is fine though.
The huge draw back to this is if you pin the very last column the virtualiser treats all columns as pinned and now nothing is virtualised at all, defeating the whole point.
GitHub
ayon-frontend/src/containers/ProjectTreeTable/hooks/useColumnVirtua...
Codebase of AYON server web interface. Contribute to ynput/ayon-frontend development by creating an account on GitHub.