Prep monitor details page for better data handling, minor fix to basic table component

Client/src/Components/BasicTable/index.jsx

@@ -9,7 +9,7 @@ import {
   Pagination,
   PaginationItem,
 } from "@mui/material";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import "./index.css";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
@@ -73,6 +73,10 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
 
   const [page, setPage] = useState(0);
 
+  useEffect(() => {
+    setPage(0);
+  }, [data]);
+
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
   };