replace Datagrid by DataTable in doc - part 3

Author: erwanMarmelab

docs/WithListContext.md

@@ -16,26 +16,28 @@ The most common use case for `<WithListContext>` is to build a custom list view
 For instance, a list of book tags fetched via [`<ReferenceArrayField>`](./ReferenceArrayField.md): 
 
 ```jsx
-import { List, Datagrid, TextField, ReferenceArrayField, WithListContext } from 'react-admin';
+import { List, DataTable, ReferenceArrayField, WithListContext } from 'react-admin';
 import { Chip, Stack } from '@mui/material';
 
 const BookList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <ReferenceArrayField label="Tags" reference="tags" source="tag_ids">
-                <WithListContext render={({ isPending, data }) => (
-                    !isPending && (
-                        <Stack direction="row" spacing={1}>
-                            {data.map(tag => (
-                                <Chip key={tag.id} label={tag.name} />
-                            ))}
-                        </Stack>
-                    )
-                )} />
-            </ReferenceArrayField>
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="tag_ids" label="Tags">
+                <ReferenceArrayField reference="tags" source="tag_ids">
+                    <WithListContext render={({ isPending, data }) => (
+                        !isPending && (
+                            <Stack direction="row" spacing={1}>
+                                {data.map(tag => (
+                                    <Chip key={tag.id} label={tag.name} />
+                                ))}
+                            </Stack>
+                        )
+                    )} />
+                </ReferenceArrayField>
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 ```
@@ -45,17 +47,19 @@ const BookList = () => (
 The equivalent with `useListContext` would require an intermediate component:
 
 ```jsx
-import { List, Datagrid, TextField, ReferenceArrayField, WithListContext } from 'react-admin';
+import { List, DataTable, ReferenceArrayField, WithListContext } from 'react-admin';
 
 const BookList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <ReferenceArrayField label="Tags" reference="tags" source="tag_ids">
-                <TagList />
-            </ReferenceArrayField>
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col label="Tags" source="tag_ids">
+                <ReferenceArrayField reference="tags" source="tag_ids">
+                    <TagList />
+                </ReferenceArrayField>
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 

docs/WithRecord.md

@@ -32,23 +32,26 @@ As soon as there is a record available, react-admin puts it in a `RecordContext`
 - in descendants of the `<Show>` and `<ShowBase>` component
 - in descendants of the `<Edit>` and `<EditBase>` component
 - in descendants of the `<Create>` and `<CreateBase>` component
+- in descendants of the `<DataTable>` component
 - in descendants of the `<Datagrid>` component
 - in descendants of the `<SimpleList>` component
 - in descendants of the `<ReferenceField>` component
 
-## Using in a Datagrid
+## Using in a DataTable
 
-When using `<WithRecord>` in a [`<Datagrid>`](./Datagrid.md), you must specify the `label` prop to let react-admin know which field to display in the column header. 
+When using `<WithRecord>` in a [`<DataTable>`](./DataTable.md), you must specify the `label` prop to let react-admin know which field to display in the column header. 
 
 ```jsx
-import { Datagrid, TextField, WithRecord } from 'react-admin';
+import { DataTable, WithRecord } from 'react-admin';
 
 const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="title" />
-            <WithRecord label="author" render={record => <span>{record.author}</span>} />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+            <DataTable.Col label="author">
+                <WithRecord render={record => <span>{record.author}</span>} />
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 ```

docs/useListContext.md

@@ -15,7 +15,7 @@ The `ListContext` is available to descendants of:
 - `<ReferenceArrayField>`,
 - `<ReferenceManyField>`
 
-All descendant components can therefore access the list context, using the `useListContext` hook. As a matter of fact, react-admin's `<Datagrid>`, `<FilterForm>`, and `<Pagination>` components all use the `useListContext` hook.
+All descendant components can therefore access the list context, using the `useListContext` hook. As a matter of fact, react-admin's `<DataTable>`, `<FilterForm>`, and `<Pagination>` components all use the `useListContext` hook.
 
 ## Usage
 
@@ -40,16 +40,16 @@ export const Aside = () => {
 };
 
 // in src/posts/PostList.js
-import { List, Datagrid, TextField } from 'react-admin';
+import { List, DataTable } from 'react-admin';
 import Aside from './Aside';
 
 export const PostList = () => (
     <List aside={<Aside />}>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <TextField source="views" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="views" />
+        </DataTable>
     </List>
 );
 ```
@@ -163,7 +163,7 @@ The `useListContext` hook accepts a generic parameter for the record type:
 
 ```tsx
 import { Typography } from '@mui/material';
-import { List, Datagrid, TextField, useListContext } from 'react-admin';
+import { List, DataTable, useListContext } from 'react-admin';
 
 type Post = {
     id: number;
@@ -187,11 +187,11 @@ export const Aside = () => {
 
 export const PostList = () => (
     <List aside={<Aside />}>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <TextField source="views" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="views" />
+        </DataTable>
     </List>
 );
 ```
@@ -208,4 +208,4 @@ You can find many usage examples of `useListContext` in the documentation, inclu
 - [Building a Custom Pagination Control](./ListTutorial.md#building-a-custom-pagination)
 - [Building a Custom Iterator](./ListTutorial.md#building-a-custom-iterator)
 
-**Tip**: [`<ReferenceManyField>`](./ReferenceManyField.md), as well as other relationship-related components, also implement a `ListContext`. That means you can use a `<Datagrid>` of a `<Pagination>` inside these components!
+**Tip**: [`<ReferenceManyField>`](./ReferenceManyField.md), as well as other relationship-related components, also implement a `ListContext`. That means you can use a `<DataTable>` of a `<Pagination>` inside these components!

docs/useListController.md

@@ -11,7 +11,7 @@ title: "useListController"
 
 `useListController` reads the list parameters from the URL, calls `dataProvider.getList()`, prepares callbacks for modifying the pagination, filters, sort and selection, and returns them together with the data. Its return value matches the [`ListContext`](./useListContext.md) shape. 
 
-`useListController` is used internally by [`<List>`](./List.md) and [`<ListBase>`](./ListBase.md). If your list view uses react-admin components like [`<Datagrid>`](./Datagrid.md), prefer [`<ListBase>`](./ListBase.md) to `useListController` as it takes care of creating a `<ListContext>`.
+`useListController` is used internally by [`<List>`](./List.md) and [`<ListBase>`](./ListBase.md). If your list view uses react-admin components like [`<DataTable>`](./DataTable.md), prefer [`<ListBase>`](./ListBase.md) to `useListController` as it takes care of creating a `<ListContext>`.
 
 ## Usage
 

docs/useMediaQuery.md

@@ -27,13 +27,13 @@ const isSmall = useMediaQuery('(min-width:600px)');
 
 ## Responsive Layouts
 
-Here is an example for a responsive list of posts, displaying a `SimpleList` on mobile, and a `Datagrid` otherwise:
+Here is an example for a responsive list of posts, displaying a `SimpleList` on mobile, and a `DataTable` otherwise:
 
 ```jsx
 // in src/posts.js
 import * as React from 'react';
 import { useMediaQuery } from '@mui/material';
-import { List, SimpleList, Datagrid, TextField, ReferenceField, EditButton } from 'react-admin';
+import { List, SimpleList, DataTable, ReferenceField, EditButton } from 'react-admin';
 
 export const PostList = () => {
     const isSmall = useMediaQuery(
@@ -49,15 +49,17 @@ export const PostList = () => {
                     tertiaryText={record => new Date(record.published_at).toLocaleDateString()}
                 />
             ) : (
-                <Datagrid>
-                    <TextField source="id" />
-                    <ReferenceField label="User" source="userId" reference="users">
-                        <TextField source="name" />
-                    </ReferenceField>
-                    <TextField source="title" />
-                    <TextField source="body" />
-                    <EditButton />
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="id" />
+                    <DataTable.Col label="User" source="userId">
+                        <ReferenceField source="userId" reference="users">
+                            <TextField source="name" />
+                        </ReferenceField>
+                    </DataTable.Col>
+                    <DataTable.Col source="title" />
+                    <DataTable.Col source="body" />
+                    <DataTable.Col field={EditButton} />
+                </DataTable>
             )}
         </List>
     );

docs/useRecordContext.md

@@ -5,7 +5,7 @@ title: "useRecordContext"
 
 # `useRecordContext`
 
-`useRecordContext` grabs the current record. It's available anywhere react-admin manipulates a record, e.g. in a Show page, in a Datagrid row, or in a Reference Field.
+`useRecordContext` grabs the current record. It's available anywhere react-admin manipulates a record, e.g. in a Show page, in a DataTable row, or in a Reference Field.
 
 <iframe src="https://www.youtube-nocookie.com/embed/YLwx-EZfGFk" 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>
 
@@ -58,7 +58,7 @@ As soon as there is a record available, react-admin puts it in a `RecordContext`
 - in descendants of the `<Show>` and `<ShowBase>` component
 - in descendants of the `<Edit>` and `<EditBase>` component
 - in descendants of the `<Create>` and `<CreateBase>` component
-- in descendants of the `<Datagrid>` component
+- in descendants of the `<DataTable>` component
 - in descendants of the `<SimpleList>` component
 - in descendants of the `<ReferenceField>` component
 

docs/useStore.md

@@ -33,16 +33,16 @@ When one component calls `setValue` on a key, all the components that read the s
 ## Example
 
 ```jsx
-import { List, Datagrid } from 'react-admin';
+import { List, DataTable } from 'react-admin';
 
 const PostList = () => {
     const [density] = useStore('posts.list.density', 'small');
 
     return (
         <List>
-            <Datagrid size={density}>
+            <DataTable size={density}>
                 ...
-            </Datagrid>
+            </DataTable>
         </List>
     );
 }

docs/useSubscribeToRecordList.md

@@ -56,12 +56,12 @@ const ListWatcher = () => {
 
 const MovieList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <TextField source="director" />
-            <TextField source="year" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="director" />
+            <DataTable.Col source="year" />
+        </DataTable>
         <ListWatcher />
     </List>
 );

docs/useUnselect.md

@@ -5,7 +5,7 @@ title: "useUnselect"
 
 # `useUnselect`
 
-This hook returns a function that unselects lines in the current `<Datagrid>` that match an array of ids. Pass the name of the resource to the hook as argument.
+This hook returns a function that unselects lines in the current `<DataTable>` that match an array of ids. Pass the name of the resource to the hook as argument.
 
 ```jsx
 import { useListContext, useUnselect } from 'react-admin';

docs/useUnselectAll.md

@@ -5,7 +5,7 @@ title: "useUnselectAll"
 
 # `useUnselectAll`
 
-This hook returns a function that unselects all lines in the current `<Datagrid>`. Pass the name of the resource as argument.
+This hook returns a function that unselects all lines in the current `<DataTable>`. Pass the name of the resource as argument.
 
 ```jsx
 import { useUnselectAll } from 'react-admin';