1 min read

Example 1: Vanilla JavaScript


Manipulate these values if you want.


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

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


Change the array.

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

Codes and Result

Example 2: React & react-paginate


I made the demo of react-paginate tidier.

You can manipulate data in 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