nuxt
How to Implement Pagination in SelectMenu for Large Datasets?
Description
I’m using the USelectMenu component from Nuxt UI and have encountered performance issues when dealing with large datasets. I have a dataset of approximately 900 items, and when displaying all of them in the SelectMenu, it slows down significantly or even freezes slightly during interactions.
To optimize the performance, I would like to implement pagination with lazy loading. Here’s what I aim to achieve: • Initially display the first 25 items. • As I scroll to the bottom of the dropdown, load the next 25 items dynamically (incrementally).
Is there a built-in way to achieve this in SelectMenu, or would you recommend a specific approach (e.g., using a custom scroll listener or integrating infinite scrolling)? Any guidance or examples would be greatly appreciated!
+1
At least it would be great to have a defineExpose with ref attached to scrollable element for now to handle custom logic on our own.
This issue is stale because it has been open for 30 days with no activity.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Same here, really looking forward to a fix for this. I’m working with a selectmenu that has 350+ items, and opening it completely freezes the page. I have to force refresh or close the tab to recover. Hope this gets addressed soon! :)
Using Nuxt UI v3
Any solutions on this?
hey, sorry for the late late response but i ended up building a custom component. I was hoping this would've been fixed with Nuxt ui v3 but as i see here https://github.com/nuxt/ui/issues/2744#issuecomment-2786228532 that this issue still persists
@benjamincanac Hello, thank you for your work. I don't think this issue is a duplicate, as the duplicate discusses virtualization, while this one discusses pagination with gradual loading of new elements. This would be a much-needed solution for many, eliminating the need to search for alternative libraries (of which there aren't many).
At a minimum, adding a "scroll" event to SelectMenu would simplify the implementation of custom solutions for similar cases.
