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",
"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",

13
package.json
View File

@@ -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",
@@ -31,4 +34,4 @@
"vite": "^5.3.5"
},
"name": "test-admin"
}
}

42
src/users.tsx
View File

@@ -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>
);
};