Pagination with ant design
Thu Aug 10 2023 09:31:20 GMT+0000 (Coordinated Universal Time)
Saved by @MuhammadAhmad #spreadoperator
import React, { useState } from 'react'; import { Pagination } from 'antd'; import 'antd/dist/reset.css'; // Import Ant Design styles const Test = () => { const itemsPerPage = 3; // Number of items (posts) to display per page const [currentPage, setCurrentPage] = useState(1); // Simulated array of posts const posts = [ { id: 1, title: 'Post 1', content: 'Content of post 1' }, { id: 2, title: 'Post 2', content: 'Content of post 2' }, { id: 3, title: 'Post 3', content: 'Content of post 3' }, { id: 4, title: 'Post 4', content: 'Content of post 4' }, { id: 5, title: 'Post 5', content: 'Content of post 5' }, { id: 6, title: 'Post 6', content: 'Content of post 6' }, { id: 7, title: 'Post 7', content: 'Content of post 7' }, { id: 8, title: 'Post 8', content: 'Content of post 8' }, { id: 9, title: 'Post 9', content: 'Content of post 9' }, ]; const totalItems = posts.length; const handlePageChange = (newPage) => { if (newPage >= 1 && newPage <= Math.ceil(totalItems / itemsPerPage)) { setCurrentPage(newPage); } }; const currentPosts = posts.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage ); return ( <div className="container mx-auto p-4"> <h1 className="text-2xl font-semibold mb-4">Paginated Posts</h1> {currentPosts.map((post) => ( <div key={post.id} className="border p-4 mb-4"> <h2 className="text-lg font-semibold">{post.title}</h2> <p>{post.content}</p> </div> ))} <div className="flex flex-row justify-between items-center rounded-xl mt-10 px-2 gap-5 md:px-8 py-3 border w-full"> <button className={`border p-2 px-4 ${ currentPage === 1 ? 'border-navy bg-navy text-white' : 'border-navy' } rounded-full`} onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1} > BACK </button> <div className="flex flex-wrap gap-3 mb-[21px] items-end text-navy"> <Pagination current={currentPage} total={totalItems} pageSize={itemsPerPage} showSizeChanger={false} showLessItems={true} showQuickJumper={false} onChange={handlePageChange} itemRender={(current, type, originalElement) => { if (type === 'page') { return ( <button className={`border p-2 px-4 ${ current === currentPage ? 'border-navy bg-navy text-white' : 'border-navy' } rounded-full`} style={{ cursor: 'pointer' }} onClick={() => handlePageChange(current)} > {current} </button> ); } else if (type === 'jump-prev' || type === 'jump-next') { return ( <button className=" p-2 px-3 rounded-full" style={{ color: 'blue', cursor: 'pointer' }} onClick={() => handlePageChange(currentPage + 1)} > ..... </button> ); } }} /> </div> <button className={`border p-2 px-4 ${ currentPage === Math.ceil(totalItems / itemsPerPage) ? 'border-navy bg-navy text-white' : 'border-navy' } rounded-full`} onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === Math.ceil(totalItems / itemsPerPage)} > NEXT </button> </div> </div> ); }; export default Test;
Comments