andi/Practice-1
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

modified users.tsx #1

Browse Source
This commit is contained in:
Lang-Bakos Andrea
2025-01-06 15:19:11 +01:00
parent 77d6549e35
commit 42e25b13f6
3 changed files with 38 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package-lock.json generated
View File

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

13
package.json
View File

@@ -10,17 +10,20 @@
"format": "prettier --write ./src" "format": "prettier --write ./src"
}, },
"dependencies": { "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": "^18.3.0",
"react-admin": "^5.4.0", "react-admin": "^5.4.0",
"react-dom": "^18.3.0", "react-dom": "^18.3.0"
"ra-data-json-server": "^5.4.0"
}, },
"devDependencies": { "devDependencies": {
"@typescript-eslint/parser": "^5.60.1",
"@typescript-eslint/eslint-plugin": "^5.60.1",
"@types/node": "^20.10.7", "@types/node": "^20.10.7",
"@types/react": "^18.3.3", "@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0", "@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", "@vitejs/plugin-react": "^4.0.1",
"eslint": "^8.43.0", "eslint": "^8.43.0",
"eslint-config-prettier": "^8.8.0", "eslint-config-prettier": "^8.8.0",
@@ -31,4 +34,4 @@
"vite": "^5.3.5" "vite": "^5.3.5"
}, },
"name": "test-admin" "name": "test-admin"
} }

42
src/users.tsx
View File

@@ -1,17 +1,29 @@
// in src/users.tsx // 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 = () => {
<List> const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
<Datagrid> return (
<TextField source="id" /> <List>
<TextField source="name" /> {isSmall ? (
<TextField source="username" /> <SimpleList
<EmailField source="email" /> primaryText={(record) => record.name}
<TextField source="address.street" /> secondaryText={(record) => record.username}
<TextField source="phone" /> tertiaryText={(record) => record.email}
<TextField source="website" /> />
<TextField source="company.name" /> ) : (
</Datagrid> <Datagrid>
</List> <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>
);
};