Skip to content

Commit 579926b

Browse files
erwanMarmelaberwanMarmelab
committed
replace Datagrid by DataTable in doc - part 2
1 parent c83a5c3 commit 579926b

32 files changed

+465
-433
lines changed

‎docs/Pagination.md‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -66,19 +66,18 @@ To achieve this, you can use the `<InfiniteList>` component instead of the `<Lis
6666
import {
6767
- List,
6868
+ InfiniteList,
69-
Datagrid,
70-
TextField,
69+
DataTable,
7170
DateField
7271
} from 'react-admin';
7372

7473
const BookList = () => (
7574
- <List>
7675
+ <InfiniteList>
77-
<Datagrid>
78-
<TextField source="id" />
79-
<TextField source="title" />
80-
<DateField source="author" />
81-
</Datagrid>
76+
<DataTable>
77+
<DataTable.Col source="id" />
78+
<DataTable.Col source="title" />
79+
<DataTable.Col source="author" field={DateField} />
80+
</DataTable>
8281
- </List>
8382
+ </InfiniteList>
8483
);

‎docs/Permissions.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ const MyToolbar = () => (
192192
);
193193
```
194194

195-
The **list components** (`<Datagrid>`), **show components** (`<SimpleShowLayout>`, `<TabbedShowLayout>`), and **edit components** (`<SimpleForm>`, `<Tabbedform>`) also support access control provided you use the version from the `@react-admin/ra-rbac` Enterprise package. Check the [RBAC documentation](./AuthRBAC.md#components) for more information.
195+
The **list components** (`<DataTable>`, `<Datagrid>`), **show components** (`<SimpleShowLayout>`, `<TabbedShowLayout>`), and **edit components** (`<SimpleForm>`, `<Tabbedform>`) also support access control provided you use the version from the `@react-admin/ra-rbac` Enterprise package. Check the [RBAC documentation](./AuthRBAC.md#components) for more information.
196196

197197
### `useCanAccess`
198198

‎docs/Realtime.md‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,20 +59,18 @@ For instance, include a `<ListLiveUpdate>` within a `<List>` to have a list refr
5959
```diff
6060
import {
6161
List,
62-
Datagrid,
63-
TextField,
64-
NumberField,
62+
DataTable,
6563
Datefield,
6664
} from 'react-admin';
6765
+import { ListLiveUpdate } from '@react-admin/ra-realtime';
6866

6967
const PostList = () => (
7068
<List>
71-
<Datagrid>
72-
<TextField source="title" />
73-
<NumberField source="views" />
74-
<DateField source="published_at" />
75-
</Datagrid>
69+
<DataTable>
70+
<DataTable.Col source="title" />
71+
<DataTable.NumberCol source="views" />
72+
<DataTable.Col source="published_at" field={DateField} />
73+
</DataTable>
7674
+ <ListLiveUpdate />
7775
</List>
7876
);

‎docs/RealtimeDataProvider.md‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ This adapter subscribes to [Postgres Changes](https://supabase.com/docs/guides/r
4040
import { createClient } from '@supabase/supabase-js';
4141
import { supabaseDataProvider } from 'ra-supabase';
4242
import { addRealTimeMethodsBasedOnSupabase, ListLiveUpdate } from '@react-admin/ra-realtime';
43-
import { Admin, Resource, Datagrid, List, TextField, EmailField } from 'react-admin';
43+
import { Admin, Resource, DataTable, List, EmailField } from 'react-admin';
4444

4545
const supabaseClient = createClient(
4646
process.env.SUPABASE_URL,
@@ -66,12 +66,12 @@ export const App = () => (
6666

6767
const SaleList = () => (
6868
<List>
69-
<Datagrid>
70-
<TextField source="id" />
71-
<TextField source="first_name" />
72-
<TextField source="last_name" />
73-
<EmailField source="email" />
74-
</Datagrid>
69+
<DataTable>
70+
<DataTable.Col source="id" />
71+
<DataTable.Col source="first_name" />
72+
<DataTable.Col source="last_name" />
73+
<DataTable.Col source="email" field={EmailField} />
74+
</DataTable>
7575
<ListLiveUpdate />
7676
</List>
7777
);
@@ -116,7 +116,7 @@ Have a look at the Supabase [Replication Setup](https://supabase.com/docs/guides
116116
The `ra-realtime` package contains a function augmenting a regular (API-based) `dataProvider` with real-time methods based on the capabilities of [API-Platform](https://api-platform.com/). Use it as follows:
117117

118118
```jsx
119-
import { Datagrid, EditButton, List, ListProps } from 'react-admin';
119+
import { DataTable, EditButton, List, ListProps } from 'react-admin';
120120
import {
121121
HydraAdmin,
122122
ResourceGuesser,
@@ -153,10 +153,12 @@ const App = () => (
153153
// Example for connecting a list of greetings
154154
const GreetingsList = () => (
155155
<List>
156-
<Datagrid>
157-
<FieldGuesser source="name" />
158-
<EditButton />
159-
</Datagrid>
156+
<DataTable>
157+
<DataTable.Col source="name" field={FieldGuesser} />
158+
<DataTable.Col>
159+
<EditButton />
160+
</DataTable.Col>
161+
</DataTable>
160162
<ListLiveUpdate />
161163
</List>
162164
);

‎docs/ReferenceArrayField.md‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,20 @@ A typical `post` record therefore looks like this:
4646
In that case, use `<ReferenceArrayField>` to display the post tag names as Chips as follows:
4747

4848
```jsx
49-
import { List, Datagrid, ReferenceArrayField, TextField } from 'react-admin';
49+
import { List, DataTable, ReferenceArrayField } from 'react-admin';
5050

5151
export const PostList = () => (
5252
<List>
53-
<Datagrid>
54-
<TextField source="id" />
55-
<TextField source="title" />
56-
<ReferenceArrayField reference="tags" source="tag_ids" label="Tags" />
57-
<EditButton />
58-
</Datagrid>
53+
<DataTable>
54+
<DataTable.Col source="id" />
55+
<DataTable.Col source="title" />
56+
<DataTable.Col source="tag_ids" label="Tags">
57+
<ReferenceArrayField reference="tags" source="tag_ids" />
58+
</DataTable.Col>
59+
<DataTable.Col>
60+
<EditButton />
61+
</DataTable.Col>
62+
</DataTable>
5963
</List>
6064
);
6165
```
@@ -72,7 +76,7 @@ Configure the `<Resource recordRepresentation>` to render related records in a m
7276
<Resource name="tags" list={TagList} recordRepresentation="name" />
7377
```
7478

75-
You can change how the list of related records is rendered by passing a custom child reading the `ListContext` (e.g. a [`<Datagrid>`](./Datagrid.md)). See the [`children`](#children) section for details.
79+
You can change how the list of related records is rendered by passing a custom child reading the `ListContext` (e.g. a [`<DataTable>`](./DataTable.md)). See the [`children`](#children) section for details.
7680

7781
## Props
7882

@@ -117,28 +121,31 @@ Is equivalent to:
117121
`<ReferenceArrayField>` creates a [`ListContext`](./useListContext.md), so you can use any child that uses a `ListContext`:
118122

119123
- [`<SingleFieldList>`](./SingleFieldList.md)
124+
- [`<DataTable>`](./DataTable.md)
120125
- [`<Datagrid>`](./Datagrid.md)
121126
- [`<SimpleList>`](./SimpleList.md)
122127
- [`<EditableDatagrid>`](./EditableDatagrid.md)
123128
- [`<Calendar>`](./Calendar.md)
124129
- Or a component of your own (check the [`<WithListContext>`](./WithListContext.md) and the [`useListContext`](./useListContext.md) chapters to learn how).
125130

126-
For instance, use a `<Datagrid>` to render the related records in a table:
131+
For instance, use a `<DataTable>` to render the related records in a table:
127132

128133
```jsx
129-
import { Show, SimpleShowLayout, TextField, ReferenceArrayField, Datagrid, ShowButton } from 'react-admin';
134+
import { Show, SimpleShowLayout, TextField, ReferenceArrayField, DataTable, ShowButton } from 'react-admin';
130135

131136
export const PostShow = () => (
132137
<Show>
133138
<SimpleShowLayout>
134139
<TextField source="id" />
135140
<TextField source="title" />
136141
<ReferenceArrayField label="Tags" reference="tags" source="tag_ids">
137-
<Datagrid>
138-
<TextField source="id" />
139-
<TextField source="name" />
140-
<ShowButton />
141-
</Datagrid>
142+
<DataTable>
143+
<DataTable.Col source="id" />
144+
<DataTable.Col source="name" />
145+
<DataTable.Col>
146+
<ShowButton />
147+
</DataTable.Col>
148+
</DataTable>
142149
</ReferenceArrayField>
143150
<EditButton />
144151
</SimpleShowLayout>
@@ -190,7 +197,7 @@ For instance, to render only tags that are 'published', you can use the followin
190197

191198
## `label`
192199

193-
By default, `<SimpleShowLayout>`, `<Datagrid>` and other layout components infer the label of a field based on its `source`. For a `<ReferenceArrayField>`, this may not be what you expect:
200+
By default, `<SimpleShowLayout>`, `<DataTable>` and other layout components infer the label of a field based on its `source`. For a `<ReferenceArrayField>`, this may not be what you expect:
194201

195202
```jsx
196203
{/* default label is 'Tag Ids', or the translation of 'resources.posts.fields.tag_ids' if it exists */}

‎docs/ReferenceField.md‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ Alternately, if you pass a child component, `<ReferenceField>` will render it in
6565

6666
This component fetches a referenced record (`users` in this example) using the `dataProvider.getMany()` method, and passes it to its child.
6767

68-
It uses `dataProvider.getMany()` instead of `dataProvider.getOne()` [for performance reasons](#performance). When using several `<ReferenceField>` in the same page (e.g. in a `<Datagrid>`), this allows to call the `dataProvider` once instead of once per row.
68+
It uses `dataProvider.getMany()` instead of `dataProvider.getOne()` [for performance reasons](#performance). When using several `<ReferenceField>` in the same page (e.g. in a `<DataTable>`), this allows to call the `dataProvider` once instead of once per row.
6969

7070
## Props
7171

@@ -78,7 +78,7 @@ It uses `dataProvider.getMany()` instead of `dataProvider.getOne()` [for perform
7878
| `label` | Optional | `string | Function` | `resources. [resource]. fields.[source]` | Label to use for the field when rendered in layout components |
7979
| `link` | Optional | `string | Function` | `edit` | Target of the link wrapping the rendered child. Set to `false` to disable the link. |
8080
| `queryOptions` | Optional | [`UseQuery Options`](https://tanstack.com/query/v5/docs/react/reference/useQuery) | `{}` | `react-query` client options |
81-
| `sortBy` | Optional | `string | Function` | `source` | Name of the field to use for sorting when used in a Datagrid |
81+
| `sortBy` | Optional | `string | Function` | `source` | Name of the field to use for sorting when used in a DataTable |
8282

8383
`<ReferenceField>` also accepts the [common field props](./Fields.md#common-field-props).
8484

@@ -172,7 +172,7 @@ For instance, if the `posts` resource has a `user_id` field, set the `reference`
172172

173173
## `sortBy`
174174

175-
By default, when used in a `<Datagrid>`, and when the user clicks on the column header of a `<ReferenceField>`, react-admin sorts the list by the field `source`. To specify another field name to sort by, set the `sortBy` prop.
175+
By default, when used in a `<DataTable>`, and when the user clicks on the column header of a `<ReferenceField>`, react-admin sorts the list by the field `source`. To specify another field name to sort by, set the `sortBy` prop.
176176

177177
```jsx
178178
<ReferenceField source="user_id" reference="users" sortBy="user.name" />
@@ -192,23 +192,27 @@ To override the style of all instances of `<ReferenceField>` using the [applicat
192192

193193
<iframe src="https://www.youtube-nocookie.com/embed/egBhWqF3sWc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="aspect-ratio: 16 / 9;width:100%;margin-bottom:1em;"></iframe>
194194

195-
When used in a `<Datagrid>`, `<ReferenceField>` fetches the referenced record only once for the entire table.
195+
When used in a `<DataTable>`, `<ReferenceField>` fetches the referenced record only once for the entire table.
196196

197197
![ReferenceField](./img/reference-field.png)
198198

199199
For instance, with this code:
200200

201201
```jsx
202-
import { List, Datagrid, ReferenceField, TextField, EditButton } from 'react-admin';
202+
import { List, DataTable, ReferenceField, EditButton } from 'react-admin';
203203

204204
export const PostList = () => (
205205
<List>
206-
<Datagrid>
207-
<TextField source="id" />
208-
<ReferenceField label="User" source="user_id" reference="users" />
209-
<TextField source="title" />
210-
<EditButton />
211-
</Datagrid>
206+
<DataTable>
207+
<DataTable.Col source="id" />
208+
<DataTable.Col label="User" source="user_id">
209+
<ReferenceField source="user_id" reference="users" />
210+
</DataTable.Col>
211+
<DataTable.Col source="title" />
212+
<DataTable.Col>
213+
<EditButton />
214+
</DataTable.Col>
215+
</DataTable>
212216
</List>
213217
);
214218
```
@@ -247,11 +251,13 @@ For example, the following code prefetches the authors referenced by the posts:
247251
```jsx
248252
const PostList = () => (
249253
<List queryOptions={{ meta: { prefetch: ['author'] } }}>
250-
<Datagrid>
251-
<TextField source="title" />
252-
{/** renders without an additional request */}
253-
<ReferenceField source="author_id" reference="authors" />
254-
</Datagrid>
254+
<DataTable>
255+
<DataTable.Col source="title" />
256+
<DataTable.Col source="author_id">
257+
{/** renders without an additional request */}
258+
<ReferenceField source="author_id" reference="authors" />
259+
</DataTable.Col>
260+
</DataTable>
255261
</List>
256262
);
257263
```

‎docs/ReferenceManyCount.md‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ When you need to render the number of records related to another record via a on
1111

1212
## Usage
1313

14-
Use `<ReferenceManyCount>` as a regular Field in a `<Datagrid>` or `<SimpleShowLayout>` - or anywhere inside a [`RecordContext`](./useRecordContext.md). You must set the `reference` and `target` props to match the relationship:
14+
Use `<ReferenceManyCount>` as a regular Field in a `<DataTable>` or `<SimpleShowLayout>` - or anywhere inside a [`RecordContext`](./useRecordContext.md). You must set the `reference` and `target` props to match the relationship:
1515

1616
- `reference` is the name of the related resource to fetch (e.g. `comments`)
1717
- `target` is the name of the field in the related resource that points to the current resource (e.g. `post_id`)
@@ -20,40 +20,41 @@ For instance, to display the number of comments related to a post in a List view
2020

2121
```jsx
2222
import {
23+
List,
24+
DataTable,
2325
ChipField,
24-
Datagrid,
2526
DateField,
26-
List,
27-
NumberField,
2827
ReferenceArrayField,
2928
ReferenceManyCount,
3029
SingleFieldList,
31-
TextField,
3230
} from 'react-admin';
3331

3432
export const PostList = () => (
3533
<List>
36-
<Datagrid>
37-
<TextField source="id" />
38-
<TextField source="title" />
39-
<DateField source="published_at" sortByOrder="DESC" />
40-
<ReferenceManyCount
41-
label="Nb comments"
42-
reference="comments"
43-
target="post_id"
44-
link
45-
/>
46-
<NumberField source="views" sortByOrder="DESC" />
47-
<ReferenceArrayField
48-
label="Tags"
49-
reference="tags"
50-
source="tags"
51-
>
52-
<SingleFieldList>
53-
<ChipField source="name.en" size="small" />
54-
</SingleFieldList>
55-
</ReferenceArrayField>
56-
</Datagrid>
34+
<DataTable>
35+
<DataTable.Col source="id" />
36+
<DataTable.Col source="title" />
37+
<DataTable.Col source="published_at">
38+
<DateField source="published_at" sortByOrder="DESC" />
39+
</DataTable.Col>
40+
<DataTable.Col label="Nb comments">
41+
<ReferenceManyCount
42+
reference="comments"
43+
target="post_id"
44+
link
45+
/>
46+
</DataTable.Col>
47+
<DataTable.Col source="views">
48+
<NumberField source="views" sortByOrder="DESC" />
49+
</DataTable.Col>
50+
<DataTable.Col source="tags" label="Tags">
51+
<ReferenceArrayField reference="tags" source="tags">
52+
<SingleFieldList>
53+
<ChipField source="name.en" size="small" />
54+
</SingleFieldList>
55+
</ReferenceArrayField>
56+
</DataTable.Col>
57+
</DataTable>
5758
</List>
5859
)
5960
```

0 commit comments

Comments
 (0)