App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
// Build a React.js rc-pagination Library to Implement Pagination of Data With Controls in JSX import React, { useState } from 'react'; import Pagination from 'rc-pagination'; import "rc-pagination/assets/index.css" const App = () => { // State to manage the current page const [currentPage, setCurrentPage] = useState(1); // Example data const itemsPerPage = 10; const totalItems = 100; // Adjust this to match your dataset const data = Array.from({ length: totalItems }, (_, index) => `Item ${index + 1}`); // Get the items for the current page const currentItems = data.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage ); // Handle page change const onPageChange = (page) => { setCurrentPage(page); }; return ( <div style={{ padding: '20px' }}> <h1>Pagination Example with rc-pagination</h1> {/* Display items */} <ul> {currentItems.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> {/* Pagination component */} <Pagination current={currentPage} total={totalItems} pageSize={itemsPerPage} onChange={onPageChange} /> </div> ); }; export default App; |
