Switching between row and grid
I want to allow my users to switch between row and grid modes, I currently have a row virtualizer with infinite scrolling which works well.
I would like to allow 2-3 items in a row in a grid, depends on screen size.
I have tried setting flex flex-wrap, and all, all in all it seems to "work" but I sometimes get this jumpy-laggy behavior like it's rendering like crazy and I am not sure how to solve it.
Anyone tried to implement something like this?
5 Replies
eastern-cyanOP•14mo ago
I have found a solution but not exactly. I can use lanes and render as I like based on amount of lanes and virtualrow index, it looks great and works well. my problem is when putting lanes into state, since I want user to be able to switch views easily, it doesn't seem to rerender useVirtualizer so stuff is stuck with old values and broken styles.
deep-jade•14mo ago
hmm hard to say without an example. if you can create something on stackblitz will have a look
foreign-sapphire•14mo ago
i did that years ago for https://notionicons.so/icon-set/atlas
i’d get the the grid width and chunk items so they’re at least 200px each so the row might have 2 items on mobile and 20 on desktop (try to resize)
happy to share more when i’m on my pc (an article about this has been in drafts since then)
Notion Icons
2666 Atlas Copy Paste Icons - Notion Icons
Color and customize Atlas icons then copy paste them into your Notion pages.
absent-sapphire•9mo ago
Could you share code of grid?
How can we do the same with tanstack?
foreign-sapphire•9mo ago
i had this example 2 years ago that might give you a better idea butt will try to create a better new example soon https://stackblitz.com/edit/vitejs-vite-zpeh65?file=package.json
Mosaad
StackBlitz
React Virtual - Responsive and Grouped - StackBlitz
Next generation frontend tooling. It's fast!