Monster Select now supports paginated dropdowns – fully reactive, fully open source

We added pagination to our select component – and yes, it’s fully open source

Sometimes it’s the small things that make a big difference.

Our latest update to the monster-select component adds something developers (and users) have been asking for: pagination.

No more infinite scrolling. No awkward workarounds. Just clean, native paging – fully integrated.

🔧 What’s new?

We’ve added a pagestepper UI to the dropdown:

• Paginated view of options
• Configurable number of items per page
• Fully reactive (updates with filters and async data)
• Works with keyboard navigation
• Handles edge cases gracefully (like filtering and empty pages)

Here’s what it looks like:

🧪 Example: Remote Filter + Pagination

Here’s how to configure the select for a real-world use case:

<monster-select data-monster-option-filter-mode="remote" data-monster-option-filter-position="popper" data-monster-option-url="/api/items?filter={filter}&page={page}" data-monster-option-mapping-labeltemplate="${name}" data-monster-option-mapping-selector="data.*" data-monster-option-filter-defaultValue="" data-monster-option-mapping-valuetemplate="${id}" data-monster-option-features-showremoteinfo="true" data-monster-option-remoteinfo-url="/api/items?count=1" data-monster-option-mapping-currentpage="meta.pagination.currentPage" data-monster-option-mapping-objectsperpage="meta.pagination.perPage" data-monster-option-mapping-total="meta.pagination.total" ></monster-select> 

This example assumes your backend API returns something like:

{ "data": [ { "id": 4, "name": "Item 4" }, { "id": 5, "name": "Item 5" }, { "id": 6, "name": "Item 6" } ], "meta": { "pagination": { "currentPage": 2, "perPage": 3, "total": 12 } } } 

Want filtering? It’s already baked in. Just hook up filter={filter} and the component handles debounce, remote updates, and reactivity for you.

💡 Why we built it

Select components can get complicated. Especially when:

• You're dealing with large datasets
• Filters need to be remote
• You want full keyboard and accessibility support
• Pagination and state should sync with backend logic

We needed a modular, scalable solution that plays well in modern web apps. So we built it into MonsterJS – and open-sourced the whole thing.

🔗 Explore more

• Git: gitlab.schukai.com/.../monsterjs-org
• Docs & Live Demos: monsterjs.org

The monster-select is just one part of the puzzle. The lib also includes reactive state management, routing, declarative rendering and more.

We’re building MonsterJS for developers who want structure without the overhead – and components that just work.

✅ TL;DR

• Monster Select now supports full pagination
• Works with async data and remote filtering
• Open Source at monsterjs.org

Try it out. Fork it. Break it. Or build on top of it.