Added prop to display # of rows

Client/src/Components/BasicTable/index.jsx

@@ -33,6 +33,7 @@ import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
  *       @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.
+ * @param {number} props.rowsPerPage- Number of rows per page (table).
  *
  * @example
  * const data = {
@@ -67,11 +68,10 @@ import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
  * <BasicTable data={data} rows={rows} paginated={true} />
  */
 
-const BasicTable = ({ data, paginated, reversed }) => {
+const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
   // Add headers to props validation
 
   const [page, setPage] = useState(0);
-  const rowsPerPage = 5;
 
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
@@ -158,6 +158,7 @@ BasicTable.propTypes = {
   data: PropTypes.object.isRequired,
   paginated: PropTypes.bool,
   reversed: PropTypes.bool,
+  rowPerPage: PropTypes.number,
 };
 
 export default BasicTable;

Client/src/Pages/Incidents/index.jsx

@@ -158,7 +158,7 @@ const Incidents = () => {
           />
         </ButtonGroup>
       </Stack>
-      <BasicTable data={data} paginated={true} />
+      <BasicTable data={data} paginated={true} rowsPerPage={12}/>
     </Stack>
   );
 };