diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 10b747a55..37bc73d85 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -10,6 +10,8 @@ import {
TableBody,
TablePagination,
Box,
+ Typography,
+ Stack,
} from "@mui/material";
import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react";
import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
@@ -158,6 +160,12 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
return
No data
;
}
+ const getRange = () => {
+ let start = page * rowsPerPage + 1;
+ let end = Math.min(page * rowsPerPage + rowsPerPage, data.rows.length);
+ return `${start} - ${end}`;
+ };
+
return (
<>
@@ -188,41 +196,46 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
-
- `Page ${page + 1} of ${Math.max(0, Math.ceil(count / rowsPerPage))}`
- }
- slotProps={{
- select: {
- MenuProps: {
- PaperProps: {
- className: "pagination-dropdown",
+
+
+ Showing {getRange()} of {data.rows.length} monitor(s)
+
+
+ `Page ${page + 1} of ${Math.max(0, Math.ceil(count / rowsPerPage))}`
+ }
+ slotProps={{
+ select: {
+ MenuProps: {
+ PaperProps: {
+ className: "pagination-dropdown",
+ },
+ transformOrigin: { vertical: "bottom", horizontal: "left" },
+ anchorOrigin: { vertical: "top", horizontal: "left" },
+ sx: { mt: "-4px" },
+ },
+ inputProps: { id: "pagination-dropdown" },
+ IconComponent: SelectorVertical,
+ sx: {
+ ml: "8px",
+ mr: "25px",
+ minWidth: "50px",
+ textAlign: "left",
+ "&.Mui-focused > div": { backgroundColor: "white" },
},
- transformOrigin: { vertical: "bottom", horizontal: "left" },
- anchorOrigin: { vertical: "top", horizontal: "left" },
- sx: { mt: "-4px" },
},
- inputProps: { id: "pagination-dropdown" },
- IconComponent: SelectorVertical,
- sx: {
- ml: "8px",
- mr: "25px",
- minWidth: "50px",
- textAlign: "left",
- "&.Mui-focused > div": { backgroundColor: "white" },
- },
- },
- }}
- />
+ }}
+ />
+
>
);
};