modified users.tsx #1

package-lock.json

@@ -6,6 +6,9 @@
     "": {
       "name": "test-admin",
       "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@mui/material": "^5.16.13",
         "ra-data-json-server": "^5.4.0",
         "react": "^18.3.0",
         "react-admin": "^5.4.0",

package.json

@@ -10,17 +10,20 @@
     "format": "prettier --write ./src"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^5.16.13",
+    "ra-data-json-server": "^5.4.0",
     "react": "^18.3.0",
     "react-admin": "^5.4.0",
-    "react-dom": "^18.3.0",
-    "ra-data-json-server": "^5.4.0"
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
-    "@typescript-eslint/parser": "^5.60.1",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@types/node": "^20.10.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
     "@vitejs/plugin-react": "^4.0.1",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",

src/users.tsx

@@ -1,8 +1,18 @@
 // 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 = () => (
+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" />
@@ -13,5 +23,7 @@ export const UserList = () => (
                     <TextField source="website" />
                     <TextField source="company.name" />
                 </Datagrid>
+            )}
         </List>
     );
+};