Create Next App

Tabs

Avatar This is a guideline for you on how to create you first product in your store

Person 1
Person 2
Person 3
Person 4
Person 5
Person 6
Person 7
Person 8
Person 9
Person 10

Tabs

This is a guideline for you on how to create you first product in your store

Default

...

Disabled

...

React js


  import React from 'react';
import Tabs from 'vestarplus/Pagination';


const MyTabsComponent = () => {
const [currentPage, setCurrentPage] = useState(1);

   const handlePageChange = (page) => {
    setCurrentPage(page);
    // You can fetch data or perform actions based on the new page here
  };

  // Generate a list of people's names (replace this with your actual data)
  const peopleList = Array.from(
    { length: 90 },
 (_, index) => Person {index + 1}
  );

  // Calculate the range of items to display for the current page
  const itemsPerPage = 10;
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const displayedPeople = peopleList.slice(startIndex, endIndex);

  return (
    <div>
      <ul>{displayedPeople.map((person, index) => ( <li key={index}>{person}</li> ))}</ul>
       <Pagination totalItems={peopleList.length} itemsPerPage={itemsPerPage} onPageChange={handlePageChange} arrowLeft="&lt;" arrowRight="&gt;" />
       <Pagination totalItems={peopleList.length} itemsPerPage={itemsPerPage} onPageChange={handlePageChange} arrowLeft="&lt;" arrowRight="&gt;" disabled />
    </div>
   

  );
};

export default MyTabsComponent;

HTMLCSSJS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index.css">
        <title>Simple Pagination</title>
    </head>

    <body>
        <div id="paginationContainer" class="pagination-container"></div>
        <script src="script.js"></script>
    </body>

</html>