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: