Master Pagination with pagination-core

Understanding the Pagination Challenge

Pagination is a common requirement in modern web development, whether you're creating a React application, a Vue dashboard, a Svelte project, or managing a backend API. Developers often need to divide data into digestible pages, enable navigation between pages, calculate total pages, and handle various edge cases. Typically, this involves rewriting the logic from scratch for each new project.

Common Pitfalls in Pagination

Many developers encounter two main issues:

Repeatedly Redefining Logic: The need to recreate pagination logic for different frameworks and environments, such as React, Vue, and backend APIs, is a frequent hassle.
Using UI-Dependent Libraries: Some libraries tie pagination logic closely with UI components, making them difficult to customize, reuse, and framework-specific.

The Headless Pagination Solution

A more efficient approach is to decouple pagination logic from the UI. This is where pagination-core comes into play.

Introducing pagination-core

pagination-core is a headless pagination library for JavaScript that focuses solely on the logic. This allows it to be integrated into any environment, from React and Vue to Svelte and Node.js, as well as vanilla JavaScript.

Explore it on npm: pagination-core

Benefits of Headless Pagination

Adopting a headless approach offers several advantages:

Complete UI Control: Customize your user interface without limitations.
Logic Reusability: Implement the same logic across multiple projects.
Avoid Framework Dependencies: Maintain flexibility and avoid being locked into specific frameworks.

Implementing Pagination with pagination-core

Here's a basic example to get started with pagination-core:

import { createPagination } from "pagination-core";

let state;

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

state = paginator.initialState;

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

Navigating Pages

Manage page navigation with simple commands:

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

State Management

Each update provides a clean state, making it easy to build UI components:

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

Practical Examples

React Pagination

For a React implementation:

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

Backend Pagination in Node.js

Incorporate pagination-core in a Node.js API:

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);

Getting Started

Install the library using:

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

When to Use pagination-core

Consider using pagination-core if you need:

Reusable pagination logic
Framework-independent code
A lightweight solution without dependencies
Clear separation of logic from presentation

Conclusion

Effective pagination transcends UI considerations; it's fundamentally about logic. By isolating the logic, pagination-core simplifies the process, making your development more efficient and flexible.

Back to Blog

Mastering Pagination in JavaScript with pagination-core