added pagination to batch jobs table

src/components/Job/JobDetailsBatchJob.jsx

-import { useMemo } from "react";
+import { useMemo, useEffect, useState } from "react";
 import {
   EllipsisText,
   InternalLink,
   Table,
-  SimpleAccordion
+  SimpleAccordion,
+  usePagination
 } from "@ess-ics/ce-ui-common";
 import { Typography, Stack } from "@mui/material";
 import {
@@ -13,6 +14,7 @@ import {
   calculateHostText
 } from "./JobUtils";
 import { JobRevisionChip } from "./JobRevisionChip";
+import { ROWS_PER_PAGE } from "../../constants";
 
 const columns = [
   {
@@ -60,6 +62,14 @@ const createRow = (job, action) => {
 };
 
 export const JobDetailsBatchJob = ({ operation }) => {
+  const [currentRows, setCurrentRows] = useState([]);
+  const { pagination, setPagination } = usePagination({
+    rowsPerPageOptions: ROWS_PER_PAGE,
+    initLimit: ROWS_PER_PAGE[0],
+    initPage: 0,
+    initTotalCount: operation.jobs.length
+  });
+
   const noOfIOCs = useMemo(() => {
     return getNoOfIOCs(operation.jobs);
   }, [operation]);
@@ -68,6 +78,18 @@ export const JobDetailsBatchJob = ({ operation }) => {
     return getNoOfHosts(operation.jobs);
   }, [operation]);
 
+  useEffect(() => {
+    const { limit, page } = pagination;
+    const list = operation.jobs.reduce((acc, _, index) => {
+      if (index % limit === 0) {
+        acc.push(operation.jobs.slice(index, index + limit));
+      }
+      return acc;
+    }, []);
+
+    setCurrentRows(list[page]);
+  }, [pagination, setPagination, operation]);
+
   return (
     <SimpleAccordion
       summary={
@@ -98,7 +120,9 @@ export const JobDetailsBatchJob = ({ operation }) => {
       <Table
         columns={columns}
         disableColumnSorting
-        rows={operation.jobs.map((job) => createRow(job, operation.action))}
+        rows={currentRows.map((job) => createRow(job, operation.action))}
+        pagination={pagination}
+        onPage={setPagination}
       />
     </SimpleAccordion>
   );