In my recent project, I needed to implement pagination for lists of items. After exploring various approaches online, I understood how I could do it. The backend is Laravel and the API result has pagination. My goal was to create a component for displaying the “Previous” and the “Next” buttons. Following this approach, I successfully developed a custom pagination component. Here’s the code:
const Pagination = ({ meta, onHandlePage }) => {
const classConditionNext =
meta.page == meta.pages
? "cursor-default pointer-events-none"
: "cursor-pointer hover:bg-blue-200";
const classConditionPervious =
meta.page == 1
? "cursor-default pointer-events-none"
: "cursor-pointer hover:bg-blue-200";
const showOffset = meta.limit * (meta.page - 1) + 1;
const showLimit = meta.limit * meta.page;
if (meta.pages == 1 || meta.total == 0) return;
return (
<div className="w-5/6 flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
<div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
<div>
<p className="text-sm text-gray-700">
Showing <span className="font-medium">{showOffset} </span>
to <span className="font-medium">{showLimit} </span>
of <span className="font-medium">{meta.total} </span>
results
</p>
</div>
<div>
<nav
className="isolate inline-flex -space-x-px rounded-md shadow-sm"
aria-label="Pagination"
>
<a
onClick={(e) => onHandlePage(meta.page - 1)}
aria-current="page"
className={`rounded-lg relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900
ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 mr-1 ${classConditionPervious}`}
>
Pervious
</a>
<a
onClick={(e) => onHandlePage(meta.page + 1)}
className={`rounded-lg relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900
ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 ${classConditionNext}`}
>
Next
</a>
</nav>
</div>
</div>
</div>
);
};
export default Pagination;
Here’s how to call the component:
<Pagination meta={meta} onHandlePage={handlePage} />
My front-end styling is powered by Tailwind CSS.
What is Meta:
The Laravel API response includes a meta key containing pagination information.
{
"data": [
{
"id": 1,
"name": "Test",
"created_at": "2024-03-24T08:41:18.000000Z",
"updated_at": "2024-03-24T08:41:18.000000Z"
}
],
"status": "OK",
"code": 200,
"error_message": "",
"meta": {
"total": 1,
"pages": 1,
"limit": 10,
"page": 1,
"prev": null,
"next": null
}
}
What is handlePage:
The handlePage method updates the current page number when either the previous or next button is clicked.
const handlePage = (e: any) => {
setPage(e);
};
Please leave me your opinion in the comments.
Hey people!!!!!
Good mood and good luck to everyone!!!!!