responsive table added and partly implemented. Has optional gutter component for rendering a subcomponent on the press of a button

src/pages/Users.tsx

@@ -42,6 +42,7 @@ import { makeStyles } from "@mui/styles";
 import { pond } from "protobuf-ts/pond";
 import { getSecondaryColour, getSignatureAccentColour } from "services/whiteLabel";
 import { Add, ChevronRight, Face, Remove } from "@mui/icons-material";
+import ResponsiveTable from "common/ResponsiveTable";
 
 const useStyles = makeStyles((theme: Theme) => {
   // const isMobile = useMobile()
@@ -108,6 +109,7 @@ export default function Users(props: Props) {
   // let tableRef: any = React.createRef();
   const { error, success } = useSnackbar();
   const [pageSize, setPageSize] = useState(5);
+  const [isLoading, setIsLoading] = useState(false);
   const [page, setPage] = useState(0);
   const [total, setTotal] = useState(0);
   const [showAllowAction, setShowAllowAction] = useState(false);
@@ -115,6 +117,7 @@ export default function Users(props: Props) {
   const [showEnableFeature, setShowEnableFeature] = useState(false);
   const [selectedFeature, setSelectedFeature] = useState<Option | undefined>();
   const [selectedUser, setSelectedUser] = useState(User.create());
+  const [searchText, setSearchText] = useState("");
   const TitleMap = new Map([
     ["Uploaded", "uploaded"],
     ["Version", "version"],
@@ -295,19 +298,22 @@ export default function Users(props: Props) {
   const [rows, setRows] = useState<User[]>([])
 
   const loadUsers = () => {
-    userAPI.listUsers(pageSize, page*pageSize, "desc", "name").then(resp => {
+    setIsLoading(true)
+    userAPI.listUsers(pageSize, page*pageSize, "desc", "name", searchText).then(resp => {
       let r: User[] = []
       resp.users.forEach((user, _index) => {
         r.push(user)
       })
       setRows(r)
       setTotal(resp.total)
+    }).then(() => {
+      setIsLoading(false);
     })
   }
 
   useEffect(() => {
     loadUsers();
-  }, [page, pageSize]); // Trigger fetching data when page or pageSize changes
+  }, [page, pageSize, searchText]); // Trigger fetching data when page or pageSize changes
 
   const handleRowsPerPageChange = (event: any) => {
     const newRowsPerPage = parseInt(event.target.value, 10); // Get selected value
@@ -324,10 +330,8 @@ export default function Users(props: Props) {
   }
 
   useEffect(() => {
-    // console.log("Open Row: ", openRow);
-    console.log("Selected User: ", selectedUser);
-    console.log("Selected ID: ", selectedUser.id())
-  }, [selectedUser])
+    console.log(isLoading)
+  }, [isLoading])
 
   return (
     <PageContainer>
@@ -463,6 +467,19 @@ export default function Users(props: Props) {
           </Button>
         </DialogActions>
       </ResponsiveDialog>
+      <ResponsiveTable<User> 
+        // title="Users"
+        rows={rows}
+        total={total}
+        page={page}
+        pageSize={pageSize}
+        setPage={setPage}
+        handleRowsPerPageChange={handleRowsPerPageChange}
+        setSearchText={setSearchText}
+        isLoading={isLoading}
+        renderGutter={details}
+        // multiGutter
+      />
     </PageContainer>
   );
 }