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.
760
+
It's possible that a `<DataTable>` will have no records to display because of connectivity issues. In that case, `<DataTable>` will display the following message:
761
+
762
+
> No connectivity. Could not fetch data.
761
763
762
764
You can customize this message via react-admin's [translation system](./Translation.md), by setting a custom translation for the `ra.notification.offline` key.
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`.
646
+
It's possible that a `<Datagrid>` will have no records to display because of connectivity issues. In that case, `<Datagrid>` will display the following message:
647
647
648
-
You can customize the content to display by passing a component to the `offline` prop:
648
+
> No connectivity. Could not fetch data.
649
+
650
+
You can customize this message via react-admin's [translation system](./Translation.md), by setting a custom translation for the `ra.notification.offline` key.
651
+
652
+
```tsx
653
+
const messages = {
654
+
ra: {
655
+
notification: {
656
+
offline: "No network. Data couldn't be fetched.",
657
+
}
658
+
}
659
+
}
660
+
```
661
+
662
+
If you need to go beyond text, pass a custom element as the `<Datagrid offline>` prop:
649
663
650
664
```tsx
651
665
const CustomOffline = () => <div>No network. Data couldn't be fetched.</div>;
Copy file name to clipboardExpand all lines: docs/Edit.md
+4-2Lines changed: 4 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -72,7 +72,7 @@ You can customize the `<Edit>` component using the following props:
72
72
|`id`|| `string | number` || the id of the record to edit |
73
73
|`mutationMode`|| `pessimistic | optimistic | undoable` || switch to optimistic or pessimistic mutations (undoable by default) |
74
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 |
75
+
|`offline`||`ReactNode`|`<Offline>`| The content rendered to render when data could not be fetched because of connectivity issues |
76
76
|`queryOptions`||`object`|| options for the `dataProvider.getOne()` call |
77
77
|`redirect`|| `string | Function | false` || change the redirect location after successful creation |
78
78
|`resource`||`string`|| override the name of the resource to create |
@@ -493,7 +493,9 @@ The default `onError` function is:
493
493
494
494
## `offline`
495
495
496
-
It's possible that an `<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.
496
+
It's possible that a `<Edit>` will have no records to display because of connectivity issues. In that case, `<Edit>` will display the following message:
497
+
498
+
> No connectivity. Could not fetch data.
497
499
498
500
You can customize this message via react-admin's [translation system](./Translation.md), by setting a custom translation for the `ra.notification.offline` key.
It's possible that a `<Show>` will have no record to display because of connectivity issues. In that case, `<Show>` will display a message indicating data couldn't be fetched.
282
+
It's possible that a `<Show>` will have no records to display because of connectivity issues. In that case, `<Show>` will display the following message:
283
+
284
+
> No connectivity. Could not fetch data.
283
285
284
286
You can customize this message via react-admin's [translation system](./Translation.md), by setting a custom translation for the `ra.notification.offline` key.
Copy file name to clipboardExpand all lines: docs/SimpleList.md
+33Lines changed: 33 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -47,6 +47,7 @@ export const PostList = () => (
47
47
|`rowClick`| Optional |mixed |`"edit"`| The action to trigger when the user clicks on a row. |
48
48
|`leftAvatar`| Optional | function || A function returning an `<Avatar>` component to display before the primary text. |
49
49
|`leftIcon`| Optional | function || A function returning an `<Icon>` component to display before the primary text. |
50
+
|`offline`| Optional | Element |`<Offline>`| The content rendered to render when data could not be fetched because of connectivity issues. |
50
51
|`rightAvatar`| Optional | function || A function returning an `<Avatar>` component to display after the primary text. |
51
52
|`rightIcon`| Optional | function || A function returning an `<Icon>` component to display after the primary text. |
52
53
|`rowStyle`| Optional | function || A function returning a style object to apply to each row. |
@@ -80,6 +81,38 @@ This prop should be a function returning an `<Avatar>` component. When present,
80
81
81
82
This prop should be a function returning an `<Icon>` component. When present, the `<ListItem>` renders a `<ListIcon>` before the `<ListItemText>`
82
83
84
+
## `offline`
85
+
86
+
It's possible that a `<SimpleList>` will have no records to display because of connectivity issues. In that case, `<SimpleList>` will display the following message:
87
+
88
+
> No connectivity. Could not fetch data.
89
+
90
+
You can customize this message via react-admin's [translation system](./Translation.md), by setting a custom translation for the `ra.notification.offline` key.
91
+
92
+
```tsx
93
+
const messages = {
94
+
ra: {
95
+
notification: {
96
+
offline: "No network. Data couldn't be fetched.",
97
+
}
98
+
}
99
+
}
100
+
```
101
+
102
+
If you need to go beyond text, pass a custom element as the `<SimpleList offline>` prop:
103
+
104
+
```tsx
105
+
const Offline = () => (
106
+
<p>No network. Data couldn't be fetched.</p>
107
+
);
108
+
109
+
const BookList = () => (
110
+
<List>
111
+
<SimpleListoffline={<Offline />} />
112
+
</List>
113
+
);
114
+
```
115
+
83
116
## `primaryText`
84
117
85
118
The `primaryText`, `secondaryText` and `tertiaryText` props can accept 4 types of values:
|`children`| Optional |`ReactNode`|| React element to render for each record |
89
+
|`empty`| Optional |`ReactNode`|| React element to display when the list is empty |
90
+
|`linkType`| Optional | `'edit' | 'show' | false` |`edit`| The target of the link on each item |
91
+
|`offline`| Optional | Element |`<Offline variant="inline" />`| The content rendered to render when data could not be fetched because of connectivity issues. |
92
+
|`sx`| Optional |`object`|| The sx props of the Material UI Box component |
92
93
93
94
Additional props are passed down to the underlying [Material UI `<Stack>` component](https://mui.com/material-ui/react-stack/).
94
95
@@ -133,6 +134,51 @@ The `<SingleFieldList>` items link to the edition page by default. You can set t
133
134
*`linkType="show"`: links to the show page.
134
135
*`linkType={false}`: does not create any link.
135
136
137
+
## `offline`
138
+
139
+
It's possible that a `<SingleFieldList>` will have no records to display because of connectivity issues. In that case, `<SingleFieldList>` will display the following message:
140
+
141
+
> No connectivity. Could not fetch data.
142
+
143
+
You can customize this message via react-admin's [translation system](./Translation.md), by setting a custom translation for the `ra.notification.offline` key.
144
+
145
+
```tsx
146
+
const messages = {
147
+
ra: {
148
+
notification: {
149
+
offline: "No network. Data couldn't be fetched.",
150
+
}
151
+
}
152
+
}
153
+
```
154
+
155
+
If you need to go beyond text, pass a custom element as the `<SingleFieldList offline>` prop:
The `<SingleFieldList>` component accepts the usual `className` prop. You can also override the styles of the inner components thanks to the `sx` property. This property accepts the following subclasses:
0 commit comments