diff --git a/docs/Breadcrumb.md b/docs/Breadcrumb.md index 39170a77707..2827642c8f0 100644 --- a/docs/Breadcrumb.md +++ b/docs/Breadcrumb.md @@ -763,7 +763,7 @@ export const SongList = () => { useDefineAppLocation('music.songs'); return ( - + diff --git a/docs/CustomRoutes.md b/docs/CustomRoutes.md index 9197f82a2b6..645093dfed5 100644 --- a/docs/CustomRoutes.md +++ b/docs/CustomRoutes.md @@ -259,7 +259,7 @@ const BookList = () => { const { authorId } = useParams(); return ( - + diff --git a/docs/Datagrid.md b/docs/Datagrid.md index 247f98b5683..4d49985ef94 100644 --- a/docs/Datagrid.md +++ b/docs/Datagrid.md @@ -61,7 +61,7 @@ Both are [Enterprise Edition](https://marmelab.com/ra-enterprise) components. | `isRowExpandable` | Optional | Function | `() => true` | A function that returns whether a row is expandable. | | `isRowSelectable` | Optional | Function | `() => true` | A function that returns whether a row is selectable. | | `optimized` | Optional | Boolean | `false` | Whether to optimize the rendering of the table. | -| `rowClick` | Optional | mixed | | The action to trigger when the user clicks on a row. | +| `rowClick` | Optional | mixed | `'show'` or `'edit'` | The action to trigger when the user clicks on a row. | | `rowStyle` | Optional | Function | | A function that returns the style to apply to a row. | | `rowSx` | Optional | Function | | A function that returns the sx prop to apply to a row. | | `size` | Optional | `'small'` or `'medium'` | `'small'` | The size of the table. | @@ -409,7 +409,7 @@ const FullNameField = () => { export const UserList = () => ( - + @@ -676,7 +676,9 @@ const PostList = () => ( ## `rowClick` -You can catch clicks on rows to redirect to the show or edit view by setting the `rowClick` prop: +By default, `` will look at the current [resource definition](https://marmelab.com/react-admin/Resource.html) to determine what to do when the user clicks on a row. If the resource has a `show` page, it will redirect to the Show view. If the resource has an `edit` page, it will redirect to the Edit view. Otherwise, the row will not be clickable. + +You can choose what happens when the user clicks on a row by setting the `rowClick` prop. For instance, set the `rowClick` prop to `"edit"` to redirect to the Edit view: ```tsx import { List, Datagrid } from 'react-admin'; @@ -692,10 +694,10 @@ export const PostList = () => ( `rowClick` accepts the following values: -* "edit" to redirect to the edition view -* "show" to redirect to the show view -* "expand" to open the `expand` panel -* "toggleSelection" to trigger the `onToggleItem` function +* `"edit"` to redirect to the edition view +* `"show"` to redirect to the show view +* `"expand"` to open the `expand` panel +* `"toggleSelection"` to trigger the `onToggleItem` function * `false` to do nothing * a function `(id, resource, record) => path` that may return any of the above values or a custom path diff --git a/docs/Features.md b/docs/Features.md index d4e22da4e8c..238ae3a5f07 100644 --- a/docs/Features.md +++ b/docs/Features.md @@ -214,7 +214,7 @@ const BookList = () => ( , ]}> - + diff --git a/docs/List.md b/docs/List.md index 855abcbd21f..933175fc792 100644 --- a/docs/List.md +++ b/docs/List.md @@ -300,7 +300,7 @@ export const PostList = () => { tertiaryText={record => new Date(record.published_at).toLocaleDateString()} /> ) : ( - + diff --git a/docs/ListTutorial.md b/docs/ListTutorial.md index a59b81c369e..77b8c77f740 100644 --- a/docs/ListTutorial.md +++ b/docs/ListTutorial.md @@ -541,7 +541,7 @@ export const PostList = () => { tertiaryText={record => new Date(record.published_at).toLocaleDateString()} /> ) : ( - + diff --git a/docs/RealtimeDataProvider.md b/docs/RealtimeDataProvider.md index 70f514d72b4..00b73d8281e 100644 --- a/docs/RealtimeDataProvider.md +++ b/docs/RealtimeDataProvider.md @@ -66,7 +66,7 @@ export const App = () => ( const SaleList = () => ( - + diff --git a/docs/Resource.md b/docs/Resource.md index 2fc1e42ef0e..fbfa3768983 100644 --- a/docs/Resource.md +++ b/docs/Resource.md @@ -130,7 +130,7 @@ export const BookList = () => { const { authorId } = useParams(); return ( - + @@ -347,7 +347,7 @@ export const SongList = () => { const { id } = useParams(); return ( - + diff --git a/docs/Tutorial.md b/docs/Tutorial.md index 203050484ab..e0f9e14c75c 100644 --- a/docs/Tutorial.md +++ b/docs/Tutorial.md @@ -166,7 +166,7 @@ import { List, Datagrid, TextField, EmailField } from "react-admin"; export const UserList = () => ( - + @@ -208,7 +208,7 @@ Let's take a moment to analyze the code of the `` component: ```tsx export const UserList = () => ( - + @@ -290,7 +290,7 @@ export const UserList = () => { tertiaryText={(record) => record.email} /> ) : ( - + @@ -325,7 +325,7 @@ Let's get back to ``. It reads the data fetched by ``, then rend ```diff // in src/users.tsx - + - @@ -352,7 +352,7 @@ For instance, the `website` field looks like a URL. Instead of displaying it as -import { List, SimpleList, Datagrid, TextField, EmailField } from "react-admin"; +import { List, SimpleList, Datagrid, TextField, EmailField, UrlField } from "react-admin"; // ... - + @@ -396,7 +396,7 @@ You can use the `` component in ``, instead of react-admin +import { List, SimpleList, Datagrid, TextField, EmailField } from "react-admin"; +import MyUrlField from './MyUrlField'; // ... - + @@ -484,7 +484,7 @@ import { List, Datagrid, TextField, ReferenceField } from "react-admin"; export const PostList = () => ( - + @@ -532,7 +532,7 @@ The `` component fetches the reference data, creates a `RecordCo **Tip**: Look at the network tab of your browser again: react-admin deduplicates requests for users, and aggregates them in order to make only *one* HTTP request to the `/users` endpoint for the whole Datagrid. That's one of many optimizations that keep the UI fast and responsive. -To finish the post list, place the post `id` field as first column, and remove the `body` field. From a UX point of view, fields containing large chunks of text should not appear in a Datagrid, only in detail views. Also, to make the Edit action stand out, let's replace the `rowClick` action by an explicit action button: +To finish the post list, place the post `id` field as first column, and remove the `body` field. From a UX point of view, fields containing large chunks of text should not appear in a Datagrid, only in detail views. Also, to make the Edit action stand out, let's replace the default `rowClick` action by an explicit action button: ```diff // in src/posts.tsx @@ -541,8 +541,8 @@ To finish the post list, place the post `id` field as first column, and remove t export const PostList = () => ( -- -+ +- ++ + - @@ -577,18 +577,6 @@ export const App = () => ( ); ``` -You will need to modify the user list view so that a click on a datagrid row links to the show view: - -```diff -// in src/users.tsx -export const UserList = () => { - // ... -- -+ - // ... -}; -``` - Now you can click on a user in the list to see its details: