made search bar more functional

src/common/ResponsiveTable.tsx

@@ -1,8 +1,9 @@
 import { Box, CircularProgress, Collapse, darken, IconButton, InputAdornment, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { ChevronRight, Search } from "@mui/icons-material"
+import { ChevronRight, Close, Search } from "@mui/icons-material"
 import { useEffect, useState } from "react";
 import React from "react";
+import { useMobile } from "hooks";
 
 const useStyles = makeStyles((theme: Theme) => {
   // const isMobile = useMobile()
@@ -50,6 +51,8 @@ interface Props<T> {
   setSearchText?: React.Dispatch<React.SetStateAction<string>>,
   isLoading?: boolean;
   multiGutter?: boolean;
+  rowsPerPageOptions?: number[];
+  noDataMessage?: string;
 }
 
 export default function ResponsiveTable<T extends Object>(props: Props<T>) {
@@ -65,19 +68,24 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     setSearchText, 
     isLoading,
     multiGutter,
-    columns
+    columns,
+    rowsPerPageOptions,
+    noDataMessage,
   } = props
   const classes = useStyles();
 
+  const isMobile = useMobile()
+
   const [inputSearchText, setInputSearchText] = useState("");
   const [openGutters, setOpenGutters] = useState<number[]>([])
+  const [handler, setHandler] = useState<NodeJS.Timeout | undefined>(undefined);
 
   useEffect(() => {
     if (!setSearchText) return;
     if (inputSearchText === undefined) return;
-    const handler = setTimeout(() => {
+    setHandler(setTimeout(() => {
       setSearchText(inputSearchText);
-    }, 750); // Delay of 750ms
+    }, 750)); // Delay of 750ms
 
     return () => clearTimeout(handler); // Cleanup on change
   }, [inputSearchText]);
@@ -98,11 +106,28 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     }
   }
 
+  const handleKeyDown = (e: any) => {
+    if (e.key === 'Enter') {
+      if (setSearchText) setSearchText(inputSearchText);
+      clearTimeout(handler)
+    }
+  };
+
   const handlePageChange = (page: number) => {
     setOpenGutters([])
     setPage(page)
   }
 
+  const clearSearch = () => {
+    setInputSearchText("")
+  }
+
+  if (isMobile) return (
+    <Typography>
+      Hello!
+    </Typography>
+  )
+
   return (
     <TableContainer className={classes.tableContainer} component={Paper}>
       <Table>
@@ -120,11 +145,13 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
               }
             </TableCell>}
             { setSearchText &&
-              <TableCell colSpan={title ? 2 : 4} className={classes.searchContainer}>
+              <TableCell colSpan={title ? columns ? 4 : 2 : 6} className={classes.searchContainer}>
                 <TextField 
                   variant="standard"
+                  placeholder="Search..."
                   className={classes.title}
                   value={inputSearchText}
+                  onKeyDown={handleKeyDown}
                   onChange={e => setInputSearchText(e.currentTarget.value)}
                   InputProps={{
                     startAdornment: (
@@ -132,6 +159,13 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                         <Search />
                       </InputAdornment>
                     ),
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton onClick={clearSearch}>
+                          <Close />
+                        </IconButton>
+                      </InputAdornment>
+                    ),
                   }}
                 />
               </TableCell>
@@ -187,7 +221,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                     {columns ? 
                       columns.map((column, j) => {
                         if (column.render) return (
-                          <TableCell key={"row-"+index+"cell-"+j}>
+                          <TableCell key={"row-"+index+"cell-"+j} sx={column.cellStyle}>
                             {column.render(row)}
                           </TableCell>
                         )
@@ -220,10 +254,19 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
               )
             })
           }
+          {rows.length < 1 && !isLoading &&
+            <TableRow>
+              <TableCell colSpan={6} sx={{textAlign: "center" }}>
+                <Typography variant="body2" color="textSecondary">
+                  {noDataMessage ? noDataMessage : "No data found"}  
+                </Typography>  
+              </TableCell>
+            </TableRow>
+          }
         </TableBody>
       </Table>
       <TablePagination
-        rowsPerPageOptions={[5, 10, 20]}
+        rowsPerPageOptions={rowsPerPageOptions ? rowsPerPageOptions : [5, 10, 20]}
         component="div"
         count={total}
         rowsPerPage={pageSize}

src/pages/Users.tsx

@@ -326,8 +326,6 @@ export default function Users() {
     );
   };
 
-  
-
   return (
     <PageContainer>
        <ResponsiveTable<User>