From 5819efadf701efd670a0d42da6f1ca140bc2ddd0 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sun, 21 Jul 2024 09:22:00 -0700
Subject: [PATCH] Added reverse prop to BasicTable to allow for reversing order
 of data

---
 Client/src/Components/BasicTable/index.jsx  | 9 ++++++---
 Client/src/Pages/Monitors/Details/index.jsx | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 393ba18ca..c76266a98 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -32,6 +32,7 @@ import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
  *       @param {JSX.Element} props.data.rows[].data[].data - The content to display in the cell.
  *       @param {function} props.data.rows.data.handleClick - Function to call when the row is clicked.
  * @param {boolean} [props.paginated=false] - Flag to enable pagination.
+ * @param {boolean} [props.reversed=false] - Flag to enable reverse order.
  *
  * @example
  * const data = {
@@ -66,7 +67,7 @@ import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
  * <BasicTable data={data} rows={rows} paginated={true} />
  */
 
-const BasicTable = ({ data, paginated }) => {
+const BasicTable = ({ data, paginated, reversed }) => {
   // Add headers to props validation
 
   const [page, setPage] = useState(0);
@@ -79,9 +80,10 @@ const BasicTable = ({ data, paginated }) => {
   let displayData = [];
 
   if (data && data.rows) {
+    let rows = reversed ? [...data.rows].reverse() : data.rows;
     displayData = paginated
-      ? data.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-      : data.rows;
+      ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+      : rows;
   }
 
   if (!data || !data.cols || !data.rows) {
@@ -149,6 +151,7 @@ const BasicTable = ({ data, paginated }) => {
 BasicTable.propTypes = {
   data: PropTypes.object.isRequired,
   paginated: PropTypes.bool,
+  reversed: PropTypes.bool,
 };
 
 export default BasicTable;
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 7e9214f18..496ea2034 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -298,7 +298,7 @@ const DetailsPage = () => {
           <Typography component="h2" mb={theme.gap.ml}>
             History
           </Typography>
-          <BasicTable data={data} paginated={true} />
+          <BasicTable data={data} paginated={true} reversed={true} />
         </Box>
       </Stack>
     </div>