You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
It's possible that a `<DataTable>` will have no records to display because of connectivity issues. In that case, `<DataTable>` will display a message indicating data couldn't be fetched.
761
+
762
+
You can customize this message via react-admin's [translation system](./Translation.md), by setting a custom translation for the `ra.notification.offline` key.
763
+
764
+
```tsx
765
+
const messages = {
766
+
ra: {
767
+
notification: {
768
+
offline: "No network. Data couldn't be fetched.",
769
+
}
770
+
}
771
+
}
772
+
```
773
+
774
+
If you need to go beyond text, pass a custom element as the `<DataTable offline>` prop:
775
+
776
+
```tsx
777
+
const Offline = () => (
778
+
<p>No network. Data couldn't be fetched.</p>
779
+
);
780
+
781
+
const BookList = () => (
782
+
<List>
783
+
<DataTableoffline={<Offline />}>
784
+
...
785
+
</DataTable>
786
+
</List>
787
+
);
788
+
```
789
+
757
790
## `rowClick`
758
791
759
792
By default, `<DataTable>` uses 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, a row click redirects to the Show view. If the resource has an `edit` page, a row click redirects to the Edit view. Otherwise, the row is not clickable.
It's possible that a Datagrid will have no records to display because of connectivity issues. In that case, the Datagrid will display a message indicating data couldn't be fetched. This message is translatable and its key is `ra.notification.offline`.
647
+
648
+
You can customize the content to display by passing a component to the `offline` prop:
649
+
650
+
```tsx
651
+
const CustomOffline = () => <div>No network. Data couldn't be fetched.</div>;
652
+
653
+
const PostList = () => (
654
+
<List>
655
+
<Datagridoffline={<CustomOffline />}>
656
+
<TextFieldsource="id" />
657
+
<TextFieldsource="title" />
658
+
<TextFieldsource="views" />
659
+
</Datagrid>
660
+
</List>
661
+
);
662
+
```
663
+
643
664
## `optimized`
644
665
645
666
When displaying large pages of data, you might experience some performance issues.
|`actions`||`ReactNode`|| override the actions toolbar with a custom component |
66
+
|`aside`||`ReactNode`|| component to render aside to the main content |
67
+
|`children`||`ReactNode`|| The components that renders the form |
68
+
|`className`||`string`|| passed to the root component |
69
+
|`component`||`Component`|| override the root component |
70
+
|`disableAuthentication`||`boolean`|| disable the authentication check |
71
+
|`emptyWhileLoading`||`boolean`|| Set to `true` to return `null` while the edit is loading. |
72
+
|`id`|| `string | number` || the id of the record to edit |
73
+
|`mutationMode`|| `pessimistic | optimistic | undoable` || switch to optimistic or pessimistic mutations (undoable by default) |
74
+
|`mutationOptions`||`object`|| options for the `dataProvider.update()` call |
75
+
|`offline`||`ReactNode`|| The content rendered to render when data could not be fetched because of connectivity issues |
76
+
|`queryOptions`||`object`|| options for the `dataProvider.getOne()` call |
77
+
|`redirect`|| `string | Function | false` || change the redirect location after successful creation |
78
+
|`resource`||`string`|| override the name of the resource to create |
79
+
|`sx`||`object`|| Override the styles |
80
+
|`title`||`ReactNode`|| override the page title |
81
+
|`transform`||`Function`|| transform the form data before calling `dataProvider.update()`|
79
82
80
83
## `actions`
81
84
@@ -488,6 +491,36 @@ The default `onError` function is:
488
491
489
492
**Tip**: If you want to have different failure side effects based on the button clicked by the user, you can set the `mutationOptions` prop on the `<SaveButton>` component, too.
490
493
494
+
## `offline`
495
+
496
+
It's possible that a `<Edit>` will have no record to display because of connectivity issues. In that case, `<Edit>` will display a message indicating data couldn't be fetched.
497
+
498
+
You can customize this message via react-admin's [translation system](./Translation.md), by setting a custom translation for the `ra.notification.offline` key.
499
+
500
+
```tsx
501
+
const messages = {
502
+
ra: {
503
+
notification: {
504
+
offline: "No network. Data couldn't be fetched.",
505
+
}
506
+
}
507
+
}
508
+
```
509
+
510
+
If you need to go beyond text, pass a custom element as the `<Edit offline>` prop:
511
+
512
+
```tsx
513
+
const Offline = () => (
514
+
<p>No network. Data couldn't be fetched.</p>
515
+
);
516
+
517
+
const BookEdit = () => (
518
+
<Editoffline={<Offline />}>
519
+
...
520
+
</Edit>
521
+
);
522
+
```
523
+
491
524
## `queryOptions`
492
525
493
526
`<Edit>` calls `dataProvider.getOne()` on mount via react-query's `useQuery` hook. You can customize the options you pass to this hook by setting the `queryOptions` prop.
@@ -498,7 +531,7 @@ This can be useful e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) t
Copy file name to clipboardExpand all lines: docs/ReferenceArrayInput.md
+26Lines changed: 26 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -104,6 +104,7 @@ See the [`children`](#children) section for more details.
104
104
|`enableGet Choices`| Optional |`({q: string}) => boolean`|`() => true`| Function taking the `filterValues` and returning a boolean to enable the `getList` call. |
105
105
|`filter`| Optional |`Object`|`{}`| Permanent filters to use for getting the suggestion list |
106
106
|`label`| Optional |`string`| - | Useful only when `ReferenceArrayInput` is in a Filter array, the label is used as the Filter label. |
107
+
|`offline `| Optional |`ReactNode`| - | The content rendered to render when data could not be fetched because of connectivity issues |
107
108
|`page`| Optional |`number`| 1 | The current page number |
108
109
|`perPage`| Optional |`number`| 25 | Number of suggestions to show |
`<ReferenceArrayInput>` can display a custom message when data cannot be fetched because of connectivity issues.
223
+
You can customize this message via react-admin's [translation system](./Translation.md), by setting a custom translation for the `ra.notification.offline` key.
224
+
225
+
```tsx
226
+
const messages = {
227
+
ra: {
228
+
notification: {
229
+
offline: "No network. Data couldn't be fetched.",
230
+
}
231
+
}
232
+
}
233
+
```
234
+
235
+
If you need to go beyond text, pass a custom element as the `<ReferenceArrayInput offline>` prop:
|`sortBy`| Optional | `string | Function` |`source`| Name of the field to use for sorting when used in a Datagrid |
82
83
@@ -142,6 +143,31 @@ You can also use a custom `link` function to get a custom path for the children.
142
143
/>
143
144
```
144
145
146
+
## `offline`
147
+
148
+
`<ReferenceField>` can display a custom message when data cannot be fetched because of connectivity issues.
149
+
You can customize this message via react-admin's [translation system](./Translation.md), by setting a custom translation for the `ra.notification.offline` key.
150
+
151
+
```tsx
152
+
const messages = {
153
+
ra: {
154
+
notification: {
155
+
offline: "No network. Data couldn't be fetched.",
156
+
}
157
+
}
158
+
}
159
+
```
160
+
161
+
If you need to go beyond text, pass a custom element as the `<ReferenceField offline>` prop:
Use the `queryOptions` prop to pass options to [the `dataProvider.getMany()` query](./useGetOne.md#aggregating-getone-calls) that fetches the referenced record.
Copy file name to clipboardExpand all lines: docs/ReferenceInput.md
+26Lines changed: 26 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -107,6 +107,7 @@ See the [`children`](#children) section for more details.
107
107
|`enableGet Choices`| Optional |`({q: string}) => boolean`|`() => true`| Function taking the `filterValues` and returning a boolean to enable the `getList` call. |
108
108
|`filter`| Optional |`Object`|`{}`| Permanent filters to use for getting the suggestion list |
109
109
|`label`| Optional |`string`| - | Useful only when `ReferenceInput` is in a Filter array, the label is used as the Filter label. |
110
+
|`offline `| Optional |`ReactNode`| - | The content rendered to render when data could not be fetched because of connectivity issues |
110
111
|`page`| Optional |`number`| 1 | The current page number |
111
112
|`perPage`| Optional |`number`| 25 | Number of suggestions to show |
`<ReferenceInput>` can display a custom message when data cannot be fetched because of connectivity issues.
197
+
You can customize this message via react-admin's [translation system](./Translation.md), by setting a custom translation for the `ra.notification.offline` key.
198
+
199
+
```tsx
200
+
const messages = {
201
+
ra: {
202
+
notification: {
203
+
offline: "No network. Data couldn't be fetched.",
204
+
}
205
+
}
206
+
}
207
+
```
208
+
209
+
If you need to go beyond text, pass a custom element as the `<ReferenceInput offline>` prop:
0 commit comments