modified users.tsx #1

src/users.tsx

@@ -1,17 +1,29 @@
 // in src/users.tsx
-import { List, Datagrid, TextField, EmailField } from "react-admin";
+import { useMediaQuery } from "@mui/material";
+import { List, SimpleList, Datagrid, TextField, EmailField, } from "react-admin";
 
-export const UserList = () => (
-    <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="name" />
-            <TextField source="username" />
-            <EmailField source="email" />
-            <TextField source="address.street" />
-            <TextField source="phone" />
-            <TextField source="website" />
-            <TextField source="company.name" />
-        </Datagrid>
-    </List>
-);
+export const UserList = () => {
+    const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+    return (
+        <List>
+            {isSmall ? (
+                <SimpleList
+                    primaryText={(record) => record.name}
+                    secondaryText={(record) => record.username}
+                    tertiaryText={(record) => record.email}
+                />
+            ) : (
+                <Datagrid>
+                    <TextField source="id" />
+                    <TextField source="name" />
+                    <TextField source="username" />
+                    <EmailField source="email" />
+                    <TextField source="address.street" />
+                    <TextField source="phone" />
+                    <TextField source="website" />
+                    <TextField source="company.name" />
+                </Datagrid>
+            )}
+        </List>
+    );
+};