got the group drawer set up using the responsive tabe for the devices

src/maps/mapDrawers/GroupDrawer.tsx

@@ -1,10 +1,15 @@
-import { Box } from "@mui/material";
+import { Box, Grid2, Typography } from "@mui/material";
 import DisplayDrawer from "common/DisplayDrawer";
+import ResponsiveTable from "common/ResponsiveTable";
 //import DeviceCardList from "device/DeviceCardList";
 import { useGroupAPI, useSnackbar } from "hooks";
 import { Group } from "models";
+import moment from "moment";
+import { describePower } from "pbHelpers/Power";
+import BindaptIcon from "products/Bindapt/BindaptIcon";
 import { pond } from "protobuf-ts/pond";
 import React, { useEffect, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
 import { or } from "utils";
 
 interface Props {
@@ -22,6 +27,9 @@ export default function GroupDrawer(props: Props) {
   const groupAPI = useGroupAPI();
   const { openSnack } = useSnackbar();
   const [grpDevs, setGrpDevs] = useState<pond.ComprehensiveDevice[]>([]);
+  const navigate = useNavigate();
+  const [tablePage, setTablePage] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
 
   const loadDevs = useCallback(() => {
     groupAPI
@@ -121,8 +129,69 @@ export default function GroupDrawer(props: Props) {
       });
   };
 
+  const toDevice = (comprehensiveDevice: pond.ComprehensiveDevice) => {
+    let device = comprehensiveDevice.device
+    if(device){
+      let url = "/groups/" + selectedGroup
+      url = url + "/devices/" + device.settings?.deviceId
+      navigate(url, { replace: true, state: {device: device} })
+    }
+  };
+
+  const mobile = (row: pond.ComprehensiveDevice) => {
+    return (
+      <Box sx={{ margin: 2 }}>
+        <Grid2 spacing={1} container direction={"row"} justifyContent="space-between" alignItems={"center"}>
+          <Grid2 >
+            {/* {GetDeviceProductIcon(row)} */}
+            {/* {icon} */}
+            <BindaptIcon />
+          </Grid2>
+          <Grid2 size={{ xs: 9}}>
+            <Grid2 container direction="column">
+              <Grid2>
+                {row.device?.settings?.name}
+              </Grid2>
+              <Grid2>
+                Last Active: {moment(row.device?.status?.lastActive).fromNow()}
+              </Grid2>
+            </Grid2>
+          </Grid2>
+          <Grid2 >
+            {describePower(row.device?.status?.power).icon}
+          </Grid2>
+        </Grid2>
+      </Box>
+    )
+  }
+
+  const gutter = (row: pond.ComprehensiveDevice) => {
+    return (
+      <Box padding={1}>
+        <Typography>{row.device?.settings?.description}</Typography>
+      </Box>
+    )
+  }
+
   const drawerBody = () => {
-    return (<Box>Use the responsive table here</Box>)
+    // TODO: will need to update the rows and setPage functions if we decide to have the table only show a number of items matching its page size rether than everything passed in
+    return (
+      <Box>
+        <ResponsiveTable<pond.ComprehensiveDevice>
+          page={tablePage}
+          pageSize={pageSize}
+          onRowClick={toDevice}
+          handleRowsPerPageChange={()=>{}}
+          setPage={()=>{}}
+          total={grpDevs.length}
+          rows={grpDevs}
+          renderMobile={mobile}
+          renderGutter={gutter}
+          gutterPadding={0}
+          mobileView
+        />
+      </Box>
+    )
     //return <DeviceCardList devices={grpDevs} refreshCallback={loadDevs} showMobile={true} />;
   };
 
@@ -141,4 +210,4 @@ export default function GroupDrawer(props: Props) {
       />
     </React.Fragment>
   );
-}
+}