Example 1: Vanilla JavaScript

Instruction

Manipulate these values if you want.

|pages.js|

// the number of items in a page
const countItemsInPage = 4;

// the number of 'number' buttons in a row
const countPagesInPageGroup = 2;

|data.js|

Change the array.

At the bottom, I made an array which has few data.

Codes and Result

Example 2: React & react-paginate

Instruction

I made the demo of react-paginate tidier.

You can manipulate data in App.tsx.

|App.tsx|

// the data
const allItems = [...Array(33).keys()];

// the number of items in a page
const itemsPerPage = 4;

If you click a page, you can check the status through the console.

You can change things like the number of buttons shown in 'ReactPaginate' component in 'Paginate' component.

Codes and Result