[Doc] Change our Datagrid examples to DataTable

README.md

@@ -65,20 +65,22 @@ The `<Resource>` component defines CRUD pages (`list`, `edit`, and `create`) for
 ```jsx
 // in posts.js
 import * as React from "react";
-import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, DateInput, useRecordContext } from 'react-admin';
+import { List, DataTable, Edit, Create, SimpleForm, DateField, EditButton, TextInput, DateInput, useRecordContext } from 'react-admin';
 import BookIcon from '@mui/icons-material/Book';
 export const PostIcon = BookIcon;
 
 export const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="published_at" />
-            <TextField source="average_note" />
-            <TextField source="views" />
-            <EditButton />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="published_at" field={DateField} />
+            <DataTable.Col source="average_note" />
+            <DataTable.Col source="views" />
+            <DataTable.Col>
+                <EditButton />
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 

docs/Actions.md

@@ -156,17 +156,17 @@ See the [Success and Error Side Effects](#success-and-error-side-effects) below
 
 {% raw %}
 ```jsx
-import { List, Datagrid, TextField } from 'react-admin';
+import { List, DataTable } from 'react-admin';
 
 const PostList = () => (
     <List
         queryOptions={{ onSettled: (data, error) => console.log(data, error) }}
     >
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <TextField source="body" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="body" />
+        </DataTable>
     </List>
 );
 ```
@@ -319,8 +319,8 @@ To execute some logic after a query or a mutation is complete, use the `onSucces
 - [`useNotify`](./useNotify.md): Return a function to display a notification.
 - [`useRedirect`](./useRedirect.md): Return a function to redirect the user to another page.
 - [`useRefresh`](./useRefresh.md): Return a function to force a rerender of the current view (equivalent to pressing the Refresh button).
-- [`useUnselect`](./useUnselect.md): Return a function to unselect lines in the current `Datagrid` based on the ids passed to it.
-- [`useUnselectAll`](./useUnselectAll.md): Return a function to unselect all lines in the current `Datagrid`.
+- [`useUnselect`](./useUnselect.md): Return a function to unselect lines in the current `<DataTable>` based on the ids passed to it.
+- [`useUnselectAll`](./useUnselectAll.md): Return a function to unselect all lines in the current `<DataTable>`.
 
 ### `onSuccess`
 

docs/AppTheme.md

@@ -273,19 +273,19 @@ const ThemeToggler = () => {
 
 In a custom theme, you can override the style of a component for the entire application using the `components` key.
 
-For instance, to create a custom theme that overrides the style of the `<Datagrid>` component:
+For instance, to create a custom theme that overrides the style of the `<DataTable>` component:
 
 ```jsx
 import { defaultTheme } from 'react-admin';
 import { deepmerge } from '@mui/utils';
 
 const theme = deepmerge(defaultTheme, {
     components: {
-        RaDatagrid: {
+        RaDataTable: {
             styleOverrides: {
               root: {
                   backgroundColor: "Lavender",
-                  "& .RaDatagrid-headerCell": {
+                  "& .RaDataTable-headerCell": {
                       backgroundColor: "MistyRose",
                   },
               }
@@ -306,7 +306,7 @@ There are 2 important gotchas here:
 - Don't forget to merge your custom style overrides with the ones from react-admin's `defaultTheme`, otherwise the application will have the default Material UI theme (most notably, outlined text inputs)
 - Custom style overrides must live under a `root` key. Then, the style override syntax is the same as the one used for the [`sx`](./SX.md) prop.
 
-To guess the name of the subclass to use (like `.RaDatagrid-headerCell` above) for customizing a component, you can use the developer tools of your browser, or check the react-admin documentation for individual components (e.g. the [Datagrid CSS documentation](./Datagrid.md#sx-css-api)).
+To guess the name of the subclass to use (like `.RaDataTable-headerCell` above) for customizing a component, you can use the developer tools of your browser, or check the react-admin documentation for individual components (e.g. the [`<DataTable>` CSS documentation](./DataTable.md#sx-css-api)).
 
 **Tip**: As an alternative, you can also re-export styled components, and use them instead of the react-admin components. Check the [Reusable Components](./SX.md#reusable-components) documentation for an example.
 
@@ -499,11 +499,11 @@ import { defaultTheme } from 'react-admin';
 
 const theme = deepmerge(defaultTheme, {
     components: {
-        RaDatagrid: {
+        RaDataTable: {
             styleOverrides: {
               root: {
                   backgroundColor: "Lavender",
-                  "& .RaDatagrid-headerCell": {
+                  "& .RaDataTable-headerCell": {
                       backgroundColor: "MistyRose",
                   },
               }

docs/ArrayField.md

@@ -9,7 +9,7 @@ title: "The ArrayField Component"
 
 ![ArrayField](./img/array-field.webp)
 
-`<ArrayField>` creates a [`ListContext`](./useListContext.md) with the field value, and renders its children components - usually iterator components like [`<Datagrid>`](./Datagrid.md) or [`<SingleFieldList>`](./SingleFieldList.md).
+`<ArrayField>` creates a [`ListContext`](./useListContext.md) with the field value, and renders its children components - usually iterator components like [`<DataTable>`](./DataTable.md) or [`<SingleFieldList>`](./SingleFieldList.md).
 
 ## Usage
 
@@ -35,13 +35,13 @@ title: "The ArrayField Component"
 }
 ```
 
-Leverage `<ArrayField>` e.g. in a Show view, to display the `tags` as a `<SingleFieldList>` and the `backlinks` as a `<Datagrid>`:
+Leverage `<ArrayField>` e.g. in a Show view, to display the `tags` as a `<SingleFieldList>` and the `backlinks` as a `<DataTable>`:
 
 ```jsx
 import { 
     ArrayField,
     ChipField,
-    Datagrid,
+    DataTable,
     Show,
     SimpleShowLayout,
     SingleFieldList,
@@ -58,11 +58,11 @@ const PostShow = () => (
                 </SingleFieldList>
             </ArrayField>
             <ArrayField source="backlinks">
-                <Datagrid bulkActionButtons={false}>
-                    <TextField source="uuid" />
-                    <TextField source="date" />
-                    <TextField source="url" />
-                </Datagrid>
+                <DataTable bulkActionButtons={false}>
+                    <DataTable.Col source="uuid" />
+                    <DataTable.Col source="date" />
+                    <DataTable.Col source="url" />
+                </DataTable>
             </ArrayField>
         </SimpleShowLayout>
     </Show>
@@ -84,7 +84,7 @@ const PostShow = () => (
 
 ## `children`
 
-`<ArrayField>` renders its `children` component wrapped in a [`<ListContextProvider>`](./useListContext.md). Commonly used child components are [`<Datagrid>`](./Datagrid.md), [`<SingleFieldList>`](./SingleFieldList.md), and [`<SimpleList>`](./SimpleList.md).
+`<ArrayField>` renders its `children` component wrapped in a [`<ListContextProvider>`](./useListContext.md). Commonly used child components are [`<DataTable>`](./DataTable.md), [`<SingleFieldList>`](./SingleFieldList.md), and [`<SimpleList>`](./SimpleList.md).
 
 ```jsx
 {/* using SingleFieldList as child */}
@@ -94,13 +94,13 @@ const PostShow = () => (
     </SingleFieldList>
 </ArrayField>
 
-{/* using Datagrid as child */}
+{/* using DataTable as child */}
 <ArrayField source="backlinks">
-    <Datagrid>
-        <TextField source="uuid" />
-        <TextField source="date" />
-        <TextField source="url" />
-    </Datagrid>
+    <DataTable>
+        <DataTable.Col source="uuid" />
+        <DataTable.Col source="date" />
+        <DataTable.Col source="url" />
+    </DataTable>
 </ArrayField>
 
 {/* using SimpleList as child */}
@@ -159,11 +159,11 @@ You can use the `filter` prop to display only a subset of the items in the array
 {% raw %}
 ```jsx
 <ArrayField source="backlinks" filter={{ date: '2012-08-10T00:00:00.000Z' }}>
-    <Datagrid>
-        <TextField source="uuid" />
-        <TextField source="date" />
-        <TextField source="url" />
-    </Datagrid>
+    <DataTable>
+        <DataTable.Col source="uuid" />
+        <DataTable.Col source="date" />
+        <DataTable.Col source="url" />
+    </DataTable>
 </ArrayField>
 ```
 {% endraw %}
@@ -179,7 +179,7 @@ As `<ArrayField>` creates a [`ListContext`](./useListContext.md), you can use th
 ```jsx
 import { 
     ArrayField,
-    Datagrid,
+    DataTable,
     Pagination,
     Show,
     SimpleShowLayout,
@@ -191,11 +191,11 @@ const PostShow = () => (
         <SimpleShowLayout>
             <TextField source="title" />
             <ArrayField source="backlinks" perPage={5}>
-                <Datagrid>
-                    <TextField source="uuid" />
-                    <TextField source="date" />
-                    <TextField source="url" />
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="uuid" />
+                    <DataTable.Col source="date" />
+                    <DataTable.Col source="url" />
+                </DataTable>
                 <Pagination />
             </ArrayField>
         </SimpleShowLayout>

docs/AuthRBAC.md

@@ -100,17 +100,17 @@ An _action_ is a string, usually a verb, that represents an operation. Examples
 
 React-admin already does page-level access control with actions like "list", "show", "edit", "create", and "delete". RBAC checks additional actions in its components:
 
-| Action   | Description                      | Used In                                                                                                                                                                                                                                                                   |
-| -------- | -------------------------------- |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `list`   | Allow to access the List page    | [`<List>`](./List.md#access-control), [`<ListButton>`](./Buttons.md#listbutton), [`<Menu.ResourceItem>`](./Menu.md#access-control)                                                                                                                                        |
-| `show`   | Allow to access the Show page    | [`<Show>`](./Show.md), [`<ShowButton>`](./Buttons.md#showbutton), [`<Datagrid>`](./Datagrid.md#access-control), [`<Edit>`](./Edit.md)                                                                                                                                     |
-| `create` | Allow to access the Create page  | [`<Create>`](./Create.md), [`<CreateButton>`](./Buttons.md#createbutton), [`<List>`](./List.md#access-control)                                                                                                                                                            |
-| `edit`   | Allow to access the Edit page    | [`<Edit>`](./Edit.md), [`<EditButton>`](./Buttons.md#editbutton), [`<Datagrid>`](./Datagrid.md#access-control), [`<Show>`](./Show.md)                                                                                                                                     |
-| `delete` | Allow to delete data             | [`<DeleteButton>`](./Buttons.md#deletebutton), [`<BulkDeleteButton>`](./Buttons.md#bulkdeletebutton), [`<Datagrid>`](./Datagrid.md#access-control), [`<SimpleForm>`](./SimpleForm.md#access-control), [`<TabbedForm>`](./TabbedForm.md#access-control)                    |
-| `export` | Allow to export data             | [`<ExportButton>`](./Buttons.md#exportbutton), [`<List>`](./List.md#access-control)                                                                                                                                                                                       |
-| `clone`  | Allow to clone a record          | [`<CloneButton>`](./Buttons.md#clonebutton), [`<Edit>`](./Edit.md)                                                                                                                                                                                                        |
-| `read`   | Allow to view a field (or a tab) | [`<Datagrid>`](./Datagrid.md#access-control), [`<SimpleShowLayout>`](./SimpleShowLayout.md#access-control), [`<TabbedShowLayout>`](./TabbedShowLayout.md#access-control)                                                                                                  |
-| `write`  | Allow to edit a field (or a tab) | [`<SimpleForm>`](./SimpleForm.md#access-control), [`<TabbedForm>`](./TabbedForm.md#access-control), [`<WizardForm>`](./WizardForm.md#enableaccesscontrol), [`<LongForm>`](./LongForm.md#enableaccesscontrol), [`<AccordionForm>`](./AccordionForm.md#enableaccesscontrol) |
+| Action   | Description                      | Used In                                                                                                                                                                                                                                                                                                |
+| -------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `list`   | Allow to access the List page    | [`<List>`](./List.md#access-control), [`<ListButton>`](./Buttons.md#listbutton), [`<Menu.ResourceItem>`](./Menu.md#access-control)                                                                                                                                                                     |
+| `show`   | Allow to access the Show page    | [`<Show>`](./Show.md), [`<ShowButton>`](./Buttons.md#showbutton), [`<DataTable>`](./DataTable.md#access-control), [`<Datagrid>`](./Datagrid.md#access-control), [`<Edit>`](./Edit.md)                                                                                                                  |
+| `create` | Allow to access the Create page  | [`<Create>`](./Create.md), [`<CreateButton>`](./Buttons.md#createbutton), [`<List>`](./List.md#access-control)                                                                                                                                                                                         |
+| `edit`   | Allow to access the Edit page    | [`<Edit>`](./Edit.md), [`<EditButton>`](./Buttons.md#editbutton), [`<DataTable>`](./DataTable.md#access-control), [`<Datagrid>`](./Datagrid.md#access-control), [`<Show>`](./Show.md)                                                                                                                  |
+| `delete` | Allow to delete data             | [`<DeleteButton>`](./Buttons.md#deletebutton), [`<BulkDeleteButton>`](./Buttons.md#bulkdeletebutton), [`<DataTable>`](./DataTable.md#access-control), [`<Datagrid>`](./Datagrid.md#access-control), [`<SimpleForm>`](./SimpleForm.md#access-control), [`<TabbedForm>`](./TabbedForm.md#access-control) |
+| `export` | Allow to export data             | [`<ExportButton>`](./Buttons.md#exportbutton), [`<List>`](./List.md#access-control)                                                                                                                                                                                                                    |
+| `clone`  | Allow to clone a record          | [`<CloneButton>`](./Buttons.md#clonebutton), [`<Edit>`](./Edit.md)                                                                                                                                                                                                                                     |
+| `read`   | Allow to view a field (or a tab) | [`<Datagrid>`](./Datagrid.md#access-control), [`<SimpleShowLayout>`](./SimpleShowLayout.md#access-control), [`<TabbedShowLayout>`](./TabbedShowLayout.md#access-control)                                                                                                                               |
+| `write`  | Allow to edit a field (or a tab) | [`<SimpleForm>`](./SimpleForm.md#access-control), [`<TabbedForm>`](./TabbedForm.md#access-control), [`<WizardForm>`](./WizardForm.md#enableaccesscontrol), [`<LongForm>`](./LongForm.md#enableaccesscontrol), [`<AccordionForm>`](./AccordionForm.md#enableaccesscontrol)                              |
 
 **Tip:** Be sure not to confuse "show" and "read", or "edit" and "write", as they are not the same. The first operate at the page level, the second at the field level. A good mnemonic is to realize "show" and "edit" are named the same as the react-admin page they allow to control: the Show and Edit pages.
 

docs/Breadcrumb.md

@@ -742,7 +742,7 @@ Let's see how the components for the songs list and detail pages define their ap
 {% raw %}
 ```jsx
 // in src/songs/SongList.js
-import { useGetOne, List, SearchInput, Datagrid, TextField, DateField } from 'react-admin';
+import { useGetOne, List, SearchInput, DataTable, DateField } from 'react-admin';
 import { useDefineAppLocation } from '@react-admin/ra-navigation';
 import { useParams } from 'react-router-dom';
 
@@ -756,14 +756,16 @@ export const SongList = () => {
             filter={{ artist_id: id }}
             filters={[<SearchInput key="q" source="q" alwaysOn />]}
         >
-            <Datagrid>
-                <TextField source="title" />
-                <DateField source="released" />
-                <TextField source="writer" />
-                <TextField source="producer" />
-                <TextField source="recordCompany" label="Label" />
-                <EditSongButton />
-            </Datagrid>
+            <DataTable>
+                <DataTable.Col source="title" />
+                <DataTable.Col source="released" field={DateField} />
+                <DataTable.Col source="writer" />
+                <DataTable.Col source="producer" />
+                <DataTable.Col source="recordCompany" label="Label" />
+                <DataTable.Col>
+                    <EditSongButton />
+                </DataTable.Col>
+            </DataTable>
         </List>
     );
 };
@@ -857,16 +859,16 @@ To do so, override the [app location](#app-location) of the CRUD pages using the
 {% raw %}
 ```jsx
 // in src/songs/SongList.jsx
-import { List, Datagrid, TextField } from 'react-admin';
+import { List, DataTable } from 'react-admin';
 import { useDefineAppLocation } from '@react-admin/ra-navigation';
 
 export const SongList = () => {
     useDefineAppLocation('music.songs');
     return (
         <List>
-            <Datagrid>
-                <TextField source="title" />
-            </Datagrid>
+            <DataTable>
+                <DataTable.Col source="title" />
+            </DataTable>
         </List>
     );
 };