Sulaiman “sulenchy.dev” Abiodun

Posted on Mar 23

The Right Way to Handle Pagination in JavaScript and Typescript (Introducing pagination-core)

#react #svelte #vue #node

Pagination is something every developer implements.

Whether you're building:

a React app
a Vue dashboard
a Svelte project
or a backend API

You’ll eventually need to:

split data into pages
handle next/previous navigation
calculate total pages
manage edge cases

And most of the time you rebuild it from scratch.

The Problem With Pagination Today

Most developers fall into one of these traps:

❌ Rewriting pagination logic repeatedly

You implement it in React… then again in Vue… then again in your backend.

❌ Using UI-heavy libraries

Some libraries tightly couple pagination logic with UI components, making them:

hard to customize
hard to reuse
framework-dependent

A Better Approach: Headless Pagination

Instead of mixing logic and UI, a better pattern is:

Separate pagination logic from presentation

That’s where pagination-core comes in.

What is pagination-core?

pagination-core is a:

Headless pagination library for JavaScript

It gives you only the logic, so you can use it anywhere:

React pagination
Vue pagination
Svelte pagination
Node.js API pagination
Vanilla JavaScript

View it on npm: https://www.npmjs.com/package/pagination-core

Why Developers Are Switching to Headless Pagination

With a headless approach:

You control the UI completely
You reuse logic across projects
You avoid framework lock-in

How to Implement Pagination in JavaScript

Here’s a simple example using pagination-core:

import { createPagination } from "pagination-core";

let state;

const paginator = createPagination({
  totalItems: 100,
  itemsPerPage: 10,
  onStateChange: (s) => {
    state = s;
  },
});

// initialize
state = paginator.initialState;

console.log(state.currentPage); // 1
console.log(state.pages); // [1, 2, 3, "...", 10]

Handling Page Navigation

paginator.nextPage();
paginator.previousPage();
paginator.goToPage(5);

What You Get From pagination-core

Each update gives you a clean state:

{
  currentPage: 1,
  totalPages: 10,
  pages: [1, 2, 3, "...", 10],
  hasNext: true,
  hasPrevious: false
}

This makes building UI extremely easy.

React Pagination Example

If you're searching for “pagination in React”, here’s a simple approach:

{state.pages.map((page) =>
  typeof page === "number" ? (
    <button onClick={() => goToPage(page)}>
      {page}
    </button>
  ) : (
    <span>...</span>
  )
)}

Backend Pagination (Node.js)

pagination-core also works perfectly for APIs:

const paginator = createPagination({
  totalItems: data.length,
  itemsPerPage: 10,
  onStateChange: (s) => (state = s),
});

paginator.goToPage(page);

const start = (state.currentPage - 1) * 10;
const paginatedData = data.slice(start, start + 10);

Installation

npm install pagination-core
# or
yarn add pagination-core
# or 
pnpm add pagination-core

Get Started

https://www.npmjs.com/package/pagination-core

When Should You Use pagination-core?

Use it if you want:

reusable pagination logic
framework-independent code
clean separation of concerns
lightweight solution (no dependencies)

Final Thoughts

Pagination is not a UI problem.

It’s a logic problem.

Once you separate the logic, everything becomes easier.

That’s exactly what pagination-core is built for.

DEV Community