/ var / www / html / events / src / components / [ HOME SHELL ]

Name	Size	Permission	Action
ui	[ DIR ]	drwxrwxr-x
AddEvent.js	8.29 KB	-rw-rw-r--
AddUser.js	5.79 KB	-rw-rw-r--
CustomInput.js	3.43 KB	-rw-rw-r--
EventTableRow.js	2.23 KB	-rw-rw-r--
Events.js	3.39 KB	-rw-rw-r--
Home.js	11.2 KB	-rw-rw-r--
Navbar.js	10.61 KB	-rw-rw-r--
NextToast.js	62 B	-rw-rw-r--
PaginateItems.js	2.61 KB	-rw-rw-r--
Provider.js	171 B	-rw-rw-r--
ShowEvent.js	8.95 KB	-rw-rw-r--
ShowHomeEvent.js	3.26 KB	-rw-rw-r--
UpdateEvent.js	10.27 KB	-rw-rw-r--
UpdateUser.js	8.89 KB	-rw-rw-r--
UserTableRow.js	1.64 KB	-rw-rw-r--

Code Editor : PaginateItems.js

import React from 'react'
import ReactPaginate from "react-paginate";
const PaginateItems = ({items}) => {

const itemsPerPage = 25;

const [itemOffset, setItemOffset] = useState(0);
    const endOffset = itemOffset + itemsPerPage;
    const currentItems = items.slice(itemOffset, endOffset);
    const pageCount = Math.ceil(items.length / itemsPerPage);

const handlePageClick = (event) => {
      const newOffset = (event.selected * itemsPerPage) % items.length;
      setItemOffset(newOffset);
    };

return (
    <div>
      <table className="w-full text-sm text-left rtl:text-right text-black dark:text-black">
        <thead className="text-xs text-white uppercase bg-gray-400 dark:text-white text-center">
          <tr scope="col" className="px-6 py-3">
            <th scope="col" className="px-6 py-3">
              Name
            </th>
            <td scope="col" className="px-6 py-3">
              UID
            </td>
            <th scope="col" className="px-6 py-3">
              Score
            </th>
            <th scope="col" className="px-6 py-3">
              Country
            </th>
            <th scope="col" className="px-6 py-3">
              TimeStamp
            </th>
            <th scope="col" className="px-6 py-3">
              Rank
            </th>
          </tr>
        </thead>

<tbody className="text-center">
          {currentItems.map((item) => (
            <tr key={item.uid} className="bg-gray-300 border-b border-blue-400">
              <td className="px-6 py-4">{item.name}</td>
              <td className="px-6 py-4">{item.uid}</td>
              <td className="px-6 py-4">{item.score}</td>
              <td className="px-6 py-4">{item.country}</td>
              <td className="px-6 py-4">{item.timestamp}</td>
              <td className="px-6 py-4">{item.userrank}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <p>showing 25 (max) results per page*</p>
      <ReactPaginate
        breakLabel="..."
        nextLabel="next >"
        onPageChange={handlePageClick}
        pageRangeDisplayed={5}
        pageCount={pageCount}
        previousLabel="< previous"
        renderOnZeroPageCount={null}
        containerClassName="flex flex-row justify-center my-10"
        pageClassName="mx-2"
        activeClassName="bg-blue-400 text-white"
        activeLinkClassName="bg-blue-400 text-white px-3 py-2 rounded-md"
        disabledClassName="text-gray-400"
        nextClassName="mx-2"
        previousClassName="mx-2"
      />
    </div>
  );
}

export default PaginateItems

Urban Research Lab

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.