responsive table now has optional mobile render prop; users now has functional mobile view

src/pages/Users.tsx

@@ -1,5 +1,6 @@
 import {
   Avatar,
+  Box,
   Button,
   Chip,
   darken,
@@ -326,9 +327,28 @@ export default function Users() {
     );
   };
 
+  const renderMobile = (user: User) => {
+    const avatarURL = user.settings.avatar;
+    const avatar = avatarURL ? (
+      <Avatar alt={user.name()} src={avatarURL} />
+    ) : (
+      <Avatar alt={user.name()}>
+        <Face />
+      </Avatar>
+    );
+    return (
+      <Box sx={{padding: 1}}>
+        <ListItem>
+          <ListItemAvatar>{avatar}</ListItemAvatar>
+          <ListItemText primary={user.name()} secondary={user.settings.email} />
+        </ListItem>
+      </Box>
+    )
+  }
+
   return (
     <PageContainer>
-       <ResponsiveTable<User> 
+      <ResponsiveTable<User> 
         title="Users"
         rows={rows}
         columns={columns()}
@@ -340,6 +360,7 @@ export default function Users() {
         setSearchText={setSearchText}
         isLoading={isLoading}
         renderGutter={details}
+        renderMobile={renderMobile}
         // multiGutter
       />
       <ResponsiveDialog