indexing in UI

.env.example

@@ -1 +1 @@
-NEXT_PUBLIC_DB_URL = ""
+NEXT_PUBLIC_DB_URL = "https://localhost:3000"

src/components/displayTable/DataDisplay.tsx

@@ -42,14 +42,19 @@ const DataDisplay: React.FC = () => {
               .slice()
               .reverse()
               .map((row, i) => (
-                <TableRow row={row} index={i} key={i} />
+                <TableRow
+                  row={row}
+                  index={i}
+                  key={i}
+                  currentPage={currentPage}
+                  itemsPerPage={itemsPerPage}
+                />
               ))}
           </tbody>
         </table>
         <ReactPaginate
-          previousLabel={"previous"}
-          nextLabel={"next"}
-          breakLabel={"..."}
+          previousLabel={"Previous"}
+          nextLabel={"Next"}
           breakClassName={"break-me px-2 py-1"}
           marginPagesDisplayed={0}
           pageRangeDisplayed={0}
@@ -58,16 +63,15 @@ const DataDisplay: React.FC = () => {
             setCurrentPage(selected);
           }}
           containerClassName={
-            "pagination flex flex-wrap justify-center items-center my-4"
+            "pagination flex flex-wrap justify-between items-center my-4"
           }
-          pageClassName={"mx-1"}
+          pageClassName={"mx-1 hidden"}
           previousClassName={
             "mx-1 bg-[#B52326] text-white rounded px-2 py-1 sm:px-3 sm:py-2 hover: bg-[#B52326]"
           }
           nextClassName={
             "mx-1  bg-[#B52326] text-white rounded px-2 py-1 sm:px-3 sm:py-2 hover:bg- bg-[#B52326]"
           }
-          activeClassName={" bg-[#B52326] text-white rounded px-3 py-2"}
           disabledClassName={"opacity-50 cursor-not-allowed"}
         />
       </div>

src/components/displayTable/Row.tsx

@@ -4,7 +4,17 @@ import { Copy, Edit, Link, Trash2 } from "react-feather";
 import { RowType } from "@/types/types";
 import { DbTypes } from "@/types/ResponseTypes";
 
-const TableRow = ({ row, index }: { row: DbTypes; index: number }) => {
+const TableRow = ({
+  row,
+  index,
+  currentPage,
+  itemsPerPage,
+}: {
+  row: DbTypes;
+  index: number;
+  currentPage: number;
+  itemsPerPage: number;
+}) => {
   const [isExpand, setIsExpand] = useState<boolean>(false);
   const {
     meta_data,
@@ -34,10 +44,12 @@ const TableRow = ({ row, index }: { row: DbTypes; index: number }) => {
   const startTime = new Date(start_time!).toLocaleTimeString();
   const endTime = new Date(end_time!).toLocaleTimeString();
 
+  const actualIndex = currentPage * itemsPerPage + index + 1;
+
   return (
     <>
       <tr className="border text-center" onClick={() => setIsExpand(!isExpand)}>
-        <td className="border p-2">{index}</td>
+        <td className="border p-2">{actualIndex}</td>
         <td className="border p-2">{batch}</td>
         <td className="border p-2">{name}</td>
         <td className="border p-2">{startDate}</td>