diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index bfcaed1e6..b31346b30 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -8,8 +8,13 @@ import {
TableBody,
TableFooter,
TablePagination,
+ Pagination,
+ PaginationItem,
} from "@mui/material";
+import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
+import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
+
import { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import axiosInstance from "../../../Utils/axiosConfig";
@@ -68,52 +73,73 @@ const IncidentTable = ({ monitorId, filter }) => {
});
};
- return (
-
-
-
-
- Monitor Name
- Status
- Date & Time
- Message
-
-
-
- {checks.map((check) => {
- const status = check.status === true ? "up" : "down";
+ let paginationComponent = <>>;
+ if (checksCount > paginationController.rowsPerPage) {
+ paginationComponent = (
+ (
+
+ )}
+ />
+ );
+ }
- return (
-
-
-
-
-
- {new Date(check.createdAt).toLocaleString()}
-
- {check.statusCode}
-
- );
- })}
-
-
-
-
-
-
-
-
+ return (
+ <>
+
+
+
+
+ Monitor Name
+ Status
+ Date & Time
+ Message
+
+
+
+ {checks.map((check) => {
+ const status = check.status === true ? "up" : "down";
+
+ return (
+
+
+
+
+
+ {new Date(check.createdAt).toLocaleString()}
+
+ {check.statusCode}
+
+ );
+ })}
+
+
+
+ {paginationComponent}
+ >
);
};