This content originally appeared on DEV Community and was authored by Volker Schukai
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.
This content originally appeared on DEV Community and was authored by Volker Schukai
Volker Schukai | Sciencx (2025-09-24T13:30:55+00:00) Monster Select now supports paginated dropdowns – fully reactive, fully open source. Retrieved from https://www.scien.cx/2025/09/24/monster-select-now-supports-paginated-dropdowns-fully-reactive-fully-open-source/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.