Create Pagination UI Using React And Tailwind CSS
When working with huge data sets in online applications, pagination is an essential feature. It makes a lengthy list of items easier to browse through by dividing them into digestible parts. This article will tell you how to use Tailwind CSS for styling and React for front-end functionality to create a pagination user interface.
Prerequisites
Approach To Create Pagination UI
The main functionalities of our pagination component will include:
- Set up the React project using the below steps and add all code in the App.jsx file.
- Showing pagination buttons with "Next" and "Previous" for navigating between pages.
- Highlighting the current page.
- Disabling the "Previous" and "Next" buttons when at the start or end of the list, respectively.
Steps to Create Pagination UI
Step 1: Set up the React Project
npx create-react-app pagination-appStep 2: Navigate to the path of the directory and install node modules using the command.
cd pagination-app
npm install
Step 3: Install Tailwind CSS using the command.
npm install -D tailwindcss
npx tailwindcss init
Step 4: Configure the tailwind paths in your tailwind.config.js file.
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Step 5: Add tailwind directives to your index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 6: Create a components folder and inside it, add a file called Pagination.js where we’ll write the logic for the pagination UI.
Project Structure:
Updated Dependencies:
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
Example: Here’s is the example to create the Pagination UI using React And Tailwind CSS
// Pagination.js
import React from 'react';
const Pagination = ({ totalItems, itemsPerPage, currentPage, setCurrentPage }) => {
const totalPages = Math.ceil(totalItems / itemsPerPage);
const pages = [];
for (let i = 1; i <= totalPages; i++) {
pages.push(i);
}
const handlePrevious = () => {
if (currentPage > 1) {
setCurrentPage(currentPage - 1);
}
};
const handleNext = () => {
if (currentPage < totalPages) {
setCurrentPage(currentPage + 1);
}
};
return (
<div className="flex justify-center items-center space-x-2 mt-4">
<button
className={`px-4 py-2 rounded ${currentPage === 1 ?
'bg-gray-300' : 'bg-blue-500 text-white'
}`}
onClick={handlePrevious}
disabled={currentPage === 1}>
Previous
</button>
{pages.map((page) => (
<button
key={page}
className={`px-4 py-2 rounded ${currentPage === page ?
'bg-blue-500 text-white' : 'bg-gray-200'
}`}
onClick={() => setCurrentPage(page)} >
{page}
</button>
))}
<button
className={`px-4 py-2 rounded ${currentPage === totalPages ?
'bg-gray-300' : 'bg-blue-500 text-white'
}`}
onClick={handleNext}
disabled={currentPage === totalPages} >
Next
</button>
</div>
);
};
export default Pagination;
// App.js
import React, { useState } from 'react';
import Pagination from './component/Pagination';
const App = () => {
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 5;
const totalItems = 50; // Assume there are 50 items
return (
<div className="App">
<h1 className="text-center text-2xl font-bold">Pagination Example</h1>
<Pagination
totalItems={totalItems}
itemsPerPage={itemsPerPage}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
/>
</div>
);
};
export default App;
To start the Application run the following command:
npm startOutput:
