diff --git a/README.md b/README.md
index 3525cc1077d..a6085b0f7d9 100644
--- a/README.md
+++ b/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>
 );
 
diff --git a/docs/Actions.md b/docs/Actions.md
index 695e21ce89b..93c52b29e6b 100644
--- a/docs/Actions.md
+++ b/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`
 
diff --git a/docs/AppTheme.md b/docs/AppTheme.md
index 00a4595af91..96a14d31ad1 100644
--- a/docs/AppTheme.md
+++ b/docs/AppTheme.md
@@ -273,7 +273,7 @@ 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';
@@ -281,11 +281,11 @@ 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",
                   },
               }
diff --git a/docs/ArrayField.md b/docs/ArrayField.md
index 94eff1283a1..11fa69dbb1d 100644
--- a/docs/ArrayField.md
+++ b/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>
diff --git a/docs/AuthRBAC.md b/docs/AuthRBAC.md
index e4e73cda819..f436d1cacd8 100644
--- a/docs/AuthRBAC.md
+++ b/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.
 
diff --git a/docs/Breadcrumb.md b/docs/Breadcrumb.md
index d5625f6d65c..681178f61bd 100644
--- a/docs/Breadcrumb.md
+++ b/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>
     );
 };
diff --git a/docs/Buttons.md b/docs/Buttons.md
index daa49b279ce..408b1e731f3 100644
--- a/docs/Buttons.md
+++ b/docs/Buttons.md
@@ -36,7 +36,7 @@ React-Admin provides button components for all the common uses.
 
 ## `<BulkDeleteButton>`
 
-Deletes the selected rows. To be used inside [the `<Datagrid bulkActionButtons>` prop](./Datagrid.md#bulkactionbuttons) (where it's enabled by default).
+Deletes the selected rows. To be used inside [the `<DataTable bulkActionButtons>` prop](./DataTable.md#bulkactionbuttons) (where it's enabled by default).
 
 ![Bulk Delete button](./img/bulk-delete-button.png)
 
@@ -47,7 +47,7 @@ Deletes the selected rows. To be used inside [the `<Datagrid bulkActionButtons>`
 ```jsx
 import * as React from 'react';
 import { Fragment } from 'react';
-import { BulkDeleteButton, BulkExportButton } from 'react-admin';
+import { BulkDeleteButton, BulkExportButton, DataTable } from 'react-admin';
 
 const PostBulkActionButtons = () => (
     <Fragment>
@@ -58,9 +58,9 @@ const PostBulkActionButtons = () => (
 
 export const PostList = () => (
     <List>
-        <Datagrid bulkActionButtons={<PostBulkActionButtons />}>
+        <DataTable bulkActionButtons={<PostBulkActionButtons />}>
             ...
-        </Datagrid>
+        </DataTable>
     </List>
 );
 ```
@@ -114,7 +114,7 @@ Alternately, pass a `successMessage` prop:
 
 ## `<BulkExportButton>`
 
-Same as `<ExportButton>`, except it only exports the selected rows instead of the entire list. To be used inside [the `<Datagrid bulkActionButtons>` prop](./Datagrid.md#bulkactionbuttons).
+Same as `<ExportButton>`, except it only exports the selected rows instead of the entire list. To be used inside [the `<DataTable bulkActionButtons>` prop](./DataTable.md#bulkactionbuttons).
 
 ![Bulk Export button](./img/bulk-export-button.png)
 
@@ -123,7 +123,7 @@ Same as `<ExportButton>`, except it only exports the selected rows instead of th
 ```jsx
 import * as React from 'react';
 import { Fragment } from 'react';
-import { BulkDeleteButton, BulkExportButton } from 'react-admin';
+import { BulkDeleteButton, BulkExportButton, DataTable, List } from 'react-admin';
 
 const PostBulkActionButtons = () => (
     <Fragment>
@@ -134,9 +134,9 @@ const PostBulkActionButtons = () => (
 
 export const PostList = () => (
     <List>
-        <Datagrid bulkActionButtons={<PostBulkActionButtons />}>
+        <DataTable bulkActionButtons={<PostBulkActionButtons />}>
             ...
-        </Datagrid>
+        </DataTable>
     </List>
 );
 ```
@@ -152,7 +152,7 @@ export const PostList = () => (
 
 ## `<BulkUpdateButton>`
 
-Partially updates the selected rows. To be used inside [the `<Datagrid bulkActionButtons>` prop](./Datagrid.md#bulkactionbuttons).
+Partially updates the selected rows. To be used inside [the `<DataTable bulkActionButtons>` prop](./DataTable.md#bulkactionbuttons).
 
 ![Bulk Update button](./img/bulk-update-button.png)
 
@@ -162,7 +162,7 @@ Partially updates the selected rows. To be used inside [the `<Datagrid bulkActio
 ```jsx
 import * as React from 'react';
 import { Fragment } from 'react';
-import { BulkDeleteButton, BulkExportButton, BulkUpdateButton } from 'react-admin';
+import { BulkDeleteButton, BulkExportButton, BulkUpdateButton, DataTable, List } from 'react-admin';
 
 const PostBulkActionButtons = () => (
     <Fragment>
@@ -174,9 +174,9 @@ const PostBulkActionButtons = () => (
 
 export const PostList = () => (
     <List>
-        <Datagrid bulkActionButtons={<PostBulkActionButtons />}>
+        <DataTable bulkActionButtons={<PostBulkActionButtons />}>
             ...
-        </Datagrid>
+        </DataTable>
     </List>
 );
 ```
@@ -234,7 +234,7 @@ Alternately, pass a `successMessage` prop:
 
 ## `<BulkUpdateFormButton>`
 
-This component, part of the [enterprise edition](https://react-admin-ee.marmelab.com/documentation/ra-form-layout)<img class="icon" src="./img/premium.svg" alt="React Admin Enterprise Edition icon" />, lets users edit multiple records at once. To be used inside [the `<Datagrid bulkActionButtons>` prop](./Datagrid.md#bulkactionbuttons).
+This component, part of the [enterprise edition](https://react-admin-ee.marmelab.com/documentation/ra-form-layout)<img class="icon" src="./img/premium.svg" alt="React Admin Enterprise Edition icon" />, lets users edit multiple records at once. To be used inside [the `<DataTable bulkActionButtons>` prop](./DataTable.md#bulkactionbuttons).
 
 <video controls autoplay playsinline muted loop>
   <source src="./img/BulkUpdateButton-SimpleForm.webm" type="video/webm"/>
@@ -246,7 +246,7 @@ The button opens a dialog containing the form passed as children. When the form
 
 ### Usage
 
-`<BulkUpdateFormButton>` can be used inside `<Datagrid>`'s `bulkActionButtons`.
+`<BulkUpdateFormButton>` can be used inside `<DataTable>`'s `bulkActionButtons`.
 
 ```tsx
 import * as React from 'react';
@@ -254,13 +254,12 @@ import {
     Admin,
     BooleanField,
     BooleanInput,
-    Datagrid,
+    DataTable,
     DateField,
     DateInput,
     List,
     Resource,
     SimpleForm,
-    TextField,
 } from 'react-admin';
 import { BulkUpdateFormButton } from '@react-admin/ra-form-layout';
 
@@ -284,12 +283,12 @@ const PostBulkUpdateButton = () => (
 
 const PostList = () => (
     <List>
-        <Datagrid bulkActionButtons={<PostBulkUpdateButton />}>
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="published_at" />
-            <BooleanField source="is_public" />
-        </Datagrid>
+        <DataTable bulkActionButtons={<PostBulkUpdateButton />}>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="published_at" field={DateField} />
+            <DataTable.Col source="is_public" field={BooleanField} />
+        </DataTable>
     </List>
 );
 ```
@@ -981,7 +980,7 @@ const CommentShow = () => (
 
 It also supports [all the other `<Button>` props](#button).
 
-**Tip**: You can use it as `<Datagrid>` child, too. However, you should use the `<Datagrid rowClick="edit">` prop instead to avoid using one column for the Edit button.
+**Tip**: You can use it as `<DataTable>` child, too. However, you should use the `<DataTable rowClick="edit">` prop instead to avoid using one column for the Edit button.
 
 **Tip**: If you want to link to the Edit view manually, use the `/{resource}/{record.id}` location.
 
@@ -1186,12 +1185,12 @@ The `<SelectAllButton>` component allows users to select all items from a resour
 
 ### Usage
 
-By default, react-admin's `<Datagrid>` displays a `<SelectAllButton>` in its `bulkActionsToolbar`. You can customize it by specifying your own `<BulkActionsToolbar selectAllButton>`:
+By default, react-admin's `<DataTable>` displays a `<SelectAllButton>` in its `bulkActionsToolbar`. You can customize it by specifying your own `<BulkActionsToolbar selectAllButton>`:
 
 {% raw %}
 
 ```jsx
-import { List, Datagrid, BulkActionsToolbar, SelectAllButton, BulkDeleteButton } from 'react-admin';
+import { List, DataTable, BulkActionsToolbar, SelectAllButton, BulkDeleteButton } from 'react-admin';
 
 const PostSelectAllButton = () => (
     <SelectAllButton 
@@ -1202,7 +1201,7 @@ const PostSelectAllButton = () => (
 
 export const PostList = () => (
     <List>
-        <Datagrid
+        <DataTable
             bulkActionsToolbar={
                 <BulkActionsToolbar selectAllButton={PostSelectAllButton}>
                     <BulkDeleteButton />
@@ -1210,7 +1209,7 @@ export const PostList = () => (
             }
         >
             ...
-        </Datagrid>
+        </DataTable>
     </List>
 );
 ```
@@ -1302,7 +1301,7 @@ const CommentEdit = () => (
 
 It also supports [all the other `<Button>` props](#button).
 
-**Tip**: You can use it as `<Datagrid>` child with no props too. However, you should use the `<Datagrid rowClick="show">` prop instead to avoid using one column for the Edit button.
+**Tip**: You can use it as `<DataTable>` child with no props too. However, you should use the `<DataTable rowClick="show">` prop instead to avoid using one column for the Edit button.
 
 **Tip**: If you want to link to the Show view manually, use the `/{resource}/{record.id}/show` location.
 
@@ -1643,7 +1642,7 @@ See [The AppBar documentation](./AppBar.md#usermenu) for more details.
 
 ## Performance
 
-The ripple effect can cause [performance issues](https://github.com/marmelab/react-admin/issues/5587) when displaying a large number of buttons (e.g. in a large datagrid). It's possible to remove the ripple effect from within your Material UI theme. The [Material UI docs](https://mui.com/material-ui/getting-started/faq/#how-can-i-disable-the-ripple-effect-globally) provide instructions on how to do this.
+The ripple effect can cause [performance issues](https://github.com/marmelab/react-admin/issues/5587) when displaying a large number of buttons (e.g. in a large `<DataTable>`). It's possible to remove the ripple effect from within your Material UI theme. The [Material UI docs](https://mui.com/material-ui/getting-started/faq/#how-can-i-disable-the-ripple-effect-globally) provide instructions on how to do this.
 
 It's worth noting that removing the ripple will cause accessibility issues, including a lack of focus states during tab navigating for components like `BooleanInput` and `CheckboxGroupInput`.
 
diff --git a/docs/CRUD.md b/docs/CRUD.md
index 2af59f7272f..8eaf4fea231 100644
--- a/docs/CRUD.md
+++ b/docs/CRUD.md
@@ -36,20 +36,20 @@ Each component reads the parameters from the URL, fetches the data from the data
 For example, to display a list of posts, you would use the `<List>` component:
 
 ```jsx
-import { List, Datagrid, TextField } from 'react-admin';
+import { List, DataTable } from 'react-admin';
 
 const PostList = () => (
     <List resource="posts">
-        <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>
 );
 ```
 
-Here, the `<List>` component will call `dataProvider.getList('posts')` to fetch the list of posts and create a `ListContext` to store the data. The `<Datagrid>` component will read the data from that `ListContext` and render a row for each post. That's why there is no need to explicitly pass the data to the `<Datagrid>` component.
+Here, the `<List>` component will call `dataProvider.getList('posts')` to fetch the list of posts and create a `ListContext` to store the data. The `<DataTable>` component will read the data from that `ListContext` and render a row for each post. That's why there is no need to explicitly pass the data to the `<DataTable>` component.
 
 ## Page Context
 
@@ -60,7 +60,7 @@ Here, the `<List>` component will call `dataProvider.getList('posts')` to fetch
 - Filters
 - Record selection
 
-The [`ListContext`](./useListContext.md) exposes callbacks to update these settings, and `<List>`'s children components like `<Datagrid>` use these callbacks to update the data.
+The [`ListContext`](./useListContext.md) exposes callbacks to update these settings, and `<List>`'s children components like `<DataTable>` use these callbacks to update the data.
 
 ```jsx
 const listContext = useListContext();
@@ -135,16 +135,16 @@ This is the equivalent of the following react-router configuration:
 `<Resource>` defines a `ResourceContext` storing the current resource `name`. This context is used by the `<List>`, `<Edit>`, `<Create>`, and `<Show>` components to determine the resource they should fetch. So when declaring page components with `<Resource>`, you don't need to pass the `resource` prop to them.
 
 ```diff
-import { List, Datagrid, TextField } from 'react-admin';
+import { List, DataTable } from 'react-admin';
 
 const PostList = () => (
 -   <List resource="posts">
 +   <List>
-        <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>
 );
 ```
@@ -153,26 +153,26 @@ Check [the `<Resource>` documentation](./Resource.md) to learn more about routin
 
 ## The List Page
 
-To build list pages, developers primarily use the [`<List>`](./List.md) component. It fetches a list of records from the data provider and delegates the rendering to its child component (often a [`<Datagrid>`](./Datagrid.md), as in the example below).
+To build list pages, developers primarily use the [`<List>`](./List.md) component. It fetches a list of records from the data provider and delegates the rendering to its child component (often a [`<DataTable>`](./DataTable.md), as in the example below).
 
 ```jsx
-import { List, Datagrid, TextField, TextInput} from 'react-admin';
+import { List, DataTable, TextInput} from 'react-admin';
 
 const filters = [<TextInput label="Search" source="q" size="small" alwaysOn />];
 
 const BookList = () => (
     <List filters={filters}>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <TextField source="author" />
-            <TextField source="year" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author" />
+            <DataTable.Col source="year" />
+        </DataTable>
     </List>
 );
 ```
 
-`<List>` also lets you customize the UI for filters and pagination. As for `<Datagrid>`, it provides tons of customization options, like row expanders, bulk actions, and column chooser. You can learn more in the [List Tutorial](./ListTutorial.md).
+`<List>` also lets you customize the UI for filters and pagination. As for `<DataTable>`, it provides tons of customization options, like row expanders, bulk actions, and column chooser. You can learn more in the [List Tutorial](./ListTutorial.md).
 
 ### List Layouts
 
@@ -181,10 +181,10 @@ You can use any of the following components to build the list page:
 <table><tbody>
 <tr style="border:none">
     <td style="width:50%;border:none;text-align:center">
-        <a title="<Datagrid>" href="./Datagrid.html">
+        <a title="<DataTable>" href="./DataTable.html">
             <img src="./img/Datagrid.jpg">
         </a>
-        <a href="./Datagrid.html" style="display: block;transform: translateY(-10px);"><code>&lt;Datagrid&gt;</code></a>
+        <a href="./DataTable.html" style="display: block;transform: translateY(-10px);"><code>&lt;DataTable&gt;</code></a>
     </td>
     <td style="width:50%;border:none;text-align:center">
          <a title="<DatagridAG>" href="./DatagridAG.html">
@@ -251,7 +251,7 @@ Inside these list layouts, you can use any of react-admin’s Field components t
 - [`<ExportButton>`](./Buttons.md#exportbutton): A button to export the list data
 - [`<CreateButton>`](./Buttons.md#createbutton): A button to create a new record
 - [`<SortButton>`](./SortButton.md): A button to sort the list
-- [`<SelectColumnsButton>`](./SelectColumnsButton.md): A button to select the columns to display in a Datagrid
+- [`<SelectColumnsButton>`](./SelectColumnsButton.md): A button to select the columns to display in a DataTable
 - [`<BulkUpdateButton>`](./Buttons.md#bulkupdatebutton): A button to update selected records
 - [`<BulkDeleteButton>`](./Buttons.md#bulkdeletebutton): A button to delete selected records
 - [`<ListActions>`](./List.md#actions): A toolbar with a create and an export button
@@ -427,7 +427,7 @@ Check the following components to learn more about guessers:
 
 ## Headless Variants
 
-`<List>` and other page components render their children (e.g., `<Datagrid>`) in a page layout. This layout contains a page title (e.g., "Posts"), toolbars for action buttons & filters, a footer for pagination, and a side column.
+`<List>` and other page components render their children (e.g., `<DataTable>`) in a page layout. This layout contains a page title (e.g., "Posts"), toolbars for action buttons & filters, a footer for pagination, and a side column.
 
 But sometimes, you want to use the list data in a different layout, without the page title and toolbar, or with a different UI kit. For these use cases, you can use the headless variants of the page components, which come in two flavors:
 
@@ -458,15 +458,15 @@ const MyList = () => {
 If you want to use react-admin components, prefer the Base components, which call the hooks internally and store the values in a context:
 
 ```jsx
-import { ListBase, Datagrid, TextField } from 'react-admin';
+import { ListBase, DataTable } from 'react-admin';
 
 const MyList = () => (
     <ListBase resource="posts">
-        <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>
     </ListBase>
 );
 ```
diff --git a/docs/Configurable.md b/docs/Configurable.md
index f01fa31fd84..dc1349afa05 100644
--- a/docs/Configurable.md
+++ b/docs/Configurable.md
@@ -13,7 +13,6 @@ This component makes another component configurable by the end user. When users
   Your browser does not support the video tag.
 </video>
 
-
 Some react-admin components are already configurable - or rather they have a configurable counterpart:
 
 - [`<DatagridConfigurable>`](./Datagrid.md#configurable)
diff --git a/docs/Confirm.md b/docs/Confirm.md
index f06f45189a5..5a3b9c350e4 100644
--- a/docs/Confirm.md
+++ b/docs/Confirm.md
@@ -95,30 +95,32 @@ React-admin's `<DeleteButton>` lets user delete the current record [in an optimi
 Alternately, you can force the user to confirm the deletion by using `<DeleteButton mutationMode="pessimistic">`. Under the hood, this leverages the `<Confirm>` component to ask for confirmation before deleting the record.
 
 ```jsx
-import { List, Datagrid, TextField, DeleteButton } from 'react-admin';
+import { List, DataTable, DeleteButton } from 'react-admin';
 
 const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <DeleteButton mutationMode="pessimistic" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col>
+                <DeleteButton mutationMode="pessimistic" />
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 ```
 
-The same goes for deleting multiple records in a [bulk action](./Datagrid.md#bulkactionbuttons): use `<BulkDeleteButton mutationMode="pessimistic">` to ask a confirmation before the deletion.
+The same goes for deleting multiple records in a [bulk action](./DataTable.md#bulkactionbuttons): use `<BulkDeleteButton mutationMode="pessimistic">` to ask a confirmation before the deletion.
 
 ```jsx
-import { List, Datagrid, TextField, BulkDeleteButton } from 'react-admin';
+import { List, DataTable, BulkDeleteButton } from 'react-admin';
 
 const PostList = () => (
     <List>
-        <Datagrid bulkActionButtons={<BulkDeleteButton mutationMode="pessimistic" />}>
-            <TextField source="id" />
-            <TextField source="title" />
-        </Datagrid>
+        <DataTable bulkActionButtons={<BulkDeleteButton mutationMode="pessimistic" />}>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+        </DataTable>
     </List>
 );
 ```
diff --git a/docs/Contributing.md b/docs/Contributing.md
index 2e4895333a4..44eb9318170 100644
--- a/docs/Contributing.md
+++ b/docs/Contributing.md
@@ -194,7 +194,7 @@ An exception is the `<Datagrid>` component, which inspects its Field children at
 - If a child is wrapped inside another component that doesn't follow the same API, the feature breaks
 - Developers typically expect a component to affect its subtree, not its ancestors. Violating this expectation can lead to difficult-to-explain bugs.
 
-We keep child inspection in `<Datagrid>` because there is no superior alternative, but it's an uncommon exception.
+We keep child inspection in `<Datagrid>` for backwards compatibility reasons, but since then we introduced a superior alternative to solve the aforementioned issues: [`<DataTable>`](./DataTable.md).
 
 ## Principle Of Least Documentation
 
diff --git a/docs/Count.md b/docs/Count.md
index 5205465e58c..2ef2e8ad7e4 100644
--- a/docs/Count.md
+++ b/docs/Count.md
@@ -144,38 +144,32 @@ If you need to count the number of records related to the current one via a one-
 ```jsx
 import { 
     ChipField,
-    Datagrid,
+    DataTable,
     DateField,
     List,
-    NumberField,
     ReferenceArrayField,
     ReferenceManyCount,
     SingleFieldList,
-    TextField,
 } from 'react-admin';
 
 export const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="published_at" sortByOrder="DESC" />
-            <ReferenceManyCount
-                label="Comments"
-                reference="comments"
-                target="post_id"
-            />
-            <NumberField source="views" sortByOrder="DESC" />
-            <ReferenceArrayField
-                label="Tags"
-                reference="tags"
-                source="tags"
-            >
-                <SingleFieldList>
-                    <ChipField source="name.en" size="small" />
-                </SingleFieldList>
-            </ReferenceArrayField>
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="published_at" sortByOrder="DESC" field={DateField} />
+            <DataTable.Col label="Comments">
+                <ReferenceManyCount reference="comments" target="post_id" />
+            </DataTable.Col>
+            <DataTable.NumberCol source="views" sortByOrder="DESC" />
+            <DataTable.Col label="Tags">
+                <ReferenceArrayField reference="tags" source="tags">
+                    <SingleFieldList>
+                        <ChipField source="name.en" size="small" />
+                    </SingleFieldList>
+                </ReferenceArrayField>
+            </DataTable.Col>
+        </DataTable>
     </List>
 )
 ```
diff --git a/docs/Create.md b/docs/Create.md
index d8e8a94cb6c..1ed7e27bf63 100644
--- a/docs/Create.md
+++ b/docs/Create.md
@@ -489,7 +489,7 @@ That means that if you want to create a link to a creation form, presetting *som
 
 ```jsx
 import * as React from 'react';
-import { CreateButton, Datagrid, List, useRecordContext } from 'react-admin';
+import { CreateButton, DataTable, List, useRecordContext } from 'react-admin';
 
 const CreateRelatedCommentButton = () => {
     const record = useRecordContext();
@@ -503,10 +503,12 @@ const CreateRelatedCommentButton = () => {
 
 export default PostList = () => (
     <List>
-        <Datagrid>
+        <DataTable>
             ...
-            <CreateRelatedCommentButton />
-        </Datagrid>
+            <DataTable.Col>
+                <CreateRelatedCommentButton />
+            </DataTable.Col>
+        </DataTable>
     </List>
 )
 ```
@@ -540,7 +542,7 @@ Should you use the location `state` or the location `search`? The latter modifie
 
 And if you want to prefill the form with constant values, use the `defaultValues` prop on the Form tag.
 
-**Tip**: [The `<Clonebutton>` component](./Buttons.md#clonebutton) redirects to a Creation view prefilled with the same data as the current context. You can use it e.g. in a `<Datagrid>`, or in the `<Edit actions>` toolbar.
+**Tip**: [The `<Clonebutton>` component](./Buttons.md#clonebutton) redirects to a Creation view prefilled with the same data as the current context. You can use it e.g. in a `<DataTable>`, or in the `<Edit actions>` toolbar.
 
 ## Save And Add Another
 
diff --git a/docs/CreateDialog.md b/docs/CreateDialog.md
index c829a9f9613..87e26ddf590 100644
--- a/docs/CreateDialog.md
+++ b/docs/CreateDialog.md
@@ -31,7 +31,7 @@ Then, add the `<CreateDialog>` component as a sibling to a `<List>` component.
 import {
     List,
     ListActions,
-    Datagrid,
+    DataTable,
     SimpleForm,
     TextInput,
     DateInput,
@@ -43,9 +43,9 @@ import { CreateDialog } from '@react-admin/ra-form-layout';
 const CustomerList = () => (
     <>
         <List actions={<ListActions hasCreate />}>
-            <Datagrid>
+            <DataTable>
                 ...
-            </Datagrid>
+            </DataTable>
         </List>
         <CreateDialog>
             <SimpleForm>
@@ -213,7 +213,7 @@ Here is an example:
 import {
     List,
     ListActions,
-    Datagrid,
+    DataTable,
     SimpleForm,
     TextInput,
     DateInput,
@@ -224,9 +224,9 @@ import { CreateDialog } from '@react-admin/ra-form-layout';
 const CustomerList = () => (
     <>
         <List actions={<ListActions hasCreate />}>
-            <Datagrid>
+            <DataTable>
                 ...
-            </Datagrid>
+            </DataTable>
         </List>
         <CreateDialog title="Create a new customer">
             <SimpleForm>
@@ -305,7 +305,7 @@ Put `<CreateInDialogButton>` wherever you would put a `<CreateButton>`, and use
 {% raw %}
 ```jsx
 import {
-  Datagrid,
+  DataTable,
   ReferenceManyField,
   Show,
   SimpleForm,
@@ -331,10 +331,10 @@ const CompanyShow = () => (
                         </SimpleForm>
                     </CreateInDialogButton>
                 )} />
-                <Datagrid>
-                    <TextField source="first_name" />
-                    <TextField source="last_name" />
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="first_name" />
+                    <DataTable.Col source="last_name" />
+                </DataTable>
             </ReferenceManyField>
         </SimpleShowLayout>
     </Show>
@@ -369,7 +369,7 @@ Below is an example of an `<Edit>` page, including a 'create a new customer' but
 import React, { useCallback, useState } from 'react';
 import {
     Button,
-    Datagrid,
+    DataTable,
     DateField,
     DateInput,
     Edit,
@@ -378,7 +378,6 @@ import {
     SelectField,
     SelectInput,
     SimpleForm,
-    TextField,
     TextInput,
     useRecordContext,
 } from 'react-admin';
@@ -437,13 +436,15 @@ const EmployerSimpleFormWithFullyControlledDialogs = () => {
                 reference="customers"
                 target="employer_id"
             >
-                <Datagrid>
-                    <TextField source="id" />
-                    <TextField source="first_name" />
-                    <TextField source="last_name" />
-                    <DateField source="dob" label="born" />
-                    <SelectField source="sex" choices={sexChoices} />
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="id" />
+                    <DataTable.Col source="first_name" />
+                    <DataTable.Col source="last_name" />
+                    <DataTable.Col source="dob" label="born" field={DateField} />
+                    <DataTable.Col source="sex">
+                        <SelectField source="sex" choices={sexChoices} />
+                    </DataTable.Col>
+                </DataTable>
             </ReferenceManyField>
         </SimpleForm>
     );
@@ -469,7 +470,7 @@ import React from 'react';
 import {
     List,
     ListActions,
-    Datagrid,
+    DataTable,
     SimpleForm,
 } from 'react-admin';
 import { CreateDialog } from '@react-admin/ra-form-layout';
@@ -477,9 +478,9 @@ import { CreateDialog } from '@react-admin/ra-form-layout';
 const CustomerList = () => (
     <>
         <List actions={<ListActions hasCreate />}>
-            <Datagrid rowClick="edit">
+            <DataTable rowClick="edit">
                 ...
-            </Datagrid>
+            </DataTable>
         </List>
         <CreateDialog>
             <SimpleForm warnWhenUnsavedChanges>
diff --git a/docs/CreateInDialogButton.md b/docs/CreateInDialogButton.md
index 1cd7ee2acaf..bab21634118 100644
--- a/docs/CreateInDialogButton.md
+++ b/docs/CreateInDialogButton.md
@@ -12,7 +12,7 @@ This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon"
   Your browser does not support the video tag.
 </video>
 
-It can be useful in case you want the ability to create a record linked by a reference to the currently edited record, or if you have a nested `<Datagrid>` inside a `<Show>` or an `<Edit>` view. 
+It can be useful in case you want the ability to create a record linked by a reference to the currently edited record, or if you have a nested `<DataTable>` inside a `<Show>` or an `<Edit>` view.
 
 Note that this component doesn't use routing, so it doesn't change the URL. It's therefore not possible to bookmark the creation dialog, or to link to it from another page. If you need that functionality, use [`<CreateDialog>`](./CreateDialog.md) instead.
 
@@ -33,7 +33,7 @@ Then, put `<CreateInDialogButton>` wherever you would put a `<CreateButton>`, an
 {% raw %}
 ```jsx
 import {
-  Datagrid,
+  DataTable,
   ReferenceManyField,
   Show,
   SimpleForm,
@@ -59,10 +59,10 @@ const CompanyShow = () => (
                         </SimpleForm>
                     </CreateInDialogButton>
                 )} />
-                <Datagrid>
-                    <TextField source="first_name" />
-                    <TextField source="last_name" />
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="first_name" />
+                    <DataTable.Col source="last_name" />
+                </DataTable>
             </ReferenceManyField>
         </SimpleShowLayout>
     </Show>
@@ -317,13 +317,13 @@ const EmployerEditButton = () => (
 
 ## Combining With `<EditInDialogButton>`
 
-Below is an example of an `<Edit>` view, inside which is a nested `<Datagrid>`, offering the ability to **create**, **edit** and **show** the rows thanks to `<CreateInDialogButton>`, [`<EditInDialogButton>`](./EditInDialogButton.md) and [`<ShowInDialogButton>`](./ShowInDialogButton.md):
+Below is an example of an `<Edit>` view, inside which is a nested `<DataTable>`, offering the ability to **create**, **edit** and **show** the rows thanks to `<CreateInDialogButton>`, [`<EditInDialogButton>`](./EditInDialogButton.md) and [`<ShowInDialogButton>`](./ShowInDialogButton.md):
 
 {% raw %}
 ```jsx
 import React from "react";
 import {
-  Datagrid,
+  DataTable,
   DateField,
   DateInput,
   Edit,
@@ -366,11 +366,7 @@ const CustomerLayout = () => (
   </SimpleShowLayout>
 );
 
-// helper component to add actions buttons in a column (children),
-// and also in the header (label) of a Datagrid
-const DatagridActionsColumn = ({ label, children }) => <>{children}</>;
-
-const NestedCustomersDatagrid = () => {
+const NestedCustomersDataTable = () => {
   const record = useRecordContext();
 
   const createButton = (
@@ -402,18 +398,20 @@ const NestedCustomersDatagrid = () => {
       reference="customers"
       target="employer_id"
     >
-      <Datagrid>
-        <TextField source="id" />
-        <TextField source="first_name" />
-        <TextField source="last_name" />
-        <DateField source="dob" label="born" />
-        <SelectField source="sex" choices={sexChoices} />
-        {/* Using a component as label is a trick to render it in the Datagrid header */}
-        <DatagridActionsColumn label={createButton}>
+      <DataTable>
+        <DataTable.Col source="id" />
+        <DataTable.Col source="first_name" />
+        <DataTable.Col source="last_name" />
+        <DataTable.Col source="dob" label="born" field={DateField} />
+        <DataTable.Col source="sex">
+          <SelectField source="sex" choices={sexChoices} />
+        </DataTable.Col>
+        {/* Using a component as label is a trick to render it in the DataTable header */}
+        <DataTable.Col label={createButton}>
           {editButton}
           {showButton}
-        </DatagridActionsColumn>
-      </Datagrid>
+        </DataTable.Col>
+      </DataTable>
     </ReferenceManyField>
   );
 };
@@ -424,7 +422,7 @@ const EmployerEdit = () => (
       <TextInput source="name" validate={required()} />
       <TextInput source="address" validate={required()} />
       <TextInput source="city" validate={required()} />
-      <NestedCustomersDatagrid />
+      <NestedCustomersDataTable />
     </SimpleForm>
   </Edit>
 );
diff --git a/docs/CustomRoutes.md b/docs/CustomRoutes.md
index c565f7c82f9..5f76babc5bc 100644
--- a/docs/CustomRoutes.md
+++ b/docs/CustomRoutes.md
@@ -281,17 +281,17 @@ const App = () => (
 
 // in src/BookList.jss
 import { useParams } from 'react-router-dom';
-import { List, Datagrid, TextField } from 'react-admin';
+import { List, DataTable } from 'react-admin';
 
 const BookList = () => {
     const { authorId } = useParams();
     return (
         <List resource="books" filter={{ authorId }}>
-            <Datagrid>
-                <TextField source="id" />
-                <TextField source="title" />
-                <TextField source="year" />
-            </Datagrid>
+            <DataTable>
+                <DataTable.Col source="id" />
+                <DataTable.Col source="title" />
+                <DataTable.Col source="year" />
+            </DataTable>
         </List>
     );
 };
diff --git a/docs/DataProviders.md b/docs/DataProviders.md
index b79e83b0b94..c1c618d8d69 100644
--- a/docs/DataProviders.md
+++ b/docs/DataProviders.md
@@ -364,13 +364,15 @@ For example, this allows you to display data from a related resource without mak
 const PostList = () => (
 -   <List>
 +   <List queryOptions={{ meta: { embed: ["author"] } }}>
-        <Datagrid>
-            <TextField source="title" />
--           <ReferenceField source="author_id" reference="authors>
--               <TextField source="name" />
--           </ReferenceField>
-+           <TextField source="author.name" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+-           <DataTable.Col source="author_id">
+-               <ReferenceField source="author_id" reference="authors>
+-                   <TextField source="name" />
+-               </ReferenceField>
+-           </DataTable.Col>
++           <DataTable.Col source="author.name" />
+        </DataTable>
     </List>
 );
 ```
@@ -415,11 +417,13 @@ For example, you can use prefetching to display the author's name in a post list
 ```jsx
 const PostList = () => (
     <List queryOptions={{ meta: { prefetch: ['author'] }}}>
-        <Datagrid>
-            <TextField source="title" />
-            {/** renders without an additional request */}
-            <ReferenceField source="author_id" reference="authors" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author_id">
+                {/** renders without an additional request */}
+                <ReferenceField source="author_id" reference="authors" />
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 ```
diff --git a/docs/Datagrid.md b/docs/Datagrid.md
index 92e1907c2b8..dce4f99fdce 100644
--- a/docs/Datagrid.md
+++ b/docs/Datagrid.md
@@ -5,6 +5,8 @@ title: "The Datagrid Component"
 
 # `<Datagrid>`
 
+> **Note:** React-admin v5.8.0 introduced a successor to `<Datagrid>` called [`<DataTable>`](./DataTable.md). It offers a better developer experience by removing child inspection, and avoids 'polluting' the field components with props only serving in datagrid columns (e.g. sortBy, label, etc). Hence, we recommend using `<DataTable>` instead of `<Datagrid>` for new projects. `<Datagrid>` is of course still available for backward compatibility.
+
 The `<Datagrid>` component renders a list of records as a table. It supports sorting, row selection for bulk actions, and an expand panel. It is usually used as a descendant of the [`<List>`](./List.md#list) and [`<ReferenceManyField>`](./ReferenceManyField.md) components. Outside these components, it must be used inside a `ListContext`.
 
 <iframe src="https://www.youtube-nocookie.com/embed/IX_3Hz123m4" 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>
diff --git a/docs/DateField.md b/docs/DateField.md
index 0aeab66691f..d3db89c0e73 100644
--- a/docs/DateField.md
+++ b/docs/DateField.md
@@ -14,16 +14,18 @@ Displays a date, datetime or time using the browser locale (thanks to `Date.toLo
 In a List or a Show view, use `<DateField>` as any other field component to render a date value:
 
 ```jsx
-import { List, Datagrid, TextField, DateField } from 'react-admin';
+import { List, DataTable, DateField } from 'react-admin';
 
 export const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="published_at" />
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="published_at">
+                <DateField source="published_at" />
+            </DataTable.Col>
             ...
-        </Datagrid>
+        </DataTable>
     </List>
 )
 ```
diff --git a/docs/DateRangeInput.md b/docs/DateRangeInput.md
index 526095bfeed..6f421a60ebb 100644
--- a/docs/DateRangeInput.md
+++ b/docs/DateRangeInput.md
@@ -160,7 +160,7 @@ Here is an example:
 
 ```tsx
 import { DateRangeInput } from '@react-admin/ra-form-layout/DateRangeInput';
-import { List, Datagrid, NumberField, TextField, DateField } from 'react-admin';
+import { List, DataTable, DateField } from 'react-admin';
 import { endOfDay } from 'date-fns';
 
 const dateRangeFilterParse = (dates: (Date | null)[]) => {
@@ -177,11 +177,11 @@ const eventsFilters = [
 
 export const EventsList = () => (
     <List filters={eventsFilters}>
-        <Datagrid>
-            <NumberField source="id" />
-            <TextField source="name" />
-            <DateField source="date" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.NumberCol source="id" />
+            <DataTable.Col source="name" />
+            <DataTable.Col source="date" field={DateField} />
+        </DataTable>
     </List>
 );
 ```
diff --git a/docs/Edit.md b/docs/Edit.md
index 7b44f9906ce..e07f6b1d826 100644
--- a/docs/Edit.md
+++ b/docs/Edit.md
@@ -19,7 +19,7 @@ For instance, the following component will render an edition form for posts when
 
 ```jsx
 // in src/posts.js
-import { Edit, SimpleForm, TextInput, DateInput, ReferenceManyField, Datagrid, TextField, DateField, EditButton, required } from 'react-admin';
+import { Edit, SimpleForm, TextInput, DateInput, ReferenceManyField, DataTable, DateField, EditButton, required } from 'react-admin';
 import RichTextInput from 'ra-input-rich-text';
 
 export const PostEdit = () => (
@@ -31,11 +31,13 @@ export const PostEdit = () => (
             <RichTextInput source="body" validate={required()} />
             <DateInput label="Publication date" source="published_at" />
             <ReferenceManyField label="Comments" reference="comments" target="post_id">
-                <Datagrid>
-                    <TextField source="body" />
-                    <DateField source="created_at" />
-                    <EditButton />
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="body" />
+                    <DataTable.Col source="created_at" field={DateField} />
+                    <DataTable.Col>
+                        <EditButton />
+                    </DataTable.Col>
+                </DataTable>
             </ReferenceManyField>
         </SimpleForm>
     </Edit>
@@ -798,7 +800,7 @@ That means that if you want to create a link to an edition view, modifying immed
 {% raw %}
 ```jsx
 import * as React from 'react';
-import { EditButton, Datagrid, List } from 'react-admin';
+import { EditButton, DataTable, List } from 'react-admin';
 
 const ApproveButton = () => {
     return (
@@ -810,10 +812,12 @@ const ApproveButton = () => {
 
 export default PostList = () => (
     <List>
-        <Datagrid>
+        <DataTable>
             ...
-            <ApproveButton />
-        </Datagrid>
+            <DataTable.Col>
+                <ApproveButton />
+            </DataTable.Col>
+        </DataTable>
     </List>
 )
 ```
diff --git a/docs/EditDialog.md b/docs/EditDialog.md
index 0f89c21a6d3..cd05a937a45 100644
--- a/docs/EditDialog.md
+++ b/docs/EditDialog.md
@@ -29,7 +29,7 @@ Then, add the `<EditDialog>` component as a sibling to a `<List>` component.
 ```jsx
 import {
     List,
-    Datagrid,
+    DataTable,
     SimpleForm,
     TextField,
     TextInput,
@@ -42,9 +42,9 @@ import { EditDialog } from '@react-admin/ra-form-layout';
 const CustomerList = () => (
     <>
         <List>
-            <Datagrid rowClick="edit">
+            <DataTable rowClick="edit">
                 ...
-            </Datagrid>
+            </DataTable>
         </List>
         <EditDialog>
             <SimpleForm>
@@ -246,7 +246,7 @@ import React from 'react';
 import {
     List,
     ListActions,
-    Datagrid,
+    DataTable,
     SimpleForm,
     TextInput,
     DateInput,
@@ -267,9 +267,9 @@ const CustomerEditTitle = () => {
 const CustomerList = () => (
     <>
         <List actions={<ListActions hasCreate />}>
-            <Datagrid rowClick="edit">
+            <DataTable rowClick="edit">
                 ...
-            </Datagrid>
+            </DataTable>
         </List>
         <EditDialog title={<CustomerEditTitle />}>
             <SimpleForm>
@@ -337,7 +337,7 @@ export const UserEdit = () => {
 
 ## Usage Without Routing
 
-By default, `<EditDialog>` creates a react-router `<Route>` for the edition path (e.g. `/posts/2`), and renders when users go to that location (either by clicking on a datagrid row, or by typing the URL in the browser). If you embed it in the `list` page as explained above, the dialog will always render on top of the list. 
+By default, `<EditDialog>` creates a react-router `<Route>` for the edition path (e.g. `/posts/2`), and renders when users go to that location (either by clicking on a `<DataTable>` row, or by typing the URL in the browser). If you embed it in the `list` page as explained above, the dialog will always render on top of the list.
 
 This may not be what you want if you need to display the edit dialog in another page (e.g. to edit a related record).
 
@@ -352,7 +352,7 @@ Put `<EditInDialogButton>` wherever you would put an `<EditButton>`, and use the
 
 ```jsx
 import {
-  Datagrid,
+  DataTable,
   ReferenceManyField,
   Show,
   SimpleForm,
@@ -369,16 +369,18 @@ const CompanyShow = () => (
             <TextField source="address" />
             <TextField source="city" />
             <ReferenceManyField target="company_id" reference="employees">
-                <Datagrid>
-                    <TextField source="first_name" />
-                    <TextField source="last_name" />
-                    <EditInDialogButton>
-                        <SimpleForm>
-                            <TextInput source="first_name" />
-                            <TextInput source="last_name" />
-                        </SimpleForm>
-                    </EditInDialogButton>
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="first_name" />
+                    <DataTable.Col source="last_name" />
+                    <DataTable.Col>
+                        <EditInDialogButton>
+                            <SimpleForm>
+                                <TextInput source="first_name" />
+                                <TextInput source="last_name" />
+                            </SimpleForm>
+                        </EditInDialogButton>
+                    </DataTable.Col>
+                </DataTable>
             </ReferenceManyField>
         </SimpleShowLayout>
     </Show>
@@ -412,7 +414,7 @@ Below is an example of an `<Edit>` page, including a 'create a new customer' but
 import React, { useCallback, useState } from 'react';
 import {
     Button,
-    Datagrid,
+    DataTable,
     DateField,
     DateInput,
     Edit,
@@ -421,7 +423,6 @@ import {
     SelectField,
     SelectInput,
     SimpleForm,
-    TextField,
     TextInput,
     useRecordContext,
 } from 'react-admin';
@@ -462,20 +463,24 @@ const EmployerSimpleFormWithFullyControlledDialogs = () => {
                 reference="customers"
                 target="employer_id"
             >
-                <Datagrid>
-                    <TextField source="id" />
-                    <TextField source="first_name" />
-                    <TextField source="last_name" />
-                    <DateField source="dob" label="born" />
-                    <SelectField source="sex" choices={sexChoices} />
-                    <Button
-                        label="Edit customer"
-                        onClick={() => openEditDialog()}
-                        size="medium"
-                        variant="contained"
-                        sx={{ mb: 4 }}
-                    />
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="id" />
+                    <DataTable.Col source="first_name" />
+                    <DataTable.Col source="last_name" />
+                    <DataTable.Col source="dob" label="born" field={DateField} />
+                    <DataTable.Col source="sex">
+                        <SelectField source="sex" choices={sexChoices} />
+                    </DataTable.Col>
+                    <DataTable.Col>
+                        <Button
+                            label="Edit customer"
+                            onClick={() => openEditDialog()}
+                            size="medium"
+                            variant="contained"
+                            sx={{ mb: 4 }}
+                        />
+                    <DataTable.Col>
+                </DataTable>
             </ReferenceManyField>
             <EditDialog
                 fullWidth
@@ -512,7 +517,7 @@ import React from 'react';
 import {
     List,
     ListActions,
-    Datagrid,
+    DataTable,
     SimpleForm,
 } from 'react-admin';
 import { EditDialog } from '@react-admin/ra-form-layout';
@@ -520,9 +525,9 @@ import { EditDialog } from '@react-admin/ra-form-layout';
 const CustomerList = () => (
     <>
         <List actions={<ListActions hasCreate />}>
-            <Datagrid rowClick="edit">
+            <DataTable rowClick="edit">
                 ...
-            </Datagrid>
+            </DataTable>
         </List>
         <EditDialog>
             <SimpleForm warnWhenUnsavedChanges>
diff --git a/docs/EditInDialogButton.md b/docs/EditInDialogButton.md
index d8fd4994df0..ba385897548 100644
--- a/docs/EditInDialogButton.md
+++ b/docs/EditInDialogButton.md
@@ -12,7 +12,7 @@ This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon"
   Your browser does not support the video tag.
 </video>
 
-It can be useful in case you want the ability to edit a record linked by a reference to the currently edited record, or if you have a nested `<Datagrid>` inside a `<Show>` or an `<Edit>` view. 
+It can be useful in case you want the ability to edit a record linked by a reference to the currently edited record, or if you have a nested `<DataTable>` inside a `<Show>` or an `<Edit>` view. 
 
 Note that this component doesn't use routing, so it doesn't change the URL. It's therefore not possible to bookmark the edit dialog, or to link to it from another page. If you need that functionality, use [`<EditDialog>`](./EditDialog.md) instead.
 
@@ -32,7 +32,7 @@ Then, put `<EditInDialogButton>` wherever you would put an `<EditButton>`, and u
 
 ```jsx
 import {
-  Datagrid,
+  DataTable,
   ReferenceManyField,
   Show,
   SimpleForm,
@@ -49,16 +49,18 @@ const CompanyShow = () => (
             <TextField source="address" />
             <TextField source="city" />
             <ReferenceManyField target="company_id" reference="employees">
-                <Datagrid>
-                    <TextField source="first_name" />
-                    <TextField source="last_name" />
-                    <EditInDialogButton>
-                        <SimpleForm>
-                            <TextInput source="first_name" />
-                            <TextInput source="last_name" />
-                        </SimpleForm>
-                    </EditInDialogButton>
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="first_name" />
+                    <DataTable.Col source="last_name" />
+                    <DataTable.Col>
+                      <EditInDialogButton>
+                          <SimpleForm>
+                              <TextInput source="first_name" />
+                              <TextInput source="last_name" />
+                          </SimpleForm>
+                      </EditInDialogButton>
+                    </DataTable.Col>
+                </DataTable>
             </ReferenceManyField>
         </SimpleForm>
     </Show>
@@ -381,15 +383,17 @@ const EmployerEdit = () => (
         <SimpleForm>
             ...
             <ReferenceManyField target="employer_id" reference="customers">
-                <Datagrid>
+                <DataTable>
                     ...
-                    <EditInDialogButton fullWidth maxWidth="sm">
-                        <SimpleForm toolbar={<CustomToolbar />}>
-                            <TextInput source="first_name" />
-                            <TextInput source="last_name" />
-                        </SimpleForm>
-                    </EditInDialogButton>
-                </Datagrid>
+                    <DataTable.Col>
+                        <EditInDialogButton fullWidth maxWidth="sm">
+                            <SimpleForm toolbar={<CustomToolbar />}>
+                                <TextInput source="first_name" />
+                                <TextInput source="last_name" />
+                            </SimpleForm>
+                        </EditInDialogButton>
+                    </DataTable.Col>
+                </DataTable>
             </ReferenceManyField>
         </SimpleForm>
     </Edit>
@@ -424,13 +428,13 @@ const EmployerEditButton = () => (
 
 ## Combining With `<CreateInDialogButton>`
 
-Below is an example of an `<Edit>` view, inside which is a nested `<Datagrid>`, offering the ability to **create**, **edit** and **show** the rows thanks to [`<CreateInDialogButton>`](./CreateInDialogButton.md), `<EditInDialogButton>` and [`<ShowInDialogButton>`](./ShowInDialogButton.md):
+Below is an example of an `<Edit>` view, inside which is a nested `<DataTable>`, offering the ability to **create**, **edit** and **show** the rows thanks to [`<CreateInDialogButton>`](./CreateInDialogButton.md), `<EditInDialogButton>` and [`<ShowInDialogButton>`](./ShowInDialogButton.md):
 
 {% raw %}
 
 ```jsx
 import {
-  Datagrid,
+  DataTable,
   DateField,
   DateInput,
   Edit,
@@ -473,11 +477,7 @@ const CustomerLayout = () => (
   </SimpleShowLayout>
 );
 
-// helper component to add actions buttons in a column (children),
-// and also in the header (label) of a Datagrid
-const DatagridActionsColumn = ({ label, children }) => <>{children}</>;
-
-const NestedCustomersDatagrid = () => {
+const NestedCustomersDataTable = () => {
   const record = useRecordContext();
 
   const createButton = (
@@ -509,18 +509,20 @@ const NestedCustomersDatagrid = () => {
       reference="customers"
       target="employer_id"
     >
-      <Datagrid>
-        <TextField source="id" />
-        <TextField source="first_name" />
-        <TextField source="last_name" />
-        <DateField source="dob" label="born" />
-        <SelectField source="sex" choices={sexChoices} />
-        {/* Using a component as label is a trick to render it in the Datagrid header */}
-        <DatagridActionsColumn label={createButton}>
+      <DataTable>
+        <DataTable.Col source="id" />
+        <DataTable.Col source="first_name" />
+        <DataTable.Col source="last_name" />
+        <DataTable.Col source="dob" label="born" field={DateField} />
+        <DataTable.Col source="sex">
+          <SelectField source="sex" choices={sexChoices} />
+        </DataTable.Col>
+        {/* Using a component as label is a trick to render it in the DataTable header */}
+        <DataTable.Col label={createButton}>
           {editButton}
           {showButton}
-        </DatagridActionsColumn>
-      </Datagrid>
+        </DataTable.Col>
+      </DataTable>
     </ReferenceManyField>
   );
 };
@@ -531,7 +533,7 @@ const EmployerEdit = () => (
       <TextInput source="name" validate={required()} />
       <TextInput source="address" validate={required()} />
       <TextInput source="city" validate={required()} />
-      <NestedCustomersDatagrid />
+      <NestedCustomersDataTable />
     </SimpleForm>
   </Edit>
 );
diff --git a/docs/Features.md b/docs/Features.md
index ed167a5b179..084660b0d59 100644
--- a/docs/Features.md
+++ b/docs/Features.md
@@ -157,12 +157,14 @@ For instance, `<ReferenceField>` displays the name of a related record, like the
 ```jsx
 const BookList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <ReferenceField source="author_id" reference="authors" />
-            <TextField source="year" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author_id">
+                <ReferenceField source="author_id" reference="authors" />
+            </DataTable.Col>
+            <DataTable.Col source="year" />
+        </DataTable>
     </List>
 );
 ```
@@ -212,12 +214,14 @@ const BookList = () => (
     <List filters={[
         <ReferenceInput source="authorId" reference="authors" alwaysOn />,
     ]}>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <ReferenceField source="authorId" reference="authors" />
-            <TextField source="year" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="authorId">
+                <ReferenceField source="authorId" reference="authors" />
+            </DataTable.Col>
+            <DataTable.Col source="year" />
+        </DataTable>
     </List>
 );
 ```
@@ -424,7 +428,7 @@ Check the following components to learn more about guessers:
 
 Most admins need to display a list of records, letting users sort, filter, and paginate them. React-admin provides a set of components to build such lists, called "Datagrid components".
 
-The basic [`<Datagrid>` component](./Datagrid.md) displays a list of records in a table, with a row for each record and a column for each field. It alsosupports an expand panel, a row selection checkbox, and a bulk action toolbar.
+The [`<DataTable>` component](./DataTable.md) (successor of the [`<Datagrid>` component](./Datagrid.md)) displays a list of records in a table, with a row for each record and a column for each field. It alsosupports an expand panel, a row selection checkbox, and a bulk action toolbar.
 
 <video controls autoplay playsinline muted loop>
   <source src="./img/datagrid.mp4" type="video/mp4"/>
@@ -515,7 +519,7 @@ Users often apply the same filters over and over again. Saved Queries **let user
 Here is an example `<FilterList>` sidebar with saved queries:
 
 ```jsx
-import { FilterList, FilterListItem, List, Datagrid } from 'react-admin';
+import { FilterList, FilterListItem, List, DataTable } from 'react-admin';
 import { Card, CardContent } from '@mui/material';
 
 import { SavedQueriesList } from 'react-admin';
@@ -536,9 +540,9 @@ const SongFilterSidebar = () => (
 
 const SongList = () => (
     <List aside={<SongFilterSidebar />}>
-        <Datagrid>
+        <DataTable>
             ...
-        </Datagrid>
+        </DataTable>
     </List>
 );
 ```
@@ -570,8 +574,7 @@ For instance, here is how to build a tabbed form for editing a blog post:
 import {
     TabbedForm,
     Edit,
-    Datagrid,
-    TextField,
+    DataTable,
     DateField,
     TextInput,
     ReferenceManyField,
@@ -601,11 +604,13 @@ export const PostEdit = () => (
             </TabbedForm.Tab>
             <TabbedForm.Tab label="comments">
                 <ReferenceManyField reference="comments" target="post_id" label={false}>
-                    <Datagrid>
-                        <TextField source="body" />
-                        <DateField source="created_at" />
-                        <EditButton />
-                    </Datagrid>
+                    <DataTable>
+                        <DataTable.Col source="body" />
+                        <DataTable.Col source="created_at" field={DateField} />
+                        <DataTable.Col>
+                            <EditButton />
+                        </DataTable.Col>
+                    </DataTable>
                 </ReferenceManyField>
             </TabbedForm.Tab>
         </TabbedForm>
@@ -1198,20 +1203,18 @@ For instance, include a `<ListLiveUpdate>` within a `<List>` to have a list refr
 ```diff
 import {
     List,
-    Datagrid,
-    TextField,
-    NumberField,
+    DataTable,
     Datefield,
 } from 'react-admin';
 +import { ListLiveUpdate } from '@react-admin/ra-realtime';
 
 const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="title" />
-            <NumberField source="views" />
-            <DateField source="published_at" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+            <DataTable.NumberCol source="views" />
+            <DataTable.Col source="published_at" field={DateField} />
+        </DataTable>
 +       <ListLiveUpdate />
     </List>
 );
@@ -1338,7 +1341,7 @@ For instance, the Saved Queries feature lets users **save a combination of filte
 Saved queries persist between sessions, so users can find their custom queries even after closing and reopening the admin. Saved queries are available both for the Filter Button/Form combo and for the `<FilterList>` Sidebar. It's enabled by default for the Filter Button/Form combo, but you have to add it yourself in the `<FilterList>` Sidebar.
 
 ```diff
-import { FilterList, FilterListItem, List, Datagrid } from 'react-admin';
+import { FilterList, FilterListItem, List, DataTable } from 'react-admin';
 import { Card, CardContent } from '@mui/material';
 
 +import { SavedQueriesList } from 'react-admin';
@@ -1359,9 +1362,9 @@ const SongFilterSidebar = () => (
 
 const SongList = () => (
     <List aside={<SongFilterSidebar />}>
-        <Datagrid>
+        <DataTable>
             ...
-        </Datagrid>
+        </DataTable>
     </List>
 );
 ```
@@ -1459,19 +1462,17 @@ Theming is so powerful that you can even use react-admin to build a [Music Playe
 
 ![Music Player](./img/navidrome.png)
 
-Use the `sx` prop on almost every react-admin component to override its default style - and the style of its descendants. For instance, here is how to change the width of Datagrid columns:
+Use the `sx` prop on almost every react-admin component to override its default style - and the style of its descendants. For instance, here is how to change the width of `<DataTable>` columns:
 
 {% raw %}
 
 ```jsx
 import {
     BooleanField,
-    Datagrid,
+    DataTable,
     DateField,
     EditButton,
     List,
-    NumberField,
-    TextField,
     ShowButton,
 } from 'react-admin';
 import Icon from '@mui/icons-material/Person';
@@ -1480,22 +1481,22 @@ export const VisitorIcon = Icon;
 
 export const PostList = () => (
     <List>
-        <Datagrid
+        <DataTable
             sx={{
                 backgroundColor: "Lavender",
-                "& .RaDatagrid-headerCell": {
+                "& .RaDataTable-headerCell": {
                     backgroundColor: "MistyRose",
                 },
             }}
         >
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="published_at" sortByOrder="DESC" />
-            <BooleanField source="commentable" sortable={false} />
-            <NumberField source="views" sortByOrder="DESC" />
-            <EditButton />
-            <ShowButton />
-        </Datagrid>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="published_at" sortByOrder="DESC" field={DateField} />
+            <DataTable.Col source="commentable" sortable={false} field={BooleanField} />
+            <DataTable.NumberCol source="views" sortByOrder="DESC" />
+            <DataTable.Col field={EditButton} />
+            <DataTable.Col field={ShowButton} />
+        </DataTable>
     </List>
 );
 ```
@@ -1535,11 +1536,11 @@ const theme = {
     ...defaultTheme,
     components: {
         ...defaultTheme.components,
-        RaDatagrid: {
+        RaDataTable: {
             styleOverrides: {
               root: {
                   backgroundColor: "Lavender",
-                  "& .RaDatagrid-headerCell": {
+                  "& .RaDataTable-headerCell": {
                       backgroundColor: "MistyRose",
                   },
               }
@@ -1678,12 +1679,12 @@ For a given component, the `sx` prop lets you customize its style based on the s
 
 {% endraw %}
 
-To make a component responsive, you can also render it conditionally based on the screen size. For instance, to render a `<SimpleList>` on desktop and a `<Datagrid>` on mobile:
+To make a component responsive, you can also render it conditionally based on the screen size. For instance, to render a `<SimpleList>` on desktop and a `<DataTable>` on mobile:
 
 ```jsx
 import * as React from 'react';
 import { useMediaQuery } from '@mui/material';
-import { List, SimpleList, Datagrid, TextField, ReferenceField, EditButton } from 'react-admin';
+import { List, SimpleList, DataTable, TextField, ReferenceField, EditButton } from 'react-admin';
 
 export const PostList = () => {
     const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));
@@ -1696,15 +1697,19 @@ 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 source="userId" label="User">
+                        <ReferenceField source="userId" reference="users">
+                            <TextField source="name" />
+                        </ReferenceField>
+                    </DataTable.Col>
+                    <DataTable.Col source="title" />
+                    <DataTable.Col source="body" />
+                    <DataTable.Col>
+                        <EditButton />
+                    </DataTable.Col>
+                </DataTable>
             )}
         </List>
     );
diff --git a/docs/Fields.md b/docs/Fields.md
index 13c11572c4c..044e6db6556 100644
--- a/docs/Fields.md
+++ b/docs/Fields.md
@@ -22,7 +22,7 @@ const PurpleTextField = ({ source }) => {
 ```
 {% endraw %}
 
-**Tip**: Every time it renders a record, react-admin creates a `RecordContext`. This includes datagrid rows, simple list items, reference fields, show, and edit pages. You can even create a `RecordContext` yourself and use react-admin Fields in custom pages.
+**Tip**: Every time it renders a record, react-admin creates a `RecordContext`. This includes `<DataTable>` rows, simple list items, reference fields, show, and edit pages. You can even create a `RecordContext` yourself and use react-admin Fields in custom pages.
 
 React-admin Field components also accept a `record` prop. This allows you to use them outside a `RecordContext`, or to use another `record` than the one in the current context.
 
@@ -79,7 +79,7 @@ Will render
 </Typography>
 ```
 
-Field components are generally used in List and Show views, as children of `<Datagrid>`, `<SimpleShowLayout>`, and `<TabbedShowLayout>`. The parent component usually reads their `source` and/or `label` prop to add a title.
+Field components are generally used in List and Show views, as children of `<DataTable>`, `<Datagrid>`, `<SimpleShowLayout>`, and `<TabbedShowLayout>`. The parent component usually reads their `source` and/or `label` prop to add a title.
 
 ```jsx
 // in src/posts.js
@@ -147,14 +147,7 @@ CSS class name passed to the root component.
 By default, a Field renders an empty string when the record has no value for that field. You can override this behavior by setting the `emptyText` prop. The emptyText supports i8nProvider translation, if the translation is not found it will display the value as default.
 
 ```jsx
-const PostList = () => (
-    <List>
-        <Datagrid>
-            <TextField source="title" />
-            <TextField source="author" emptyText="missing data" />
-        </Datagrid>
-    </List>
-);
+<TextField source="author" emptyText="missing data" />
 ```
 
 ## `label`
@@ -183,6 +176,8 @@ You can customize this automated label by specifying a `label` prop. `<SimpleSho
 
 **Note**: This prop has no effect when rendering a field outside a `<Datagrid>`, a `<SimpleShowLayout>`, a `<TabbedShowLayout>`, a `<SimpleForm>`, or a `<TabbedForm>`.
 
+**Tip**: Having to specify the `label` prop on the field for it to be used by the Datagrid is no longer necessary with [`<DataTable>`](./DataTable.md), the successor of the `<Datagrid>` component. Instead, `<DataTable>` properly separates the props for the column header and the field itself, thanks to the [`<DataTable.Col>`](./DataTable.md#datatablecol) component.
+
 ## `record`
 
 By default, fields use the `record` from the `RecordContext`. But you can override it by passing the `record` prop - e.g. if you're rendering a field outside a `RecordContext`, or if you want to use a different record than the one in the context.
@@ -202,7 +197,7 @@ const PostList = () => (
     <List>
         <Datagrid>
             <TextField source="title" />
-            <ReferenceField source="author_id" sortable={false}>
+            <ReferenceField source="author_id" reference="authors" sortable={false}>
                 <TextField source="name" />
             </ReferenceField>
         </Datagrid>
@@ -212,9 +207,11 @@ const PostList = () => (
 
 **Note**: This prop has no effect when rendering a field outside a `<Datagrid>`.
 
+**Tip**: Having to specify the `sortable` prop on the field for it to be used by the Datagrid is no longer necessary with [`<DataTable>`](./DataTable.md), the successor of the `<Datagrid>` component. Instead, `<DataTable>` properly separates the props for the column header and the field itself, thanks to the [`<DataTable.Col>`](./DataTable.md#datatablecol) component.
+
 ## `sortBy`
 
-In a `<Datagrid>`, users can change the sort field and order by clicking on the column headers. `<Datagrid>` uses the Field `source`to determine the sort field (e.g. clicking on the column header for the `<TextField source="title" />` field sorts the list according to the `title` field).
+In a `<Datagrid>`, users can change the sort field and order by clicking on the column headers. `<Datagrid>` uses the Field `source` to determine the sort field (e.g. clicking on the column header for the `<TextField source="title" />` field sorts the list according to the `title` field).
 
 You may want to use a different sort field than the `source`, e.g. for Reference fields. In that case, use the `sortBy` prop to specify the sort field.
 
@@ -223,7 +220,7 @@ const PostList = () => (
     <List>
         <Datagrid>
             <TextField source="title" />
-            <ReferenceField source="author_id" sortBy="author.name">
+            <ReferenceField source="author_id" reference="authors" sortBy="author.name">
                 <TextField source="name" />
             </ReferenceField>
         </Datagrid>
@@ -233,6 +230,8 @@ const PostList = () => (
 
 **Note**: This prop has no effect when rendering a field outside a `<Datagrid>`.
 
+**Tip**: Having to specify the `sortBy` prop on the field for it to be used by the Datagrid is no longer necessary with [`<DataTable>`](./DataTable.md), the successor of the `<Datagrid>` component. Instead, `<DataTable>` properly separates the props for the column header and the field itself, thanks to the [`<DataTable.Col>`](./DataTable.md#datatablecol) component.
+
 ## `sortByOrder`
 
 By default, when users click on a `<Datagrid>` column header, react-admin reorders the list using the field source, *with an ascending order*. For some fields, it brings unexpected results. For instance, when clicking on a "Last seen at" header, users probably expect to see the users seen more recently. 
@@ -252,6 +251,8 @@ const PostList = () => (
 
 **Note**: This prop has no effect when rendering a field outside a `<Datagrid>`.
 
+**Tip**: Having to specify the `sortByOrder` prop on the field for it to be used by the Datagrid is no longer necessary with [`<DataTable>`](./DataTable.md), the successor of the `<Datagrid>` component. Instead, `<DataTable>` properly separates the props for the column header and the field itself, thanks to the [`<DataTable.Col>`](./DataTable.md#datatablecol) component.
+
 ## `source`
 
 The name of the property to display. Can contain dots for accessing properties of nested objects. 
@@ -303,6 +304,10 @@ const PostList = () => (
 );
 ```
 
+**Tip:** [`<NumberField>`](./NumberField.md) automatically sets the `textAlign` to `right`, so you don't need to set it manually when using that component.
+
+**Tip:** If you are using [`<DataTable>`](./DataTable.md) (the successor of `<Datagrid>`), you can set the [`align`](./DataTable.md#align) prop on the [`<DataTable.Col>`](./DataTable.md#datatablecol) component instead.
+
 ## Deep Field Source
 
 Fields use the `source` as a *path* to read the actual value (using [`lodash.get()`](https://lodash.com/docs/4.17.15#get)). This means you can include dots in the source name to render a deeply nested value. 
@@ -361,6 +366,8 @@ const BookList = () => (
 );
 ```
 
+**Tip**: Having to specify the `label` prop on the field for it to be used by the Datagrid is no longer necessary with [`<DataTable>`](./DataTable.md), the successor of the `<Datagrid>` component. Instead, `<DataTable>` properly separates the props for the column header and the field itself, thanks to the [`<DataTable.Col>`](./DataTable.md#datatablecol) component.
+
 But as Field components don't render the label themselves (again, this is the responsibility of the parent layout component to render the label), this doesn't work when you use a Field inside a Form, or when the field isn't a direct child of a layout component.
 
 To render a field with a label in such situations, wrap the field in [a `<Labeled>` component](./Labeled.md):
@@ -386,6 +393,8 @@ React-admin Field layout components like [`<Datagrid>`](./Datagrid.md) and [`<Si
 <TextField source="author.name" label={false} />
 ```
 
+**Tip**: Having to specify the `label` prop on the field for it to be used by the Datagrid is no longer necessary with [`<DataTable>`](./DataTable.md), the successor of the `<Datagrid>` component. Instead, `<DataTable>` properly separates the props for the column header and the field itself, thanks to the [`<DataTable.Col>`](./DataTable.md#datatablecol) component.
+
 ## Conditional Formatting
 
 If you want to format a field depending on the value, create another component wrapping this field, and set the `sx` prop depending on the field value:
diff --git a/docs/FieldsForRelationships.md b/docs/FieldsForRelationships.md
index cb25b1ec7eb..e678538409a 100644
--- a/docs/FieldsForRelationships.md
+++ b/docs/FieldsForRelationships.md
@@ -119,17 +119,17 @@ const AuthorShow = () => (
             <TextField source="last_name" />
             <DateField source="date_of_birth" />
             <ArrayField source="books">
-                <Datagrid>
-                    <TextField source="title" />
-                    <DateField source="published_at" />
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="title" />
+                    <DataTable.Col source="published_at" field={DateField} />
+                </DataTable>
             </ArrayField>
         </SimpleShowLayout>
     </Show>
 );
 ```
 
-`<ArrayField>` creates a `ListContext` with the embedded records, so you can use any component relying on this context (`<Datagrid>`, `<SimpleList>`, etc.).
+`<ArrayField>` creates a `ListContext` with the embedded records, so you can use any component relying on this context (`<DataTable>`, `<SimpleList>`, etc.).
 
 ## `<ReferenceField>`
 
@@ -176,16 +176,20 @@ This is fine, but what if you need to display the author details for a list of b
 ```jsx
 const BookList = () => (
     <List>
-        <Datagrid>
-            <TextField source="title" />
-            <DateField source="published_at" />
-            <ReferenceField label="Author" source="author_id" reference="authors">
-                <FunctionField render={record => `${record.first_name} ${record.last_name}`} />
-            </ReferenceField>
-            <ReferenceField label="Author DOB" source="author_id" reference="authors">
-                <DateField source="date_of_birth" />
-            </ReferenceField>
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+            <DataTable.Col source="published_at" field={DateField} />
+            <DataTable.Col source="author_id" label="Author">
+                <ReferenceField source="author_id" reference="authors">
+                    <FunctionField render={record => `${record.first_name} ${record.last_name}`} />
+                </ReferenceField>
+            </DataTable.Col>
+            <DataTable.Col source="author_id" label="Author DOB">
+                <ReferenceField source="author_id" reference="authors">
+                    <DateField source="date_of_birth" />
+                </ReferenceField>
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 ```
@@ -219,10 +223,10 @@ const AuthorShow = () => (
             <TextField source="last_name" />
             <DateField source="date_of_birth" />
             <ReferenceManyField reference="books" target="author_id">
-                <Datagrid>
-                    <TextField source="title" />
-                    <DateField source="published_at" />
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="title" />
+                    <DataTable.Col source="published_at" field={DateField} />
+                </DataTable>
             </ReferenceManyField>
         </SimpleShowLayout>
     </Show>
@@ -231,7 +235,7 @@ const AuthorShow = () => (
 
 `<ReferenceManyField>` uses the current `record` (an author in this example) to build a filter for the list of books on the foreign key field (`author_id`). Then, it uses `dataProvider.getManyReference('books', { target: 'author_id', id: book.id })` fetch the related books.
 
-`<ReferenceManyField>` creates a `ListContext` with the related records, so you can use any component relying on this context (`<Datagrid>`, `<SimpleList>`, etc.).
+`<ReferenceManyField>` creates a `ListContext` with the related records, so you can use any component relying on this context (`<DataTable>`, `<SimpleList>`, etc.).
 
 **Tip**: For many APIs, there is no difference between `dataProvider.getList()` and `dataProvider.getManyReference()`. The latter is a specialized version of the former, with a predefined `filter`. But some APIs expose related records as a sub-route, and therefore need a special method to fetch them. For instance, the books of an author can be exposed via the following endpoint: 
 
@@ -267,10 +271,10 @@ const AuthorShow = () => (
             <TextField source="last_name" />
             <DateField source="date_of_birth" />
             <ReferenceArrayField reference="books" source="book_ids">
-                <Datagrid>
-                    <TextField source="title" />
-                    <DateField source="published_at" />
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="title" />
+                    <DataTable.Col source="published_at" field={DateField} />
+                </DataTable>
             </ReferenceArrayField>
         </SimpleShowLayout>
     </Show>
@@ -279,23 +283,25 @@ const AuthorShow = () => (
 
 `<ReferenceArrayField>` reads the list of `book_ids` in the current `record` (an author in this example). Then, it uses `dataProvider.getMany('books', { ids })` fetch the related books.
 
-`<ReferenceArrayField>` creates a `ListContext` with the related records, so you can use any component relying on this context (`<Datagrid>`, `<SimpleList>`, etc.).
+`<ReferenceArrayField>` creates a `ListContext` with the related records, so you can use any component relying on this context (`<DataTable>`, `<SimpleList>`, etc.).
 
 You can also use it in a List page:
 
 ```jsx
 const AuthorList = () => (
     <List>
-        <Datagrid>
-            <TextField source="first_name" />
-            <TextField source="last_name" />
-            <DateField source="date_of_birth" />
-            <ReferenceArrayField reference="books" source="book_ids">
-                <SingleFieldList>
-                    <TextField source="title" />
-                </SingleFieldList>
-            </ReferenceArrayField>
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="first_name" />
+            <DataTable.Col source="last_name" />
+            <DataTable.Col source="date_of_birth" field={DateField} />
+            <DataTable.Col label="Books" source="book_ids">
+                <ReferenceArrayField reference="books" source="book_ids">
+                    <SingleFieldList>
+                        <TextField source="title" />
+                    </SingleFieldList>
+                </ReferenceArrayField>
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 ```
@@ -331,10 +337,10 @@ const AuthorShow = () => (
                 through="book_authors"
                 using="author_id,book_id"
             >
-                <Datagrid>
-                    <TextField source="title" />
-                    <DateField source="published_at" />
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="title" />
+                    <DataTable.Col source="published_at" field={DateField} />
+                </DataTable>
             </ReferenceManyToManyField>
             <EditButton />
         </SimpleShowLayout>
@@ -355,13 +361,13 @@ const BookShow = props => (
                 through="book_authors"
                 using="book_id,author_id"
             >
-                <Datagrid>
-                    <FunctionField 
+                <DataTable>
+                    <DataTable.Col
                         label="Author"
                         render={record => `${record.first_name} ${record.last_name}`}
                     />
-                    <DateField source="date_of_birth" />
-                </Datagrid>
+                    <DataTable.Col source="date_of_birth" field={DateField} />
+                </DataTable>
             </ReferenceManyToManyField>
             <EditButton />
         </SimpleShowLayout>
@@ -369,7 +375,7 @@ const BookShow = props => (
 );
 ```
 
-`<ReferenceManyToManyField>` creates a `ListContext` with the related records, so you can use any component relying on this context (`<Datagrid>`, `<SimpleList>`, etc.).
+`<ReferenceManyToManyField>` creates a `ListContext` with the related records, so you can use any component relying on this context (`<DataTable>`, `<SimpleList>`, etc.).
 
 ## `<ReferenceOneField>`
 
diff --git a/docs/FilterButton.md b/docs/FilterButton.md
index 3879653b9fc..427aaa650a5 100644
--- a/docs/FilterButton.md
+++ b/docs/FilterButton.md
@@ -23,12 +23,11 @@ It's an internal component that you should only need if you build a custom List
 ```jsx
 import {
     CreateButton,
-    Datagrid,
+    DataTable,
     FilterButton,
     FilterForm,
     ListBase,
     Pagination,
-    TextField,
     TextInput,
     SearchInput
 } from 'react-admin';
@@ -52,11 +51,11 @@ const ListToolbar = () => (
 const PostList = () => (
     <ListBase>
         <ListToolbar />
-        <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>
         <Pagination />
     </ListBase>
 )
diff --git a/docs/FilterForm.md b/docs/FilterForm.md
index 24bc571a84b..8dec5b5ed1d 100644
--- a/docs/FilterForm.md
+++ b/docs/FilterForm.md
@@ -23,12 +23,11 @@ It's an internal component that you should only need if you build a custom List
 ```jsx
 import {
     CreateButton,
-    Datagrid,
+    DataTable,
     FilterButton,
     FilterForm,
     ListBase,
     Pagination,
-    TextField,
     TextInput,
     SearchInput
 } from 'react-admin';
@@ -52,11 +51,11 @@ const ListToolbar = () => (
 const PostList = () => (
     <ListBase>
         <ListToolbar />
-        <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>
         <Pagination />
     </ListBase>
 )
diff --git a/docs/FilterList.md b/docs/FilterList.md
index 21f5a17701d..227e0d6da04 100644
--- a/docs/FilterList.md
+++ b/docs/FilterList.md
@@ -153,7 +153,7 @@ const HasOrderedFilter = () => (
 
 ## Placing Filters In A Sidebar
 
-You can place these `<FilterList>` anywhere inside a `<List>`. The most common case is to put them in a sidebar that is on the left-hand side of the `Datagrid`. You can use the `aside` property for that:
+You can place these `<FilterList>` anywhere inside a `<List>`. The most common case is to put them in a sidebar that is on the left-hand side of the `<DataTable>`. You can use the `aside` property for that:
 
 {% raw %}
 ```jsx
@@ -315,7 +315,7 @@ import { Card, CardContent } from '@mui/material';
 import {
     AutocompleteInput,
     FilterLiveForm,
-    Datagrid,
+    DataTable,
     FilterList,
     FilterListItem,
     FilterListSection,
@@ -361,9 +361,9 @@ const BookListAside = () => (
 
 export const BookList = () => (
     <List aside={<BookListAside />}>
-        <Datagrid>
+        <DataTable>
             {/* ... */}
-        </Datagrid>
+        </DataTable>
     </List>
 );
 ```
diff --git a/docs/FilterLiveForm.md b/docs/FilterLiveForm.md
index 381ed7c6fb4..1c994a6138e 100644
--- a/docs/FilterLiveForm.md
+++ b/docs/FilterLiveForm.md
@@ -30,14 +30,13 @@ import { Card, CardContent } from '@mui/material';
 import {
     AutocompleteInput,
     FilterLiveForm,
-    Datagrid,
+    DataTable,
     FilterList,
     FilterListItem,
     FilterListSection,
     List,
     ReferenceField,
     ReferenceInput,
-    TextField,
     TextInput,
 } from 'react-admin';
 
@@ -76,11 +75,13 @@ const BookListAside = () => (
 
 export const BookList = () => (
     <List aside={<BookListAside />}>
-        <Datagrid>
-            <TextField source="title" />
-            <ReferenceField source="authorId" reference="authors" />
-            <TextField source="year" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+            <DataTable.Col label="Autor" source="authorId">
+                <ReferenceField source="authorId" reference="authors" />
+            </DataTable.Col>
+            <DataTable.Col source="year" />
+        </DataTable>
     </List>
 );
 ```
diff --git a/docs/FilterLiveSearch.md b/docs/FilterLiveSearch.md
index e5ffd8a6d6b..c5fdac864ac 100644
--- a/docs/FilterLiveSearch.md
+++ b/docs/FilterLiveSearch.md
@@ -71,7 +71,7 @@ import { Card, CardContent } from '@mui/material';
 import {
     AutocompleteInput,
     FilterLiveForm,
-    Datagrid,
+    DataTable,
     FilterList,
     FilterListItem,
     FilterListSection,
@@ -117,9 +117,9 @@ const BookListAside = () => (
 
 export const BookList = () => (
     <List aside={<BookListAside />}>
-        <Datagrid>
+        <DataTable>
             {/* ... */}
-        </Datagrid>
+        </DataTable>
     </List>
 );
 ```
diff --git a/docs/FilteringTutorial.md b/docs/FilteringTutorial.md
index 5b435a7f5f1..aea5920baaa 100644
--- a/docs/FilteringTutorial.md
+++ b/docs/FilteringTutorial.md
@@ -227,11 +227,9 @@ Here is an example StackedFilters configuration:
 import {
     BooleanField,
     CreateButton,
-    Datagrid,
+    DataTable,
     List,
-    NumberField,
     ReferenceArrayField,
-    TextField,
     TopToolbar,
 } from 'react-admin';
 import {
@@ -259,12 +257,14 @@ const PostListToolbar = () => (
 
 const PostList = () => (
     <List actions={<PostListToolbar />}>
-        <Datagrid>
-            <TextField source="title" />
-            <NumberField source="views" />
-            <ReferenceArrayField tags="tags" source="tag_ids" />
-            <BooleanField source="published" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+            <DataTable.NumberCol source="views" />
+            <DataTable.Col label="Tags" source="tag_ids">
+                <ReferenceArrayField tags="tags" source="tag_ids" />
+            </DataTable.Col>
+            <DataTable.Col source="published" field={BooleanField} />
+        </DataTable>
     </List>
 )
 ```
@@ -354,7 +354,7 @@ const LinkToRelatedProducts = () => {
 
 {% endraw %}
 
-You can use this button e.g. as a child of `<Datagrid>`. You can also create a custom Menu button with that technique to link to the unfiltered list by setting the filter value to `{}`.
+You can use this button e.g. as a child of `<DataTable.Col>`. You can also create a custom Menu button with that technique to link to the unfiltered list by setting the filter value to `{}`.
 
 ## Filter Operators
 
@@ -425,7 +425,7 @@ Saved Queries let users save a combination of filters and sort parameters into a
 `<SavedQueriesList>` is a complement to `<FilterList>` sections for the filter sidebar
 
 ```diff
-import { FilterList, FilterListItem, List, Datagrid } from 'react-admin';
+import { FilterList, FilterListItem, List, DataTable } from 'react-admin';
 import { Card, CardContent } from '@mui/material';
 
 +import { SavedQueriesList } from 'react-admin';
@@ -446,9 +446,9 @@ const SongFilterSidebar = () => (
 
 const SongList = () => (
     <List aside={<SongFilterSidebar />}>
-        <Datagrid>
+        <DataTable>
             ...
-        </Datagrid>
+        </DataTable>
     </List>
 );
 ```
@@ -664,4 +664,4 @@ export const PostList = () => (
 
 **Tip**: No need to pass any `filters` to the list anymore, as the `<PostFilterForm>` component will display them.
 
-You can use a similar approach to offer alternative User Experiences for data filtering, e.g. to display the filters as a line in the datagrid headers.
+You can use a similar approach to offer alternative User Experiences for data filtering, e.g. to display the filters as a line in the `<DataTable>` headers.
diff --git a/docs/FunctionField.md b/docs/FunctionField.md
index 34d9d5af4f3..bda53d03a90 100644
--- a/docs/FunctionField.md
+++ b/docs/FunctionField.md
@@ -35,6 +35,8 @@ Theoretically, you can omit the `source` for the `<FunctionField>` since you pro
 
 `<FunctionField>` is based on [the `useRecordContext` hook](./useRecordContext.md).
 
+**Tip:** You don't need to use `<FunctionField>` if you are using [`<DataTable>`](./DataTable.md), as the [`<DataTable.Col>`](./DataTable.md#datatablecol) component directly provides a [`render`](./DataTable.md#render) prop that works similarly to `<FunctionField>`.
+
 ## Props
 
 | Prop     | Required | Type     | Default | Description                                                                |
diff --git a/docs/InfiniteList.md b/docs/InfiniteList.md
index 5ec4245c35e..ad279182768 100644
--- a/docs/InfiniteList.md
+++ b/docs/InfiniteList.md
@@ -12,7 +12,7 @@ The `<InfiniteList>` component is an alternative to [the `<List>` component](./L
   Your browser does not support the video tag.
 </video>
 
-`<InfiniteList>` fetches the list of records from the data provider, and renders the default list layout (title, buttons, filters). It delegates the rendering of the list of records to its child component. Usually, it's a [`<Datagrid>`](./Datagrid.md) or a [`<SimpleList>`](./SimpleList.md), responsible for displaying a table with one row for each record.
+`<InfiniteList>` fetches the list of records from the data provider, and renders the default list layout (title, buttons, filters). It delegates the rendering of the list of records to its child component. Usually, it's a [`<DataTable>`](./DataTable.md) or a [`<SimpleList>`](./SimpleList.md), responsible for displaying a table with one row for each record.
 
 ## Usage
 
@@ -20,15 +20,15 @@ Here is the minimal code necessary to display a list of books with infinite scro
 
 ```jsx
 // in src/books.js
-import { InfiniteList, Datagrid, TextField, DateField } from 'react-admin';
+import { InfiniteList, DataTable, DateField } from 'react-admin';
 
 export const BookList = () => (
     <InfiniteList>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="author" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author" field={DateField} />
+        </DataTable>
     </InfiniteList>
 );
 
@@ -49,7 +49,7 @@ export default App;
 
 That's enough to display a basic post list, that users can sort and filter, and load additional records when they reach the bottom of the list.
 
-**Tip**: `<Datagrid>` has a sticky header by default, so the user can always see the column names when they scroll down.
+**Tip**: `<DataTable>` has a sticky header by default, so the user can always see the column names when they scroll down.
 
 ## Props
 
@@ -93,7 +93,7 @@ For example, here is a custom infinite pagination component displaying a "Load M
 
 {% raw %}
 ```jsx
-import { InfiniteList, useInfinitePaginationContext, Datagrid, TextField } from 'react-admin';
+import { InfiniteList, useInfinitePaginationContext, DataTable } from 'react-admin';
 import { Box, Button } from '@mui/material';
 
 const LoadMore = () => {
@@ -116,11 +116,11 @@ const LoadMore = () => {
 
 export const BookList = () => (
     <InfiniteList pagination={<LoadMore />}>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <TextField source="author" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author" />
+        </DataTable>
     </InfiniteList>
 );
 ```
@@ -280,16 +280,16 @@ If your `authProvider` implements [Access Control](./Permissions.md#access-contr
 For instance, for the `<PostList>` page below:
 
 ```tsx
-import { InfiniteList, Datagrid, TextField } from 'react-admin';
+import { InfiniteList, DataTable } from 'react-admin';
 
 // Resource name is "posts"
 const PostList = () => (
     <InfiniteList>
-        <Datagrid>
-            <TextField source="title" />
-            <TextField source="author" />
-            <TextField source="published_at" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author" />
+            <DataTable.Col source="published_at" />
+        </DataTable>
     </InfiniteList>
 );
 ```
diff --git a/docs/List.md b/docs/List.md
index ac39b38a4b7..0e38249bec0 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -5,27 +5,27 @@ title: "The List Component"
 
 # `<List>`
 
-The `<List>` component is the root component for list pages. It fetches a list of records from the data provider, puts it in a [`ListContext`](./useListContext.md), renders the default list page layout (title, buttons, filters, pagination), and renders its children. Usual children of `<List>`, like [`<Datagrid>`](./Datagrid.md), are responsible for displaying the list of records.
+The `<List>` component is the root component for list pages. It fetches a list of records from the data provider, puts it in a [`ListContext`](./useListContext.md), renders the default list page layout (title, buttons, filters, pagination), and renders its children. Usual children of `<List>`, like [`<DataTable>`](./DataTable.md), are responsible for displaying the list of records.
 
 <iframe src="https://www.youtube-nocookie.com/embed/NNNPPmEMz6s" 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%;"></iframe>
 
 ## Usage
 
-Here is the minimal code necessary to display a list of posts using a [`<Datagrid>`](./Datagrid.md):
+Here is the minimal code necessary to display a list of posts using a [`<DataTable>`](./DataTable.md):
 
 ```jsx
 // in src/posts.jsx
-import { List, Datagrid, TextField, DateField, BooleanField } from 'react-admin';
+import { List, DataTable, DateField, BooleanField } from 'react-admin';
 
 export const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="published_at" />
-            <TextField source="category" />
-            <BooleanField source="commentable" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="published_at" field={DateField} />
+            <DataTable.Col source="category" />
+            <DataTable.Col source="commentable" field={BooleanField} />
+        </DataTable>
     </List>
 );
 
@@ -268,43 +268,45 @@ export const PostList = () => (
 
 ![List children](./img/list-children.webp)
 
-The most common List child is [`<Datagrid>`](./Datagrid.md):
+The most common List child is [`<DataTable>`](./DataTable.md):
 
 ```jsx
 export const BookList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="published_at" />
-            <ReferenceManyCount label="Nb comments" reference="comments" target="post_id" link />
-            <BooleanField source="commentable" label="Com." />
-            <NumberField source="nb_views" label="Views" />
-            <>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="published_at" field={DateField} />
+            <DataTable.Col label="Nb comments">
+                <ReferenceManyCount reference="comments" target="post_id" link />
+            </DataTable.Col>
+            <DataTable.Col source="commentable" label="Com." field={BooleanField} />
+            <DataTable.NumberCol source="nb_views" label="Views" />
+            <DataTable.Col>
                 <EditButton />
                 <ShowButton />
-            </>
-        </Datagrid>
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 ```
 
 React-admin provides several components that can read and display a list of records from a `ListContext`, each with a different layout:
 
-- [`<Datagrid>`](./Datagrid.md) displays records in a table
+- [`<DataTable>`](./DataTable.md) displays records in a table
 - [`<EditableDatagrid>`](./EditableDatagrid.md) displays records in a table AND lets users edit them inline
 - [`<SimpleList>`](./SimpleList.md) displays records in a list without many details - suitable for mobile devices
 - [`<Tree>`](./TreeWithDetails.md) displays records in a tree structure
 - [`<Calendar>`](./Calendar.md) displays event records in a calendar
 - [`<SingleFieldList>`](./SingleFieldList.md) displays records inline, showing one field per record
 
-So for instance, you can use a `<SimpleList>` instead of a `<Datagrid>` on mobile devices:
+So for instance, you can use a `<SimpleList>` instead of a `<DataTable>` on mobile devices:
 
 ```jsx
 // in src/posts.js
 import * as React from 'react';
 import { useMediaQuery } from '@mui/material';
-import { List, SimpleList, Datagrid, TextField, ReferenceField } from 'react-admin';
+import { List, SimpleList, DataTable, TextField, ReferenceField } from 'react-admin';
 
 export const PostList = () => {
     const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));
@@ -317,14 +319,16 @@ 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" />
-                </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>
             )}
         </List>
     );
@@ -358,7 +362,7 @@ Check [Building a custom List Iterator](./ListTutorial.md#building-a-custom-iter
 
 ## `component`
 
-By default, the List view renders the main content area inside a Material UI `<Card>` element. The actual layout of the list depends on the child component you're using (`<Datagrid>`, `<SimpleList>`, or a custom layout component).
+By default, the List view renders the main content area inside a Material UI `<Card>` element. The actual layout of the list depends on the child component you're using (`<DataTable>`, `<SimpleList>`, or a custom layout component).
 
 Some List layouts display each record in a `<Card>`, in which case the user ends up seeing a card inside a card, which is bad UI. To avoid that, you can override the main area container by passing a `component` prop:
 
@@ -527,7 +531,7 @@ const ProductList = () => (
 
 ## `emptyWhileLoading`
 
-Default layout components (`<Datagrid>` and `<SimpleList>`) return null when the data is loading. If you use a custom layout component instead, you'll have to handle the case where the `data` is not yet defined.
+Default layout components (`<DataTable>` and `<SimpleList>`) return null when the data is loading. If you use a custom layout component instead, you'll have to handle the case where the `data` is not yet defined.
 
 That means that the following will fail on load with a "ReferenceError: data is not defined" error:
 
@@ -667,7 +671,7 @@ const CommentList = () => (
 
 **Tip**: The `<ExportButton>` limits the main request to the `dataProvider` to 1,000 records. If you want to increase or decrease this limit, pass a `maxResults` prop to the `<ExportButton>` in a custom `<ListActions>` component.
 
-**Tip**: React-admin also provides a `<BulkExportButton>` component that depends on the `exporter`, and that you can use in the `bulkActionButtons` prop of the `<Datagrid>` component.
+**Tip**: React-admin also provides a `<BulkExportButton>` component that depends on the `exporter`, and that you can use in the `bulkActionButtons` prop of the `<DataTable>` component.
 
 **Tip**: For complex (or large) exports, fetching all the related records and assembling them client-side can be slow. In that case, create the CSV on the server side, and replace the `<ExportButton>` component by a custom one, fetching the CSV route.
 
@@ -921,8 +925,7 @@ import {
     CustomRoutes,
     Resource,
     List,
-    Datagrid,
-    TextField,
+    DataTable,
 } from 'react-admin';
 import { Route } from 'react-router-dom';
 
@@ -932,12 +935,12 @@ const NewerBooks = () => (
         storeKey="newerBooks"
         sort={{ field: 'year', order: 'DESC' }}
     >
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <TextField source="author" />
-            <TextField source="year" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author" />
+            <DataTable.Col source="year" />
+        </DataTable>
     </List>
 );
 
@@ -947,12 +950,12 @@ const OlderBooks = () => (
         storeKey="olderBooks"
         sort={{ field: 'year', order: 'ASC' }}
     >
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <TextField source="author" />
-            <TextField source="year" />
-        </Datagrid>
+        <DataTable>
+            <DataTable source="id" />
+            <DataTable source="title" />
+            <DataTable source="author" />
+            <DataTable source="year" />
+        </DataTable>
     </List>
 );
 
@@ -1042,7 +1045,7 @@ const App = () => (
 );
 ```
 
-Just like `<List>`, `<ListGuesser>` fetches the data. It then analyzes the response, and guesses the fields it should use to display a basic `<Datagrid>` with the data. It also dumps the components it has guessed in the console, so you can copy it into your own code.
+Just like `<List>`, `<ListGuesser>` fetches the data. It then analyzes the response, and guesses the fields it should use to display a basic `<DataTable>` with the data. It also dumps the components it has guessed in the console, so you can copy it into your own code.
 
 ![Guessed List](./img/guessed-list.png)
 
@@ -1063,19 +1066,18 @@ To achieve infinite pagination, replace the `<List>` component with [the `<Infin
 import {
 -   List,
 +   InfiniteList,
-    Datagrid,
-    TextField,
+    DataTable,
     DateField
 } from 'react-admin';
 
 const BookList = () => (
 -   <List>
 +   <InfiniteList>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="author" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author" field={DateField} />
+        </DataTable>
 -   </List>
 +   </InfiniteList>
 );
@@ -1088,14 +1090,14 @@ const BookList = () => (
 If you want to subscribe to live updates on the list of records (topic: `resource/[resource]`), add [the `<ListLiveUpdate>` component](./ListLiveUpdate.md) in your `<List>` children.
 
 ```diff
-import { List, Datagrid, TextField } from 'react-admin';
+import { List, DataTable } from 'react-admin';
 +import { ListLiveUpdate } from '@react-admin/ra-realtime';
 
 const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="title" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+        </DataTable>
 +       <ListLiveUpdate />
     </List>
 );
@@ -1259,11 +1261,11 @@ const Dashboard = () => (
 - [`<ReferenceManyField>`](./ReferenceManyField.md),
 - [`<ReferenceManyToManyField>`](./ReferenceManyToManyField.md).
 
-If the `<List>` children allow to *modify* the list state (i.e. if they let users change the sort order, the filters, the selection, or the pagination), then you should also use the [`disableSyncWithLocation`](#disablesyncwithlocation) prop to prevent react-admin from changing the URL. This is the case e.g. if you use a `<Datagrid>`, which lets users sort the list by clicking on column headers.
+If the `<List>` children allow to *modify* the list state (i.e. if they let users change the sort order, the filters, the selection, or the pagination), then you should also use the [`disableSyncWithLocation`](#disablesyncwithlocation) prop to prevent react-admin from changing the URL. This is the case e.g. if you use a `<DataTable>`, which lets users sort the list by clicking on column headers.
 
 {% raw %}
 ```jsx
-import { List, Datagrid, TextField, NumberField, DateField } from 'react-admin';
+import { List, DataTable, DateField } from 'react-admin';
 import { Container, Typography } from '@mui/material';
 
 const Dashboard = () => (
@@ -1276,10 +1278,10 @@ const Dashboard = () => (
             perPage={10}
             disableSyncWithLocation
         >
-            <Datagrid bulkActionButtons={false}>
-                <TextField source="title" />
-                <NumberField source="views" />
-            </Datagrid>
+            <DataTable bulkActionButtons={false}>
+                <DataTable.Col source="title" />
+                <DataTable.NumberCol source="views" />
+            </DataTable>
         </List>
         <Typography>Latest comments</Typography>
         <List
@@ -1288,18 +1290,18 @@ const Dashboard = () => (
             perPage={10}
             disableSyncWithLocation
         >
-            <Datagrid bulkActionButtons={false}>
-                <TextField source="author.name" />
-                <TextField source="body" />
-                <DateField source="published_at" />
-            </Datagrid>
+            <DataTable bulkActionButtons={false}>
+                <DataTable.Col source="author.name" />
+                <DataTable.Col source="body" />
+                <DataTable.Col source="published_at" field={DateField} />
+            </DataTable>
         </List>
     </Container>
 )
 ```
 {% endraw %}
 
-**Note**: If you render more than one `<Datagrid>` for the same resource in the same page, they will share the selection state (i.e. the checked checkboxes). This is a design choice because if row selection is not tied to a resource, then when a user deletes a record it may remain selected without any ability to unselect it. You can get rid of the checkboxes by setting `<Datagrid bulkActionButtons={false}>`.
+**Note**: If you render more than one `<DataTable>` for the same resource in the same page, they will share the selection state (i.e. the checked checkboxes). This is a design choice because if row selection is not tied to a resource, then when a user deletes a record it may remain selected without any ability to unselect it. You can get rid of the checkboxes by setting `<DataTable bulkActionButtons={false}>`.
 
 ## Headless Version
 
@@ -1387,16 +1389,16 @@ If your `authProvider` implements [Access Control](./Permissions.md#access-contr
 For instance, to render the `<PostList>` page below:
 
 ```tsx
-import { List, Datagrid, TextField } from 'react-admin';
+import { List, DataTable } from 'react-admin';
 
 // Resource name is "posts"
 const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="title" />
-            <TextField source="author" />
-            <TextField source="published_at" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author" />
+            <DataTable.Col source="published_at" />
+        </DataTable>
     </List>
 );
 ```
diff --git a/docs/ListBase.md b/docs/ListBase.md
index 3ad07b1a73e..c28f623df0d 100644
--- a/docs/ListBase.md
+++ b/docs/ListBase.md
@@ -21,7 +21,7 @@ import {
     Title,
     ListToolbar,
     Pagination,
-    Datagrid,
+    DataTable,
 } from 'react-admin';
 import { Card } from '@mui/material';
 
@@ -41,9 +41,9 @@ const MyList = ({ children, actions, filters, title, ...props }) => (
 
 const PostList = () => (
     <MyList title="Post List">
-        <Datagrid>
+        <DataTable>
             ...
-        </Datagrid>
+        </DataTable>
     </MyList>
 );
 ```
@@ -78,16 +78,16 @@ If your `authProvider` implements [Access Control](./Permissions.md#access-contr
 For instance, for the `<PostList>` page below:
 
 ```tsx
-import { ListBase, Datagrid, TextField } from 'react-admin';
+import { ListBase, DataTable } from 'react-admin';
 
 // Resource name is "posts"
 const PostList = () => (
     <ListBase>
-        <Datagrid>
-            <TextField source="title" />
-            <TextField source="author" />
-            <TextField source="published_at" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author" />
+            <DataTable.Col source="published_at" />
+        </DataTable>
     </ListBase>
 );
 ```
diff --git a/docs/ListGuesser.md b/docs/ListGuesser.md
index a1f53fb0504..608269de319 100644
--- a/docs/ListGuesser.md
+++ b/docs/ListGuesser.md
@@ -9,7 +9,7 @@ Use `<ListGuesser>` to quickly bootstrap a List view on top of an existing API,
 
 <iframe src="https://www.youtube-nocookie.com/embed/zImWX8HBr7A" 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>
 
-Just like [`<List>`](./List.md), `<ListGuesser>` fetches the data. It then analyzes the response, and guesses the fields it should use to display a basic `<Datagrid>` with the data. It also dumps the components it has guessed in the console, so you can copy it into your own code.
+Just like [`<List>`](./List.md), `<ListGuesser>` fetches the data. It then analyzes the response, and guesses the fields it should use to display a basic `<DataTable>` with the data. It also dumps the components it has guessed in the console, so you can copy it into your own code.
 
 ![Guessed List](./img/guessed-list.png)
 
diff --git a/docs/ListLiveUpdate.md b/docs/ListLiveUpdate.md
index 7323e85efda..2774a41a096 100644
--- a/docs/ListLiveUpdate.md
+++ b/docs/ListLiveUpdate.md
@@ -14,14 +14,14 @@ title: "ListLiveUpdate"
 Add the `<ListLiveUpdate>` in your `<List>` children:
 
 ```jsx
-import { Datagrid, List TextField } from 'react-admin';
+import { DataTable, List } from 'react-admin';
 import { ListLiveUpdate } from '@react-admin/ra-realtime';
 
 const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="title" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+        </DataTable>
         <ListLiveUpdate />
     </List>
 );
@@ -42,7 +42,7 @@ To trigger refreshes of `<ListLiveUpdate>`, the API has to publish events contai
 
 This also works with [`<ReferenceManyField>`](https://marmelab.com/react-admin/ReferenceManyField.html) or [`<ReferenceArrayField>`](https://marmelab.com/react-admin/ReferenceArrayField.html):
 ```tsx
-import { Show, SimpleShowLayout, ReferenceManyField, Datagrid, TextField, DateField } from 'react-admin';
+import { Show, SimpleShowLayout, ReferenceManyField, DataTable, TextField, DateField } from 'react-admin';
 import { ListLiveUpdate } from '@react-admin/ra-realtime';
 const AuthorShow = () => (
     <Show>
@@ -50,10 +50,10 @@ const AuthorShow = () => (
             <TextField source="first_name" />
             <TextField source="last_name" />
             <ReferenceManyField reference="books" target="author_id" label="Books">
-              <Datagrid>
-                <TextField source="title" />
-                <DateField source="published_at" />
-              </Datagrid>
+              <DataTable>
+                <DataTable.Col source="title" />
+                <DataTable.Col source="published_at" field={DateField} />
+              </DataTable>
               <ListLiveUpdate />
             </ReferenceManyField>
         </SimpleShowLayout>
@@ -66,7 +66,7 @@ const AuthorShow = () => (
 The `<ListLiveUpdate>` allows you to customize the side effects triggered when it receives a new event, by passing a function to the `onEventReceived` prop:
 
 ```jsx
-import { Datagrid, List, TextField, useNotify, useRefresh } from 'react-admin';
+import { DataTable, List, useNotify, useRefresh } from 'react-admin';
 import { ListLiveUpdate } from '@react-admin/ra-realtime';
 
 const PostList = () => {
@@ -81,9 +81,9 @@ const PostList = () => {
 
     return (
         <List>
-            <Datagrid>
-                <TextField source="title" />
-            </Datagrid>
+            <DataTable>
+                <DataTable.Col source="title" />
+            </DataTable>
             <ListLiveUpdate onEventReceived={handleEventReceived} />
         </List>
     );
diff --git a/docs/ListTutorial.md b/docs/ListTutorial.md
index b5192fb6cd8..dc25b8b4270 100644
--- a/docs/ListTutorial.md
+++ b/docs/ListTutorial.md
@@ -100,15 +100,15 @@ This example uses the `useGetList` hook instead of `fetch` because `useGetList`
 
 This list is a bit rough in the edges (for instance, typing in the search input makes one call to the dataProvider per character), but it's good enough for the purpose of this chapter. 
 
-### `<Datagrid>` Displays Fields In A Table
+### `<DataTable>` Displays Fields In A Table
 
-Table layouts usually require a lot of code to define the table head, row, columns, etc. React-admin `<Datagrid>` component, together with Field components, can help remove that boilerplate:
+Table layouts usually require a lot of code to define the table head, row, columns, etc. React-admin `<DataTable>` component can help remove that boilerplate:
 
 {% raw %}
 ```diff
 import { useState } from 'react';
 -import { Title, useGetList } from 'react-admin';
-+import { Title, useGetList, Datagrid, TextField } from 'react-admin';
++import { Title, useGetList, DataTable } from 'react-admin';
 import {
     Card,
     TextField as MuiTextField,
@@ -166,12 +166,12 @@ const BookList = () => {
 -                       ))}
 -                   </TableBody>
 -               </Table>
-+               <Datagrid data={data} sort={sort}>
-+                   <TextField source="id" />
-+                   <TextField source="title" />
-+                   <TextField source="author" />
-+                   <TextField source="year" />
-+               </Datagrid>
++               <DataTable data={data} sort={sort}>
++                   <DataTable.Col source="id" />
++                   <DataTable.Col source="title" />
++                   <DataTable.Col source="author" />
++                   <DataTable.Col source="year" />
++               </DataTable>
             </Card>
             <Toolbar>
                 {page > 1 && <Button onClick={() => setPage(page - 1)}>Previous page</Button>}
@@ -183,11 +183,11 @@ const BookList = () => {
 ```
 {% endraw %}
 
-`<Datagrid>` does more than the previous table: it renders table headers depending on the current sort, and allows you to change the sort order by clicking a column header. Also, for each row, `<Datagrid>` creates a `RecordContext`, which lets you use react-admin Field and Buttons without explicitly passing the row data.
+`<DataTable>` does more than the previous table: it renders table headers depending on the current sort, and allows you to change the sort order by clicking a column header. Also, for each row, `<DataTable>` creates a `RecordContext`, which lets you use react-admin Field and Buttons without explicitly passing the row data.
 
 ### `ListContext` Exposes List Data To Descendants
 
-`<Datagrid>` requires a `data` prop to render, but it can grab it from a `ListContext` instead. Creating such a context with `<ListContextProvider>` also allows to use other react-admin components specialized in filtering (`<FilterForm>`) and pagination (`<Pagination>`), and to reduce the boilerplate code even further:
+`<DataTable>` requires a `data` prop to render, but it can grab it from a `ListContext` instead. Creating such a context with `<ListContextProvider>` also allows to use other react-admin components specialized in filtering (`<FilterForm>`) and pagination (`<Pagination>`), and to reduce the boilerplate code even further:
 
 {% raw %}
 ```diff
@@ -195,8 +195,7 @@ import { useState } from 'react';
 import { 
     Title,
     useGetList,
-    Datagrid,
-    TextField,
+    DataTable,
 +   ListContextProvider,
 +   FilterForm,
 +   Pagination,
@@ -237,13 +236,13 @@ const BookList = () => {
 -           />
 +           <FilterForm filters={filters} />
             <Card>
--               <Datagrid data={data} sort={sort}>
-+               <Datagrid>
-                    <TextField source="id" />
-                    <TextField source="title" />
-                    <TextField source="author" />
-                    <TextField source="year" />
-                </Datagrid>
+-               <DataTable data={data} sort={sort}>
++               <DataTable>
+                    <DataTable.Col source="id" />
+                    <DataTable.Col source="title" />
+                    <DataTable.Col source="author" />
+                    <DataTable.Col source="year" />
+                </DataTable>
             </Card>
 -           <Toolbar>
 -               {page > 1 && <Button onClick={() => setPage(page - 1)}>Previous page</Button>}
@@ -268,8 +267,7 @@ import {
     Title,
 -   useGetList,
 +   useListController,
-    Datagrid,
-    TextField,
+    DataTable,
     ListContextProvider,
     FilterForm,
     Pagination,
@@ -304,12 +302,12 @@ const BookList = () => {
                 <Title title="Book list" />
                 <FilterForm filters={filters} />
                 <Card>
-                    <Datagrid>
-                        <TextField source="id" />
-                        <TextField source="title" />
-                        <TextField source="author" />
-                        <TextField source="year" />
-                    </Datagrid>
+                    <DataTable>
+                        <DataTable.Col source="id" />
+                        <DataTable.Col source="title" />
+                        <DataTable.Col source="author" />
+                        <DataTable.Col source="year" />
+                    </DataTable>
                 </Card>
                 <Pagination />
             </div>
@@ -340,8 +338,7 @@ As calling the List controller and putting its result into a context is also com
 import { 
     Title,
 -   useListController,
-    Datagrid,
-    TextField,
+    DataTable,
 -   ListContextProvider,
 +   ListBase,
     FilterForm,
@@ -365,12 +362,12 @@ const BookList = () => {
                 <Title title="Book list" />
                 <FilterForm filters={filters} />
                 <Card>
-                    <Datagrid>
-                        <TextField source="id" />
-                        <TextField source="title" />
-                        <TextField source="author" />
-                        <TextField source="year" />
-                    </Datagrid>
+                    <DataTable>
+                        <DataTable.Col source="id" />
+                        <DataTable.Col source="title" />
+                        <DataTable.Col source="author" />
+                        <DataTable.Col source="year" />
+                    </DataTable>
                 </Card>
                 <Pagination />
             </div>
@@ -380,7 +377,7 @@ const BookList = () => {
 };
 ```
 
-Notice that we're not handling the loading state manually anymore. In fact, the `<Datagrid>` component can render a skeleton while the data is being fetched.
+Notice that we're not handling the loading state manually anymore. In fact, the `<DataTable>` component can render a skeleton while the data is being fetched.
 
 ### `useListContext` Accesses The List Context
 
@@ -412,8 +409,7 @@ import {
 -   Title,
 -   ListBase,
 +   List,
-    Datagrid,
-    TextField,
+    DataTable,
 -   FilterForm,
 -   Pagination,
     TextInput
@@ -429,12 +425,12 @@ const BookList = () => (
 -           <FilterForm filters={filters} />
 -           <Card>
 +    <List filters={filters}>
-                <Datagrid>
-                    <TextField source="id" />
-                    <TextField source="title" />
-                    <TextField source="author" />
-                    <TextField source="year" />
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="id" />
+                    <DataTable.Col source="title" />
+                    <DataTable.Col source="author" />
+                    <DataTable.Col source="year" />
+                </DataTable>
 -           </Card>
 -           <Pagination />
 -       </div>
@@ -450,8 +446,7 @@ Remember the first snippet in this page? The react-admin version is much shorter
 ```tsx
 import { 
     List,
-    Datagrid,
-    TextField,
+    DataTable,
     TextInput
 } from 'react-admin';
 
@@ -459,12 +454,12 @@ const filters = [<TextInput label="Search" source="q" size="small" alwaysOn />];
 
 const BookList = () => (
     <List filters={filters}>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <TextField source="author" />
-            <TextField source="year" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author" />
+            <DataTable.Col source="year" />
+        </DataTable>
     </List>
 );
 ```
@@ -473,9 +468,9 @@ By encapsulating common CRUD logic, react-admin reduces the amount of code you n
 
 ## `<ListGuesser>`: Zero-Configuration List
 
-Sometimes typing `<Datagrid>` and a few `<Field>` components is too much - for instance if you want to prototype an admin for many resources, or search data through an API without worrying about the actual data structure.
+Sometimes typing `<DataTable>` and a few `<Field>` components is too much - for instance if you want to prototype an admin for many resources, or search data through an API without worrying about the actual data structure.
 
-For these cases, react-admin provides a `<ListGuesser>` component that will guess the datagrid columns from the data. It's a bit like the `<List>` component, but it doesn't require any configuration.
+For these cases, react-admin provides a `<ListGuesser>` component that will guess the `<DataTable>` columns from the data. It's a bit like the `<List>` component, but it doesn't require any configuration.
 
 ```tsx
 import { Admin, Resource, ListGuesser } from 'react-admin';
@@ -492,9 +487,9 @@ const App = () => (
 
 ## List Iterators
 
-The components you can use as child of `<List>` are called "List Iterator". They render a list of records. `<Datagrid>` is such a List Iterator, but react-admin provides many more:
+The components you can use as child of `<List>` are called "List Iterator". They render a list of records. `<DataTable>` is such a List Iterator, but react-admin provides many more:
 
-- [`<Datagrid>`](./Datagrid.md)
+- [`<DataTable>`](./DataTable.md)
 - [`<DatagridAG>`](./DatagridAG.md)
 - [`<SimpleList>`](./SimpleList.md)
 - [`<SingleFieldList>`](./SingleFieldList.md)
@@ -506,7 +501,7 @@ If that's not enough, [building a custom iterator](#building-a-custom-iterator)
 
 ## Responsive Lists
 
-On Mobile, `<Datagrid>` doesn't work well - the screen is too narrow. You should use [the  `<SimpleList>` component](./SimpleList.md) instead - it's another built-in List Iterator.
+On Mobile, `<DataTable>` doesn't work well - the screen is too narrow. You should use [the  `<SimpleList>` component](./SimpleList.md) instead - it's another built-in List Iterator.
 
 <video controls autoplay playsinline muted loop style="height:300px">
     <source src="./img/simple-list.webm" type="video/webm"/>
@@ -514,13 +509,13 @@ On Mobile, `<Datagrid>` doesn't work well - the screen is too narrow. You should
     Your browser does not support the video tag.
 </video>
 
-To use `<Datagrid>` on desktop and `<SimpleList>` on mobile, use the `useMediaQuery` hook:
+To use `<DataTable>` on desktop and `<SimpleList>` on mobile, use the `useMediaQuery` hook:
 
 ```tsx
 // in src/posts.tsx
 import * as React from 'react';
 import { useMediaQuery, Theme } from '@mui/material';
-import { List, SimpleList, Datagrid, TextField, ReferenceField } from 'react-admin';
+import { List, SimpleList, DataTable, TextField, ReferenceField } from 'react-admin';
 
 type Post = {
     id: number;
@@ -542,14 +537,16 @@ 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" />
-                </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>
             )}
         </List>
     );
@@ -560,7 +557,7 @@ Check [the dedicated `useMediaQuery` documentation](./useMediaQuery.md) for more
 
 ## Building a Custom Iterator
 
-In some cases, neither the `<Datagrid>` nor the `<SimpleList>` components allow to display the records in an optimal way for a given task. In these cases, pass your layout component directly as children of the `<List>` component. 
+In some cases, neither the `<DataTable>` nor the `<SimpleList>` components allow to display the records in an optimal way for a given task. In these cases, pass your layout component directly as children of the `<List>` component. 
 
 As `<List>` takes care of fetching the data and putting it in a `ListContext`, you can leverage [the `<WithListContext>` component](./WithListContext.md) to get the list data in a render prop. 
 
@@ -671,7 +668,7 @@ sort=published_at
 order=DESC
 ```
 
-If you're using a `<Datagrid>` inside the List view, then the column headers are buttons allowing users to change the list sort field and order. This feature requires no configuration and works out fo the box. Check [the `<Datagrid>` documentation](./Datagrid.md#customizing-column-sort) to see how to disable or modify the field used for sorting on a particular column.
+If you're using a `<DataTable>` inside the List view, then the column headers are buttons allowing users to change the list sort field and order. This feature requires no configuration and works out fo the box. Check [the `<DataTable>` documentation](./DataTable.md#customizing-column-sort) to see how to disable or modify the field used for sorting on a particular column.
 
 <video controls autoplay playsinline muted loop>
   <source src="./img/sort-column-header.webm" type="video/webm"/>
@@ -726,7 +723,7 @@ const SortByViews = () => (
 
 ## Building a Custom Sort Control
 
-When neither the `<Datagrid>` or the `<SortButton>` fit your UI needs, you have to write a custom sort control. As with custom filters, this boils down to grabbing the required data and callbacks from the `ListContext`. Let's use the `<SortButton>` source as an example usage of `sort` and `setSort`:
+When neither the `<DataTable>` or the `<SortButton>` fit your UI needs, you have to write a custom sort control. As with custom filters, this boils down to grabbing the required data and callbacks from the `ListContext`. Let's use the `<SortButton>` source as an example usage of `sort` and `setSort`:
 
 ```tsx
 import * as React from 'react';
diff --git a/docs/NumberField.md b/docs/NumberField.md
index 3ddb07150ca..727a18c8aea 100644
--- a/docs/NumberField.md
+++ b/docs/NumberField.md
@@ -38,6 +38,8 @@ const PostList = () => (
 
 ![NumberField](./img/number-field.webp)`
 
+**Tip:** If you are in a [`<DataTable>`](./DataTable.md), you can use [`<DataTable.NumberCol>`](./DataTable.md#datatablenumbercol) instead to achieve the same result.
+
 `<NumberField>` works for values that are numbers (e.g. `2108`) or strings that convert to numbers (e.g. `'2108'`).
 
 `<NumberField>` uses `Intl.NumberFormat()` if available, passing the `locales` and `options` props as arguments. This allows a perfect display of decimals, currencies, percentages, etc. See [Intl.NumberFormat documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat) for the `options` prop syntax.
diff --git a/docs/Pagination.md b/docs/Pagination.md
index e7af0b1a344..1b0bee0a94f 100644
--- a/docs/Pagination.md
+++ b/docs/Pagination.md
@@ -66,19 +66,18 @@ To achieve this, you can use the `<InfiniteList>` component instead of the `<Lis
 import {
 -   List,
 +   InfiniteList,
-    Datagrid,
-    TextField,
+    DataTable,
     DateField
 } from 'react-admin';
 
 const BookList = () => (
 -   <List>
 +   <InfiniteList>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="author" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author" field={DateField} />
+        </DataTable>
 -   </List>
 +   </InfiniteList>
 );
diff --git a/docs/Realtime.md b/docs/Realtime.md
index 2d13c2b98f0..7223e453cb4 100644
--- a/docs/Realtime.md
+++ b/docs/Realtime.md
@@ -59,20 +59,18 @@ For instance, include a `<ListLiveUpdate>` within a `<List>` to have a list refr
 ```diff
 import {
     List,
-    Datagrid,
-    TextField,
-    NumberField,
+    DataTable,
     Datefield,
 } from 'react-admin';
 +import { ListLiveUpdate } from '@react-admin/ra-realtime';
 
 const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="title" />
-            <NumberField source="views" />
-            <DateField source="published_at" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+            <DataTable.NumberCol source="views" />
+            <DataTable.Col source="published_at" field={DateField} />
+        </DataTable>
 +       <ListLiveUpdate />
     </List>
 );
diff --git a/docs/RealtimeDataProvider.md b/docs/RealtimeDataProvider.md
index 043a76e3cca..4cde91926f7 100644
--- a/docs/RealtimeDataProvider.md
+++ b/docs/RealtimeDataProvider.md
@@ -40,7 +40,7 @@ This adapter subscribes to [Postgres Changes](https://supabase.com/docs/guides/r
 import { createClient } from '@supabase/supabase-js';
 import { supabaseDataProvider } from 'ra-supabase';
 import { addRealTimeMethodsBasedOnSupabase, ListLiveUpdate } from '@react-admin/ra-realtime';
-import { Admin, Resource, Datagrid, List, TextField, EmailField } from 'react-admin';
+import { Admin, Resource, DataTable, List, EmailField } from 'react-admin';
 
 const supabaseClient = createClient(
     process.env.SUPABASE_URL,
@@ -66,12 +66,12 @@ export const App = () => (
 
 const SaleList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="first_name" />
-            <TextField source="last_name" />
-            <EmailField source="email" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="first_name" />
+            <DataTable.Col source="last_name" />
+            <DataTable.Col source="email" field={EmailField} />
+        </DataTable>
         <ListLiveUpdate />
     </List>
 );
@@ -116,7 +116,7 @@ Have a look at the Supabase [Replication Setup](https://supabase.com/docs/guides
 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:
 
 ```jsx
-import { Datagrid, EditButton, List, ListProps } from 'react-admin';
+import { DataTable, EditButton, List, ListProps } from 'react-admin';
 import {
     HydraAdmin,
     ResourceGuesser,
@@ -153,10 +153,12 @@ const App = () => (
 // Example for connecting a list of greetings
 const GreetingsList = () => (
     <List>
-        <Datagrid>
-            <FieldGuesser source="name" />
-            <EditButton />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="name" field={FieldGuesser} />
+            <DataTable.Col>
+                <EditButton />
+            </DataTable.Col>
+        </DataTable>
         <ListLiveUpdate />
     </List>
 );
diff --git a/docs/ReferenceArrayField.md b/docs/ReferenceArrayField.md
index df5804a09d0..1dc47aea81a 100644
--- a/docs/ReferenceArrayField.md
+++ b/docs/ReferenceArrayField.md
@@ -46,16 +46,20 @@ A typical `post` record therefore looks like this:
 In that case, use `<ReferenceArrayField>` to display the post tag names as Chips as follows:
 
 ```jsx
-import { List, Datagrid, ReferenceArrayField, TextField } from 'react-admin';
+import { List, DataTable, ReferenceArrayField } from 'react-admin';
 
 export const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <ReferenceArrayField reference="tags" source="tag_ids" label="Tags" />
-            <EditButton />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="tag_ids" label="Tags">
+                <ReferenceArrayField reference="tags" source="tag_ids" />
+            </DataTable.Col>
+            <DataTable.Col>
+                <EditButton />
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 ```
@@ -72,7 +76,7 @@ Configure the `<Resource recordRepresentation>` to render related records in a m
 <Resource name="tags" list={TagList} recordRepresentation="name" />
 ```
 
-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. 
+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.
 
 ## Props
 
@@ -117,16 +121,17 @@ Is equivalent to:
 `<ReferenceArrayField>` creates a [`ListContext`](./useListContext.md), so you can use any child that uses a `ListContext`:
 
 - [`<SingleFieldList>`](./SingleFieldList.md)
+- [`<DataTable>`](./DataTable.md)
 - [`<Datagrid>`](./Datagrid.md)
 - [`<SimpleList>`](./SimpleList.md)
 - [`<EditableDatagrid>`](./EditableDatagrid.md)
 - [`<Calendar>`](./Calendar.md)
 - Or a component of your own (check the [`<WithListContext>`](./WithListContext.md) and the [`useListContext`](./useListContext.md) chapters to learn how). 
 
-For instance, use a `<Datagrid>` to render the related records in a table:
+For instance, use a `<DataTable>` to render the related records in a table:
 
 ```jsx
-import { Show, SimpleShowLayout, TextField, ReferenceArrayField, Datagrid, ShowButton } from 'react-admin';
+import { Show, SimpleShowLayout, TextField, ReferenceArrayField, DataTable, ShowButton } from 'react-admin';
 
 export const PostShow = () => (
     <Show>
@@ -134,11 +139,13 @@ export const PostShow = () => (
             <TextField source="id" />
             <TextField source="title" />
             <ReferenceArrayField label="Tags" reference="tags" source="tag_ids">
-                <Datagrid>
-                    <TextField source="id" />
-                    <TextField source="name" />
-                    <ShowButton />
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="id" />
+                    <DataTable.Col source="name" />
+                    <DataTable.Col>
+                        <ShowButton />
+                    </DataTable.Col>
+                </DataTable>
             </ReferenceArrayField>
             <EditButton />
         </SimpleShowLayout>
@@ -203,6 +210,8 @@ That's why you often need to set an explicit `label` on a `<ReferenceField>`:
 <ReferenceArrayField label="Tags" source="tag_ids" reference="tags" />
 ```
 
+**Tip**: Having to specify the `label` prop on the field for it to be used by the Datagrid is no longer necessary with [`<DataTable>`](./DataTable.md), the successor of the `<Datagrid>` component. Instead, `<DataTable>` properly separates the props for the column header and the field itself, thanks to the [`<DataTable.Col>`](./DataTable.md#datatablecol) component.
+
 React-admin uses [the i18n system](./Translation.md) to translate the label, so you can use translation keys to have one label for each language supported by the interface:
 
 ```jsx
diff --git a/docs/ReferenceField.md b/docs/ReferenceField.md
index 484588fe130..00ca19f5416 100644
--- a/docs/ReferenceField.md
+++ b/docs/ReferenceField.md
@@ -65,7 +65,7 @@ Alternately, if you pass a child component, `<ReferenceField>` will render it in
 
 This component fetches a referenced record (`users` in this example) using the `dataProvider.getMany()` method, and passes it to its child. 
 
-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. 
+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. 
 
 ## Props
 
@@ -110,6 +110,8 @@ That's why you often need to set an explicit `label` on a `<ReferenceField>`:
 <ReferenceField label="Author name" source="user_id" reference="users" />
 ```
 
+**Tip**: Having to specify the `label` prop on the field for it to be used by the Datagrid is no longer necessary with [`<DataTable>`](./DataTable.md), the successor of the `<Datagrid>` component. Instead, `<DataTable>` properly separates the props for the column header and the field itself, thanks to the [`<DataTable.Col>`](./DataTable.md#datatablecol) component.
+
 React-admin uses [the i18n system](./Translation.md) to translate the label, so you can use translation keys to have one label for each language supported by the interface:
 
 ```jsx
@@ -178,6 +180,8 @@ By default, when used in a `<Datagrid>`, and when the user clicks on the column
 <ReferenceField source="user_id" reference="users" sortBy="user.name" />
 ```
 
+**Tip**: Having to specify the `sortBy` prop on the field for it to be used by the Datagrid is no longer necessary with [`<DataTable>`](./DataTable.md), the successor of the `<Datagrid>` component. Instead, `<DataTable>` properly separates the props for the column header and the field itself, thanks to the [`<DataTable.Col>`](./DataTable.md#datatablecol) component.
+
 ## `sx`: CSS API
 
 The `<ReferenceField>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples). This property accepts the following subclasses:
@@ -192,23 +196,27 @@ To override the style of all instances of `<ReferenceField>` using the [applicat
 
 <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>
 
-When used in a `<Datagrid>`, `<ReferenceField>` fetches the referenced record only once for the entire table. 
+When used in a `<DataTable>`, `<ReferenceField>` fetches the referenced record only once for the entire table. 
 
 ![ReferenceField](./img/reference-field.png)
 
 For instance, with this code:
 
 ```jsx
-import { List, Datagrid, ReferenceField, TextField, EditButton } from 'react-admin';
+import { List, DataTable, ReferenceField, EditButton } from 'react-admin';
 
 export const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <ReferenceField label="User" source="user_id" reference="users" />
-            <TextField source="title" />
-            <EditButton />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col label="User" source="user_id">
+                <ReferenceField source="user_id" reference="users" />
+            </DataTable.Col>
+            <DataTable.Col source="title" />
+            <DataTable.Col>
+                <EditButton />
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 ```
@@ -247,11 +255,13 @@ For example, the following code prefetches the authors referenced by the posts:
 ```jsx
 const PostList = () => (
     <List queryOptions={{ meta: { prefetch: ['author'] } }}>
-        <Datagrid>
-            <TextField source="title" />
-            {/** renders without an additional request */}
-            <ReferenceField source="author_id" reference="authors" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author_id">
+                {/** renders without an additional request */}
+                <ReferenceField source="author_id" reference="authors" />
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 ```
diff --git a/docs/ReferenceManyCount.md b/docs/ReferenceManyCount.md
index bfc0d21f8b9..313ae230d64 100644
--- a/docs/ReferenceManyCount.md
+++ b/docs/ReferenceManyCount.md
@@ -11,7 +11,7 @@ When you need to render the number of records related to another record via a on
 
 ## Usage
 
-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:
+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:
 
 - `reference` is the name of the related resource to fetch (e.g. `comments`)
 - `target` is the name of the field in the related resource that points to the current resource (e.g. `post_id`)
@@ -20,40 +20,37 @@ For instance, to display the number of comments related to a post in a List view
 
 ```jsx
 import { 
+    List,
+    DataTable,
     ChipField,
-    Datagrid,
     DateField,
-    List,
-    NumberField,
     ReferenceArrayField,
     ReferenceManyCount,
     SingleFieldList,
-    TextField,
 } from 'react-admin';
 
 export const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="published_at" sortByOrder="DESC" />
-            <ReferenceManyCount
-                label="Nb comments"
-                reference="comments"
-                target="post_id"
-                link
-            />
-            <NumberField source="views" sortByOrder="DESC" />
-            <ReferenceArrayField
-                label="Tags"
-                reference="tags"
-                source="tags"
-            >
-                <SingleFieldList>
-                    <ChipField source="name.en" size="small" />
-                </SingleFieldList>
-            </ReferenceArrayField>
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="published_at" sortByOrder="DESC" field={DateField} />
+            <DataTable.Col label="Nb comments">
+                <ReferenceManyCount
+                    reference="comments"
+                    target="post_id"
+                    link
+                />
+            </DataTable.Col>
+            <DataTable.Col source="views" sortByOrder="DESC" field={NumberField} />
+            <DataTable.Col source="tags" label="Tags">
+                <ReferenceArrayField reference="tags" source="tags">
+                    <SingleFieldList>
+                        <ChipField source="name.en" size="small" />
+                    </SingleFieldList>
+                </ReferenceArrayField>
+            </DataTable.Col>
+        </DataTable>
     </List>
 )
 ```
diff --git a/docs/ReferenceManyField.md b/docs/ReferenceManyField.md
index 9025363261b..7d0464e4f9d 100644
--- a/docs/ReferenceManyField.md
+++ b/docs/ReferenceManyField.md
@@ -9,7 +9,7 @@ title: "The ReferenceManyField Component"
 
 <iframe src="https://www.youtube-nocookie.com/embed/UeM31-65Wc4" 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>
 
-This component fetches a list of referenced records by a reverse lookup of the current `record.id` in the `target` field of another resource (using the `dataProvider.getManyReference()` REST method), and puts them in a [`ListContext`](./useListContext.md). Its children can then use the data from this context. The most common case is to use [`<SingleFieldList>`](./SingleFieldList.md) or [`<Datagrid>`](./Datagrid.md) as child.
+This component fetches a list of referenced records by a reverse lookup of the current `record.id` in the `target` field of another resource (using the `dataProvider.getManyReference()` REST method), and puts them in a [`ListContext`](./useListContext.md). Its children can then use the data from this context. The most common case is to use [`<SingleFieldList>`](./SingleFieldList.md) or [`<DataTable>`](./DataTable.md) as child.
 
 **Tip**: If the relationship is materialized by an array of ids in the initial record, use [the `<ReferenceArrayField>` component](./ReferenceArrayField.md) instead.
 
@@ -33,7 +33,7 @@ For instance, if an `author` has many `books`, and each book resource exposes an
 `<ReferenceManyField>` can render the titles of all the books by a given author.
 
 ```jsx
-import { Show, SimpleShowLayout, ReferenceManyField, Datagrid, TextField, DateField } from 'react-admin';
+import { Show, SimpleShowLayout, ReferenceManyField, DataTable, TextField, DateField } from 'react-admin';
 
 const AuthorShow = () => (
     <Show>
@@ -41,10 +41,10 @@ const AuthorShow = () => (
             <TextField source="first_name" />
             <TextField source="last_name" />
             <ReferenceManyField reference="books" target="author_id" label="Books">
-              <Datagrid>
-                <TextField source="title" />
-                <DateField source="published_at" />
-              </Datagrid>
+              <DataTable>
+                <DataTable.Col source="title" />
+                <DataTable.Col source="published_at" field={DateField} />
+              </DataTable>
             </ReferenceManyField>
         </SimpleShowLayout>
     </Show>
@@ -58,20 +58,24 @@ const AuthorShow = () => (
 You can also use `<ReferenceManyField>` in a list, e.g. to display the authors of the comments related to each post in a list by matching `post.id` to `comment.post_id`:
 
 ```jsx
-import { List, Datagrid, ChipField, ReferenceManyField, SingleFieldList, TextField } from 'react-admin';
+import { List, DataTable, ChipField, ReferenceManyField, SingleFieldList } from 'react-admin';
 
 export const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" type="email" />
-            <ReferenceManyField label="Comments by" reference="comments" target="post_id">
-                <SingleFieldList>
-                    <ChipField source="author.name" />
-                </SingleFieldList>
-            </ReferenceManyField>
-            <EditButton />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col label="Comments by">
+                <ReferenceManyField reference="comments" target="post_id">
+                    <SingleFieldList>
+                        <ChipField source="author.name" />
+                    </SingleFieldList>
+                </ReferenceManyField>
+            </DataTable.Col>
+            <DataTable.Col>
+                <EditButton />
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 ```
@@ -103,16 +107,17 @@ This example leverages [`<SingleFieldList>`](./SingleFieldList.md) to display an
 `<ReferenceManyField>` renders its children inside a [`ListContext`](./useListContext.md). This means you can use any component that uses a `ListContext`:
 
 - [`<SingleFieldList>`](./SingleFieldList.md)
+- [`<DataTable>`](./DataTable.md)
 - [`<Datagrid>`](./Datagrid.md)
 - [`<SimpleList>`](./SimpleList.md)
 - [`<EditableDatagrid>`](./EditableDatagrid.md)
 - [`<Calendar>`](./Calendar.md)
 - Or a component of your own (check the [`<WithListContext>`](./WithListContext.md) and the [`useListContext`](./useListContext.md) chapters to learn how). 
 
-For instance, use a `<Datagrid>` to render the related records in a table:
+For instance, use a `<DataTable>` to render the related records in a table:
 
 ```jsx
-import { Show, SimpleShowLayout, TextField, ReferenceManyField, Datagrid, DateField } from 'react-admin';
+import { Show, SimpleShowLayout, TextField, ReferenceManyField, DataTable, DateField } from 'react-admin';
 
 export const AuthorShow = () => (
   <Show>
@@ -121,10 +126,10 @@ export const AuthorShow = () => (
       <TextField source="last_name" />
       <DateField label="Born" source="dob" />
       <ReferenceManyField label="Books" reference="books" target="author_id">
-        <Datagrid>
-          <TextField source="title" />
-          <DateField source="published_at" />
-        </Datagrid>
+        <DataTable>
+          <DataTable.Col source="title" />
+          <DataTable.Col source="published_at" field={DateField} />
+        </DataTable>
       </ReferenceManyField>
     </SimpleShowLayout>
   </Show>
@@ -209,9 +214,9 @@ const AuthorEdit = () => (
       <ReferenceManyField reference="comments" target="post_id">
           <FilterButton filters={filters}/>
           <FilterForm filters={filters}/>
-          <Datagrid>
+          <DataTable>
               ...
-          </Datagrid>
+          </DataTable>
       </ReferenceManyField>
     </SimpleForm>
   </Edit>
@@ -222,15 +227,15 @@ const AuthorEdit = () => (
 
 ## `label`
 
-By default, `<SimpleShowLayout>`, `<Datagrid>` and other layout components infer the label of a field based on its `source`. For a `<ReferenceManyField>`, the source defaults to `id`, so this may not be what you expect:
+By default, `<SimpleShowLayout>`, `<DataTable>` and other layout components infer the label of a field based on its `source`. For a `<ReferenceManyField>`, the source defaults to `id`, so this may not be what you expect:
 
 ```jsx
 {/* default label is 'Id', or the translation of 'resources.authors.fields.id' if it exists */}
 <ReferenceManyField reference="books" target="author_id">
-  <Datagrid>
-    <TextField source="title" />
-    <DateField source="published_at" />
-  </Datagrid>
+  <DataTable>
+    <DataTable.Col source="title" />
+    <DataTable.Col source="published_at" field={DateField} />
+  </DataTable>
 </ReferenceManyField>
 ```
 
@@ -238,10 +243,10 @@ That's why you often need to set an explicit `label` on a `<ReferenceField>`:
 
 ```jsx
 <ReferenceManyField label="Books" reference="books" target="author_id">
-  <Datagrid>
-    <TextField source="title" />
-    <DateField source="published_at" />
-  </Datagrid>
+  <DataTable>
+    <DataTable.Col source="title" />
+    <DataTable.Col source="published_at" field={DateField} />
+  </DataTable>
 </ReferenceManyField>
 ```
 
@@ -249,10 +254,10 @@ React-admin uses [the i18n system](./Translation.md) to translate the label, so
 
 ```jsx
 <ReferenceManyField label="resources.authors.fields.books" reference="books" target="author_id">
-  <Datagrid>
-    <TextField source="title" />
-    <DateField source="published_at" />
-  </Datagrid>
+  <DataTable>
+    <DataTable.Col source="title" />
+    <DataTable.Col source="published_at" field={DateField} />
+  </DataTable>
 </ReferenceManyField>
 ```
 
@@ -298,10 +303,10 @@ For instance, if you want to display the `books` of a given `author`, the `refer
 
 ```jsx
 <ReferenceManyField label="Books" reference="books" target="author_id">
-  <Datagrid>
-    <TextField source="title" />
-    <DateField source="published_at" />
-  </Datagrid>
+  <DataTable>
+    <DataTable.Col source="title" />
+    <DataTable.Col source="published_at" field={DateField} />
+  </DataTable>
 </ReferenceManyField>
 ```
 
@@ -353,9 +358,9 @@ In the example below, both lists use the same reference ('books'), but their sel
             meta: { foo: 'bar' },
         }}
     >
-        <Datagrid>
-            <TextField source="title" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+        </DataTable>
     </ReferenceManyField>
     <ReferenceManyField
         reference="books"
@@ -365,9 +370,9 @@ In the example below, both lists use the same reference ('books'), but their sel
         }}
         storeKey="custom"
     >
-        <Datagrid>
-            <TextField source="title" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+        </DataTable>
     </ReferenceManyField>
 </Stack>
 ```
@@ -379,10 +384,10 @@ Name of the field carrying the relationship on the referenced resource. For inst
 
 ```jsx
 <ReferenceManyField label="Books" reference="books" target="author_id">
-  <Datagrid>
-    <TextField source="title" />
-    <DateField source="published_at" />
-  </Datagrid>
+  <DataTable>
+    <DataTable.Col source="title" />
+    <DataTable.Col source="published_at" field={DateField} />
+  </DataTable>
 </ReferenceManyField>
 ```
 
@@ -430,7 +435,7 @@ To allow users to create or edit a record without leaving the current view, use
 
 {% raw %}
 ```jsx
-import { Edit, SimpleForm, TextInput, ReferenceManyField, WithRecord, Datagrid } from 'react-admin';
+import { Edit, SimpleForm, TextInput, ReferenceManyField, WithRecord, DataTable } from 'react-admin';
 import { CreateInDialogButton, EditInDialogButton } from "@react-admin/ra-form-layout";
 
 const EmployerEdit = () => (
@@ -455,22 +460,22 @@ const EmployerEdit = () => (
                       </CreateInDialogButton>
                   )}
               />
-              <Datagrid>
-                  <TextField source="first_name" />
-                  <TextField source="last_name" />
-                  <WithRecord
-                    render={record => (
-                      <EditInDialogButton>
-                          <SimpleForm
-                            record={{ employer_id: record.id }}
-                          >
-                            <TextInput source="first_name" />
-                            <TextInput source="last_name" />
-                          </SimpleForm>
-                        </EditInDialogButton>
+              <DataTable>
+                  <DataTable.Col source="first_name" />
+                  <DataTable.Col source="last_name" />
+                  <DataTable.Col
+                      render={record => (
+                          <EditInDialogButton>
+                              <SimpleForm
+                                record={{ employer_id: record.id }}
+                              >
+                                  <TextInput source="first_name" />
+                                  <TextInput source="last_name" />
+                              </SimpleForm>
+                          </EditInDialogButton>
                       )}
                   />
-              </Datagrid>
+              </DataTable>
           </ReferenceManyField>
       </SimpleForm>
   </Edit>
diff --git a/docs/ReferenceManyToManyField.md b/docs/ReferenceManyToManyField.md
index daabd6b2bae..af008e6bd41 100644
--- a/docs/ReferenceManyToManyField.md
+++ b/docs/ReferenceManyToManyField.md
@@ -59,7 +59,7 @@ export const BandShow = () => (
 
 | Prop        | Required | Type                                        | Default                          | Description                                                                                                                                                                                                       |
 | ----------- | -------- | ------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `children`  | Required | `element`                                   | -                                | An iterator element (e.g. `<SingleFieldList>` or `<Datagrid>`). The iterator element usually has one or more child `<Field>` components.                                                                          |
+| `children`  | Required | `element`                                   | -                                | An iterator element (e.g. `<SingleFieldList>` or `<DataTable>`). The iterator element usually has one or more child `<Field>` components.                                                                          |
 | `reference` | Required | `string`                                    | -                                | Name of the reference resource, e.g. 'venues'                                                                                                                                                                    |
 | `through`   | Required | `string`                                    | -                                | Name of the resource for the associative table, e.g. 'performances'                                                                                                                                               |
 | `filter`    | Optional | `object`                                    | `{}`                             | Filter for the associative table (passed to the `getManyReference()` call)                                                                                                                                        |
@@ -74,7 +74,7 @@ export const BandShow = () => (
 
 `<ReferenceManyToManyField>` expects an _iterator_ component as child, i.e. a component working inside a `ListContext`.
 
-This means you can use a `<Datagrid>` instead of a `<SingleFieldList>`, which is useful if you want to display more details about related records. For instance, to display the venue `name` and `location`:
+This means you can use a `<DataTable>` instead of a `<SingleFieldList>`, which is useful if you want to display more details about related records. For instance, to display the venue `name` and `location`:
 
 ```diff
 export const BandShow = () => (
@@ -90,10 +90,10 @@ export const BandShow = () => (
 -               <SingleFieldList>
 -                   <ChipField source="name" />
 -               </SingleFieldList>
-+               <Datagrid>
-+                   <TextField source="name" />
-+                   <TextField source="location" />
-+               </Datagrid>
++               <DataTable>
++                   <DataTable.Col source="name" />
++                   <DataTable.Col source="location" />
++               </DataTable>
             </ReferenceManyToManyField>
             <EditButton />
         </SimpleShowLayout>
diff --git a/docs/Resource.md b/docs/Resource.md
index 83330adef82..8e402915f26 100644
--- a/docs/Resource.md
+++ b/docs/Resource.md
@@ -134,18 +134,18 @@ The `BookList` component can grab the `authorId` parameter from the URL using th
 {% raw %}
 ```jsx
 // in src/BookList.jsx
-import { List, Datagrid, TextField } from 'react-admin';
+import { List, DataTable } from 'react-admin';
 import { useParams } from 'react-router-dom';
 
 export const BookList = () => {
     const { authorId } = useParams();
     return (
         <List resource="books" filter={{ authorId }}>
-            <Datagrid>
-                <TextField source="id" />
-                <TextField source="title" />
-                <TextField source="year" />
-            </Datagrid>
+            <DataTable>
+                <DataTable.Col source="id" />
+                <DataTable.Col source="title" />
+                <DataTable.Col source="year" />
+            </DataTable>
         </List>
     );
 };
@@ -173,12 +173,14 @@ const BooksButton = () => {
 
 export const AuthorList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="firstName" />
-            <TextField source="lastName" />
-            <BooksButton />
-        </Datagrid>
+        <DataTable.Col>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="firstName" />
+            <DataTable.Col source="lastName" />
+            <DataTable.Col>
+                <BooksButton />
+            </DataTable.Col>
+        </DataTable.Col>
     </List>
 );
 ```
@@ -290,7 +292,7 @@ For instance, the following component displays the name of the current resource:
 
 ```jsx
 import * as React from 'react';
-import { Datagrid, DateField, TextField, List, useResourceContext } from 'react-admin';
+import { DataTable, DateField, List, useResourceContext } from 'react-admin';
 
 const ResourceName = () => {
     const resource = useResourceContext();
@@ -301,10 +303,10 @@ const PostList = () => (
     <List>
         <>
             <ResourceName /> {/* renders 'posts' */}
-            <Datagrid>
-                <TextField source="title" />
-                <DateField source="published_at" />
-            </Datagrid>
+            <DataTable>
+                <DataTable.Col source="title" />
+                <DataTable.Col source="published_at" field={DateField} />
+            </DataTable>
         </>
     </List>
 )
@@ -356,7 +358,7 @@ In order to display a list of songs for the selected artist, `<SongList>` should
 {% raw %}
 ```jsx
 // in src/SongList.jsx
-import { List, Datagrid, TextField, useRecordContext } from 'react-admin';
+import { List, DataTable, useRecordContext, DateField } from 'react-admin';
 import { useParams } from 'react-router-dom';
 import { Button } from '@mui/material';
 
@@ -364,14 +366,16 @@ export const SongList = () => {
     const { id } = useParams();
     return (
         <List resource="songs" filter={{ artistId: id }}>
-            <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>
     );
 };
diff --git a/docs/SX.md b/docs/SX.md
index d06acedfa14..a717ef5f70c 100644
--- a/docs/SX.md
+++ b/docs/SX.md
@@ -13,15 +13,17 @@ The `sx` prop accepts an object with CSS properties as keys and values, just lik
 
 {% raw %}
 ```jsx
-import { NumberField, List, Datagrid, TextField, EditButton } from 'react-admin';
+import { NumberField, List, DataTable, EditButton } from 'react-admin';
 
 export const ProductList = () => (
     <List>
-        <Datagrid>
-            <TextField source="sku" />
-            <TextField source="price" />
-            <EditButton sx={{ fontWeight: "bold" }}/>
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="sku" />
+            <DataTable.Col source="price" />
+            <DataTable.Col>
+                <EditButton sx={{ fontWeight: "bold" }}/>
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 ```
@@ -263,18 +265,16 @@ const CustomUserCard = ({ user }) => (
 ```
 {% endraw %}
 
-Here is another example, illustrating the ability to customize the header of a `<Datagrid>`:
+Here is another example, illustrating the ability to customize the header of a `<DataTable>`:
 
 {% raw %}
 ```jsx
 import {
     BooleanField,
-    Datagrid,
+    DataTable,
     DateField,
     EditButton,
     List,
-    NumberField,
-    TextField,
     ShowButton,
 } from 'react-admin';
 import Icon from '@mui/icons-material/Person';
@@ -283,22 +283,24 @@ export const VisitorIcon = Icon;
 
 export const PostList = () => (
     <List>
-        <Datagrid
+        <DataTable
             sx={{
                 backgroundColor: "Lavender",
-                "& .RaDatagrid-headerCell": {
+                "& .RaDataTable-headerCell": {
                     backgroundColor: "MistyRose",
                 },
             }}
         >
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="published_at" sortByOrder="DESC" />
-            <BooleanField source="commentable" sortable={false} />
-            <NumberField source="views" sortByOrder="DESC" />
-            <EditButton />
-            <ShowButton />
-        </Datagrid>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="published_at" sortByOrder="DESC" field={DateField} />
+            <DataTable.Col source="commentable" sortable={false} field={BooleanField} />
+            <DataTable.NumberCol source="views" sortByOrder="DESC">
+            <DataTable.Col>
+                <EditButton />
+                <ShowButton />
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 ```
@@ -308,13 +310,13 @@ This example results in:
 
 ![Visitor List with customized CSS classes](./img/list_with_customized_css.png)
 
-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:
+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:
 
 ![Developer tools](./img/sx-class-name.png)
 
-The react-admin documentation for individual components also lists the classes available for styling. For instance, here is the [Datagrid CSS documentation](./Datagrid.md#sx-css-api):
+The react-admin documentation for individual components also lists the classes available for styling. For instance, here is the [`<DataTable>` CSS documentation](./DataTable.md#sx-css-api):
 
-![Datagrid CSS documentation](./img/sx-documentation.png)
+![DataTable CSS documentation](./img/sx-documentation.png)
 
 ## Callback Values
 
@@ -367,7 +369,7 @@ The following example shows how to create a new `<ColoredNumberField>` component
 
 {% raw %}
 ```tsx
-import { useRecordContext, NumberField, List, Datagrid, TextField, EditButton } from 'react-admin';
+import { useRecordContext, NumberField, List, DataTable, EditButton } from 'react-admin';
 import type { NumberFieldProps } from 'react-admin';
 
 const ColoredNumberField = (props: NumberFieldProps) => {
@@ -385,12 +387,14 @@ ColoredNumberField.defaultProps = NumberField.defaultProps;
 
 export const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
+        <DataTable>
+            <DataTable.Col source="id" />
             ...
-            <ColoredNumberField source="nb_views" />
-            <EditButton />
-        </Datagrid>
+            <DataTable.Col source="nb_views" field={ColoredNumberField} />
+            <DataTable.Col>
+                <EditButton />
+            </DataTable.Col>
+        </DataTable>
     </List>
 );
 ```
@@ -402,64 +406,64 @@ export const PostList = () => (
 
 To reuse the same style overrides in different locations across your application, create a reusable component using [the Material UI `styled()` utility](https://mui.com/system/styled/). It's a function that creates a new component based on a source component and custom styles. The basic syntax is `styled(Component)(styles) => Component` (where `styles` follows the same syntax as the `sx` prop).
 
-For instance, to create a custom `<Datagrid>` component with the header style defined in the previous section:
+For instance, to create a custom `<DataTable>` component with the header style defined in the previous section:
 
 ```jsx
-// in src/MyDatagrid.js
+// in src/MyDataTable.js
 import { styled } from '@mui/system';
-import { Datagrid } from 'react-admin';
+import { DataTable } from 'react-admin';
 
-export const MyDatagrid = styled(Datagrid)({
+export const MyDataTable = styled(DataTable)({
     backgroundColor: "Lavender",
-    "& .RaDatagrid-headerCell": {
+    "& .RaDataTable-headerCell": {
         backgroundColor: "MistyRose",
     },
 });
 ```
 
-You can then use this component instead of react-admin's `<Datagrid>` component:
+You can then use this component instead of react-admin's `<DataTable>` component:
 
 {% raw %}
 ```diff
 // in src/post/PostList.js
 import {
     BooleanField,
--   Datagrid,
+-   DataTable,
     DateField,
     EditButton,
     List,
-    NumberField,
-    TextField,
     ShowButton,
 } from 'react-admin';
-+import { MyDatagrid } from '../MyDatagrid';
++import { MyDataTable } from '../MyDataTable';
 
 export const PostList = () => (
     <List>
--       <Datagrid
+-       <DataTable
 -           sx={{
 -               backgroundColor: "Lavender",
--               "& .RaDatagrid-headerCell": {
+-               "& .RaDataTable-headerCell": {
 -                   backgroundColor: "MistyRose",
 -               },
 -           }}
 -       >
-+       <MyDatagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="published_at" sortByOrder="DESC" />
-            <BooleanField source="commentable" sortable={false} />
-            <NumberField source="views" sortByOrder="DESC" />
-            <EditButton />
-            <ShowButton />
-+       </MyDatagrid>
--       </Datagrid>
++       <MyDataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="published_at" sortByOrder="DESC" field={DateField} />
+            <DataTable.Col source="commentable" sortable={false} field={BooleanField} />
+            <DataTable.NumberCol source="views" sortByOrder="DESC">
+            <DataTable.Col>
+                <EditButton />
+                <ShowButton />
+            </DataTable.Col>
++       </MyDataTable>
+-       </DataTable>
     </List>
 );
 ```
 {% endraw %}
 
-Again, 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)).
+Again, 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)).
 
 ## Going Further
 
diff --git a/docs/SavedQueriesList.md b/docs/SavedQueriesList.md
index 7ffe694751e..716898cc01a 100644
--- a/docs/SavedQueriesList.md
+++ b/docs/SavedQueriesList.md
@@ -21,7 +21,7 @@ import {
     FilterList,
     FilterListItem,
     List,
-    Datagrid
+    DataTable
 +   SavedQueriesList
 } from 'react-admin';
 import { Card, CardContent } from '@mui/material';
@@ -42,9 +42,9 @@ const SongFilterSidebar = () => (
 
 const SongList = () => (
     <List aside={<SongFilterSidebar />}>
-        <Datagrid>
+        <DataTable>
             ...
-        </Datagrid>
+        </DataTable>
     </List>
 );
 ```
@@ -59,7 +59,7 @@ When set, the `<SavedQueriesList icon>` prop appears on the left side of the fil
 
 {% raw %}
 ```jsx
-import { FilterList, FilterListItem, List, Datagrid, SavedQueriesList } from 'react-admin';
+import { FilterList, FilterListItem, List, DataTable, SavedQueriesList } from 'react-admin';
 import { Card, CardContent } from '@mui/material';
 import BookmarkIcon from '@mui/icons-material/BookmarkBorder';
 
@@ -79,9 +79,9 @@ const SongFilterSidebar = () => (
 
 const SongList = () => (
     <List aside={<SongFilterSidebar />}>
-        <Datagrid>
+        <DataTable>
             ...
-        </Datagrid>
+        </DataTable>
     </List>
 );
 ```
diff --git a/docs/ShowDialog.md b/docs/ShowDialog.md
index cd7cd423a55..a9b47da8b01 100644
--- a/docs/ShowDialog.md
+++ b/docs/ShowDialog.md
@@ -29,7 +29,7 @@ Then, add the `<ShowDialog>` component as a sibling to a `<List>` component.
 ```jsx
 import {
     List,
-    Datagrid,
+    DataTable,
     ShowButton,
     SimpleShowLayout,
     TextField,
@@ -40,10 +40,12 @@ import { ShowDialog } from '@react-admin/ra-form-layout';
 const CustomerList = () => (
     <>
         <List>
-            <Datagrid>
+            <DataTable>
                 ...
-                <ShowButton />
-            </Datagrid>
+                <DataTable.Col>
+                    <ShowButton />
+                </DataTable.Col>
+            </DataTable>
         </List>
         <ShowDialog>
             <SimpleShowLayout>
@@ -220,7 +222,7 @@ Here is an example:
 import React from 'react';
 import {
     List,
-    Datagrid,
+    DataTable,
     SimpleShowLayout,
     TextField,
     DateField,
@@ -242,10 +244,12 @@ const CustomerShowTitle = () => {
 const CustomerList = () => (
     <>
         <List>
-            <Datagrid>
+            <DataTable>
                 ...
-                <ShowButton />
-            </Datagrid>
+                <DataTable.Col>
+                    <ShowButton />
+                </DataTable.Col>
+            </DataTable>
         </List>
         <ShowDialog title={<CustomerShowTitle />}>
             <SimpleShowLayout>
@@ -271,7 +275,7 @@ You can also hide the title by passing `null`:
 
 ## Usage Without Routing
 
-By default, `<ShowDialog>` creates a react-router `<Route>` for the displaying path (e.g. `/posts/2/show`), and renders when users go to that location (either by clicking on a datagrid row, or by typing the URL in the browser). If you embed it in the `list` page as explained above, the dialog will always render on top of the list.
+By default, `<ShowDialog>` creates a react-router `<Route>` for the displaying path (e.g. `/posts/2/show`), and renders when users go to that location (either by clicking on a `<DataTable>` row, or by typing the URL in the browser). If you embed it in the `list` page as explained above, the dialog will always render on top of the list.
 
 This may not be what you want if you need to display the show dialog in another page (e.g. to show a related record).
 
@@ -286,7 +290,7 @@ Put `<ShowInDialogButton>` wherever you would put a `<ShowButton>`, and use the
 
 ```jsx
 import {
-  Datagrid,
+  DataTable,
   ReferenceManyField,
   Show,
   SimpleShowLayout,
@@ -301,16 +305,18 @@ const CompanyShow = () => (
             <TextField source="address" />
             <TextField source="city" />
             <ReferenceManyField target="company_id" reference="employees">
-                <Datagrid>
-                    <TextField source="first_name" />
-                    <TextField source="last_name" />
-                    <ShowInDialogButton>
-                        <SimpleShowLayout>
-                            <TextField source="first_name" />
-                            <TextField source="last_name" />
-                        </SimpleShowLayout>
-                    </ShowInDialogButton>
-                </Datagrid>
+                <DataTable>
+                    <DataTable.Col source="first_name" />
+                    <DataTable.Col source="last_name" />
+                    <DataTable.Col>
+                        <ShowInDialogButton>
+                            <SimpleShowLayout>
+                                <TextField source="first_name" />
+                                <TextField source="last_name" />
+                            </SimpleShowLayout>
+                        </ShowInDialogButton>
+                    </DataTable.Col>
+                </DataTable>
             </ReferenceManyField>
         </SimpleShowLayout>
     </Show>
diff --git a/docs/ShowInDialogButton.md b/docs/ShowInDialogButton.md
index 65603efc437..c37261f689b 100644
--- a/docs/ShowInDialogButton.md
+++ b/docs/ShowInDialogButton.md
@@ -12,7 +12,7 @@ This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon"
   Your browser does not support the video tag.
 </video>
 
-It can be useful in case you want the ability to show a record linked by a reference to the currently edited record, or if you have a nested `<Datagrid>` inside a `<Show>` or an `<Edit>` view. 
+It can be useful in case you want the ability to show a record linked by a reference to the currently edited record, or if you have a nested `<DataTable>` inside a `<Show>` or an `<Edit>` view. 
 
 ## Usage
 
@@ -26,15 +26,15 @@ yarn add @react-admin/ra-form-layout
 
 **Tip**: [`ra-form-layout`](https://react-admin-ee.marmelab.com/documentation/ra-form-layout#createindialogbutton-editindialogbutton-and-showindialogbutton) is hosted in a private npm registry. You need to subscribe to one of the [Enterprise Edition](https://react-admin-ee.marmelab.com/) plans to access this package.
 
-Then, use the `<ShowInDialogButton>` component inside a `RecordContext` (in a `<Datagrid>`, in a `<Show>` or an `<Edit>` view).
+Then, use the `<ShowInDialogButton>` component inside a `RecordContext` (in a `<DataTable>`, in a `<Show>` or an `<Edit>` view).
 
-Below is an example of an `<Edit>` view, inside which is a nested `<Datagrid>`, offering the ability to show the detail of each row in a dialog:
+Below is an example of an `<Edit>` view, inside which is a nested `<DataTable>`, offering the ability to show the detail of each row in a dialog:
 
 {% raw %}
 
 ```jsx
 import {
-  Datagrid,
+  DataTable,
   DateField,
   ReferenceManyField,
   SelectField,
@@ -59,15 +59,19 @@ const ShowButton = () => (
   </ShowInDialogButton>
 );
 
-const CustomersDatagrid = () => (
-  <Datagrid>
-    <TextField source="id" />
-    <TextField source="first_name" />
-    <TextField source="last_name" />
-    <DateField source="dob" label="born" />
-    <SelectField source="sex" choices={sexChoices} />
-    <ShowButton />
-  </Datagrid>
+const CustomersDataTable = () => (
+  <DataTable>
+    <DataTable.Col source="id" />
+    <DataTable.Col source="first_name" />
+    <DataTable.Col source="last_name" />
+    <DataTable.Col source="dob" label="born" field={DateField} />
+    <DataTable.Col source="sex">
+      <SelectField source="sex" choices={sexChoices} />
+    </DataTable.Col>
+    <DataTable.Col>
+      <ShowButton />
+    </DataTable.Col>
+  </DataTable>
 );
 
 const EmployerEdit = () => (
@@ -77,7 +81,7 @@ const EmployerEdit = () => (
       <TextInput source="address" validate={required()} />
       <TextInput source="city" validate={required()} />
       <ReferenceManyField label="Customers" reference="customers" target="employer_id">
-        <CustomersDatagrid />
+        <CustomersDataTable />
       </ReferenceManyField>
     </SimpleForm>
   </Edit>
@@ -339,11 +343,13 @@ const ShowButton = () => (
   </ShowInDialogButton>
 );
 
-const CustomersDatagrid = () => (
-  <Datagrid>
+const CustomersDataTable = () => (
+  <DataTable>
     ...
-    <ShowButton />
-  </Datagrid>
+    <DataTable.Col>
+      <ShowButton />
+    </DataTable.Col>
+  </DataTable>
 );
 ```
 
diff --git a/docs/SimpleList.md b/docs/SimpleList.md
index 98379633bde..0784073fcaf 100644
--- a/docs/SimpleList.md
+++ b/docs/SimpleList.md
@@ -11,7 +11,7 @@ title: "The SimpleList Component"
     Your browser does not support the video tag.
 </video>
 
-For mobile devices, a `<Datagrid>` is often unusable - there is simply not enough space to display several columns. The convention in that case is to use a simple list, with only one column per row. The `<SimpleList>` component serves that purpose, leveraging [Material UI's `<List>` and `<ListItem>` components](https://mui.com/components/lists/). 
+For mobile devices, a `<DataTable>` is often unusable - there is simply not enough space to display several columns. The convention in that case is to use a simple list, with only one column per row. The `<SimpleList>` component serves that purpose, leveraging [Material UI's `<List>` and `<ListItem>` components](https://mui.com/components/lists/). 
 
 `<SimpleList>` is an **iterator** component: it gets an array of ids and a data store from the `ListContext`, and iterates over the ids to display each record.
 
@@ -241,11 +241,11 @@ See [`primaryText`](#primarytext)
 
 ## Using `<SimpleList>` On Small Screens
 
-To use `<SimpleList>` on small screens and a `<Datagrid>` on larger screens, use Material UI's `useMediaQuery` hook:
+To use `<SimpleList>` on small screens and a `<DataTable>` on larger screens, use Material UI's `useMediaQuery` hook:
 
 ```jsx
 import { useMediaQuery } from '@mui/material';
-import { List, SimpleList, Datagrid } from 'react-admin';
+import { List, SimpleList, DataTable } from 'react-admin';
 
 export const PostList = () => {
     const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));
@@ -259,9 +259,9 @@ export const PostList = () => {
                     rowClick={(id, resource, record) => record.canEdit ? "edit" : "show"}   
                 />
             ) : (
-                <Datagrid>
+                <DataTable>
                     //...
-                </Datagrid>
+                </DataTable>
             )}
         </List>
     );
diff --git a/docs/SingleFieldList.md b/docs/SingleFieldList.md
index 4fc55b34917..02cfa8dbe1e 100644
--- a/docs/SingleFieldList.md
+++ b/docs/SingleFieldList.md
@@ -38,33 +38,33 @@ const PostShow = () => (
 );
 ```
 
-You can also use  `<SingleFieldList>` in a list view, e.g. to display the tags for each post in a `<Datagrid>`:
+You can also use  `<SingleFieldList>` in a list view, e.g. to display the tags for each post in a `<DataTable>`:
 
 ```jsx
 import { 
     List,
-    Datagrid,
+    DataTable,
     ReferenceArrayField,
     SingleFieldList,
-    TextField,
     DateField,
     BooleanField,
-    NumberField,
     ChipField
 } from 'react-admin';
 
 const PostList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="title" />
-            <DateField source="published_at" />
-            <BooleanField source="commentable" />
-            <NumberField source="views" />
-            <ReferenceArrayField label="Tags" reference="tags" source="tags">
-                <SingleFieldList />
-            </ReferenceArrayField>
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="published_at" field={DateField} />
+            <DataTable.Col source="commentable" field={BooleanField} />
+            <DataTable.NumberCol source="views" />
+            <DataTable.Col source="tags" label="Tags">
+                <ReferenceArrayField  reference="tags" source="tags">
+                    <SingleFieldList />
+                </ReferenceArrayField>
+            </DataTable.Col>
+        </DataTable>
     </List>
 )
 ```
diff --git a/docs/SortButton.md b/docs/SortButton.md
index b4cc821a16e..905dd04b7a1 100644
--- a/docs/SortButton.md
+++ b/docs/SortButton.md
@@ -5,7 +5,7 @@ title: "The SortButton Component"
 
 # `<SortButton>`
 
-Some List views don't have a natural UI for sorting - e.g. the `<SimpleList>`, or a list of images, don't have column headers like the `<Datagrid>`. For these cases, react-admin offers the `<SortButton>`, which displays a dropdown list of fields that the user can choose to sort on.
+Some List views don't have a natural UI for sorting - e.g. the `<SimpleList>`, or a list of images, don't have column headers like the `<DataTable>`. For these cases, react-admin offers the `<SortButton>`, which displays a dropdown list of fields that the user can choose to sort on.
 
 <video controls autoplay playsinline muted loop>
   <source src="./img/sort-button.webm" type="video/webm"/>
diff --git a/docs/StackedFilters.md b/docs/StackedFilters.md
index 38da581de5d..8becd85734a 100644
--- a/docs/StackedFilters.md
+++ b/docs/StackedFilters.md
@@ -20,22 +20,22 @@ Use a `<StackedFilters>` component in the [`<List actions>`](./List.md#actions)
 // in src/posts/PostList.tsx
 import {
     BooleanField,
-    Datagrid,
+    DataTable,
     List,
-    NumberField,
     ReferenceArrayField,
-    TextField,
 } from 'react-admin';
 import { PostListToolbar } from './PostListToolbar';
 
 const PostList = () => (
     <List actions={<PostListToolbar />}>
-        <Datagrid>
-            <TextField source="title" />
-            <NumberField source="views" />
-            <ReferenceArrayField tags="tags" source="tag_ids" />
-            <BooleanField source="published" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+            <DataTable.NumberCol source="views" />
+            <DataTable.Col source="tag_ids">
+                <ReferenceArrayField tags="tags" source="tag_ids" />
+            </DataTable.Col>
+            <DataTable.Col source="published" field={BooleanField} />
+        </DataTable>
     </List>
 );
 
@@ -401,7 +401,6 @@ Just like `<StackedFilters>`, `<StackedFiltersForm>` requires a [filtering confi
 {% raw %}
 ```tsx
 import {
-    Datagrid,
     List,
     TextField,
     NumberField,
diff --git a/docs/Store.md b/docs/Store.md
index 48c2ae2f4e8..4a69393734f 100644
--- a/docs/Store.md
+++ b/docs/Store.md
@@ -56,7 +56,7 @@ React-admin components don't access the store directly ; instead, they use purpo
 - `useLocaleState()` for the locale
 - [`useTheme()`](./useTheme.md) for the theme
 - `useUnselect()`, `useUnselectAll()`, `useRecordSelection()` for the selected records for a resource
-- `useExpanded()` for the expanded rows in a datagrid
+- `useExpanded()` for the expanded rows in a datatable
 
 Using specialized hooks avoids depending on a store key.
 
@@ -166,7 +166,7 @@ This way, each time the application is loaded, the store will be reset to an emp
 
 ## Testing Components Using The Store
 
-The react-admin Store is persistent. This means that if a unit test modifies an item in the store, the value will be changed for the next test. This will cause random test failures when you use `useStore()` in your tests, or any feature depending on the store (e.g. datagrid row selection, sidebar state, language selection).
+The react-admin Store is persistent. This means that if a unit test modifies an item in the store, the value will be changed for the next test. This will cause random test failures when you use `useStore()` in your tests, or any feature depending on the store (e.g. `<DataTable>` row selection, sidebar state, language selection).
 
 To isolate your unit tests, pass a new `memoryStore` for each test:
 
diff --git a/docs/TabbedForm.md b/docs/TabbedForm.md
index 1baadf1ff27..dbbb5e58805 100644
--- a/docs/TabbedForm.md
+++ b/docs/TabbedForm.md
@@ -25,7 +25,7 @@ import * as React from "react";
 import {
     TabbedForm,
     Edit,
-    Datagrid,
+    DataTable,
     TextField,
     DateField,
     TextInput,
@@ -56,11 +56,13 @@ export const PostEdit = () => (
             </TabbedForm.Tab>
             <TabbedForm.Tab label="comments">
                 <ReferenceManyField reference="comments" target="post_id" label={false}>
-                    <Datagrid>
-                        <TextField source="body" />
-                        <DateField source="created_at" />
-                        <EditButton />
-                    </Datagrid>
+                    <DataTable>
+                        <DataTable.Col source="body" />
+                        <DataTable.Col source="created_at" field={DateField} />
+                        <DataTable.Col>
+                            <EditButton />
+                        </DataTable.Col>
+                    </DataTable>
                 </ReferenceManyField>
             </TabbedForm.Tab>
         </TabbedForm>
@@ -292,11 +294,13 @@ export const PostEdit = () => (
             </TabbedForm.Tab>
             <TabbedForm.Tab label="comments">
                 <ReferenceManyField reference="comments" target="post_id" label={false}>
-                    <Datagrid>
-                        <TextField source="body" />
-                        <DateField source="created_at" />
-                        <EditButton />
-                    </Datagrid>
+                    <DataTable>
+                        <DataTable.Col source="body" />
+                        <DataTable.Col source="created_at" field={DateField} />
+                        <DataTable.Col>
+                            <EditButton />
+                        </DataTable.Col>
+                    </DataTable>
                 </ReferenceManyField>
             </TabbedForm.Tab>
         </TabbedForm>
@@ -728,7 +732,7 @@ const ProductEdit = () => (
                     target="product_id"
                     pagination={<Pagination />}
                 >
-                    <Datagrid
+                    <DataTable
                         sx={{
                             width: '100%',
                             '& .column-comment': {
@@ -739,13 +743,15 @@ const ProductEdit = () => (
                             },
                         }}
                     >
-                        <DateField source="date" />
-                        <CustomerReferenceField />
-                        <StarRatingField />
-                        <TextField source="comment" />
-                        <TextField source="status" />
-                        <EditButton />
-                    </Datagrid>
+                        <DataTable.Col source="date" field={DateField} />
+                        <DataTable.Col field={CustomerReferenceField} />
+                        <DataTable.Col field={StarRatingField} />
+                        <DataTable.Col source="comment" />
+                        <DataTable.Col source="status" />
+                        <DataTable.Col>
+                            <EditButton />
+                        </DataTable.Col>
+                    </DataTable>
                 </ReferenceManyField>
             </ReviewsFormTab>
         </TabbedForm>
diff --git a/docs/TabbedShowLayout.md b/docs/TabbedShowLayout.md
index 0ec3fcd4e7e..d23d0d943e4 100644
--- a/docs/TabbedShowLayout.md
+++ b/docs/TabbedShowLayout.md
@@ -45,11 +45,13 @@ export const PostShow = () => (
             </TabbedShowLayout.Tab>
             <TabbedShowLayout.Tab label="comments" path="comments">
                 <ReferenceManyField reference="comments" target="post_id" label={false}>
-                    <Datagrid>
-                        <TextField source="body" />
-                        <DateField source="created_at" />
-                        <EditButton />
-                    </Datagrid>
+                    <DataTable>
+                        <DataTable.Col source="body" />
+                        <DataTable.Col source="created_at" field={DateField} />
+                        <DataTable.Col>
+                            <EditButton />
+                        </DataTable.Col>
+                    </DataTable>
                 </ReferenceManyField>
             </TabbedShowLayout.Tab>
         </TabbedShowLayout>
@@ -176,11 +178,13 @@ export const PostShow = () => (
             </TabbedShowLayout.Tab>
             <TabbedShowLayout.Tab label="comments" path="comments">
                 <ReferenceManyField reference="comments" target="post_id" label={false}>
-                    <Datagrid>
-                        <TextField source="body" />
-                        <DateField source="created_at" />
-                        <EditButton />
-                    </Datagrid>
+                    <DataTable>
+                        <DataTable.Col source="body" />
+                        <DataTable.Col source="created_at" field={DateField} />
+                        <DataTable.Col>
+                            <EditButton />
+                        </DataTable.Col>
+                    </DataTable>
                 </ReferenceManyField>
             </TabbedShowLayout.Tab>
         </TabbedShowLayout>
diff --git a/docs/TextField.md b/docs/TextField.md
index 636eee45aa8..dd74ef4e5df 100644
--- a/docs/TextField.md
+++ b/docs/TextField.md
@@ -22,7 +22,7 @@ import { TextField } from 'react-admin';
 Use `<TextField>` as descendent of:
 
 - a record detail component (`<Show>`, `<Edit>`),
-- a layout component for a list of records (`<Datagrid>`, `<SimpleList>`, `<SingleFieldList>`)
+- a layout component for a list of records (`<DataTable>`, `<SimpleList>`, `<SingleFieldList>`)
 - a [`RecordContextProvider`](./useRecordContext.md#creating-a-record-context)
 
 For instance, to render the title and teaser of a post in a show view:
diff --git a/docs/TranslatableFields.md b/docs/TranslatableFields.md
index 7ebb4e0bb53..42c48284e2d 100644
--- a/docs/TranslatableFields.md
+++ b/docs/TranslatableFields.md
@@ -155,33 +155,33 @@ In this case, you'll have to get the current locale through the `useLocaleState`
 
 {% raw %}
 ```jsx
-import { List, Datagrid, TextField, ReferenceArrayField, SingleFieldList, ChipField, useLocaleState } from 'react-admin';
+import { List, DataTable, ReferenceArrayField, SingleFieldList, ChipField, useLocaleState } from 'react-admin';
 
 const PostList = () => {
     const [locale] = useLocaleState();
 
     return (
         <List>
-            <Datagrid>
-                <TextField source={`name.${locale}`} />
-                <ReferenceArrayField
+            <DataTable>
+                <DataTable.Col source={`name.${locale}`} />
+                <DataTable.Col 
                     label="Tags"
-                    reference="tags"
-                    source="tags"
                     sortBy="tags.name"
                     sort={{ field: `name.${locale}`, order: 'ASC' }}
                 >
-                    <SingleFieldList>
-                        <ChipField source={`name.${locale}`} size="small" />
-                    </SingleFieldList>
-                </ReferenceArrayField>
-            </Datagrid>
+                    <ReferenceArrayField reference="tags" source="tags">
+                        <SingleFieldList>
+                            <ChipField source={`name.${locale}`} size="small" />
+                        </SingleFieldList>
+                    </ReferenceArrayField>
+                </DataTable>
+            </DataTable>
         </List>
     )
 }
 ```
 {% endraw %}
 
-Note that you can't have an [optimized](https://marmelab.com/react-admin/List.html#performance) Datagrid when doing so, as changing the locale wouldn't trigger a render of its children.
+Note that you can't have an [optimized](./Datagrid.md#optimized) Datagrid when doing so, as changing the locale wouldn't trigger a render of its children.
 
 The same pattern applies to show views when you don't want to display all translations: get the locale from the `useLocale` hook and dynamically set the `source` prop of the translatable fields.
diff --git a/docs/TranslationTranslating.md b/docs/TranslationTranslating.md
index 3fcc7e0d101..e31c29540bb 100644
--- a/docs/TranslationTranslating.md
+++ b/docs/TranslationTranslating.md
@@ -55,7 +55,7 @@ When react-admin needs to render a resource name ("post", "comment", etc.) or a
 However, before humanizing names, react-admin checks the `messages` dictionary for a possible translation, with the following keys:
 
 - `resources.${resourceName}.name` for resource names (used for the menu and page titles)
-- `resources.${resourceName}.fields.${fieldName}` for field names (used for datagrid header and form input labels)
+- `resources.${resourceName}.fields.${fieldName}` for field names (used for `<DataTable>` header and form input labels)
 
 This lets you customize resource and field names for each locale.
 
diff --git a/docs/UnitTesting.md b/docs/UnitTesting.md
index 33d12ee62ab..dbcdff2e594 100644
--- a/docs/UnitTesting.md
+++ b/docs/UnitTesting.md
@@ -102,7 +102,7 @@ test('<MyComponent>', async () => {
 
 ## Resetting The Store
 
-The react-admin Store is persistent. This means that if a test modifies an item in the store, the updated value will be changed in the next test. This will cause seemingly random test failures when you use `useStore()` in your tests, or any feature depending on the store (e.g. datagrid row selection, sidebar state, language selection).
+The react-admin Store is persistent. This means that if a test modifies an item in the store, the updated value will be changed in the next test. This will cause seemingly random test failures when you use `useStore()` in your tests, or any feature depending on the store (e.g. `<DataTable>` row selection, sidebar state, language selection).
 
 To isolate your unit tests, pass a new `memoryStore` at each test:
 
diff --git a/docs/WithListContext.md b/docs/WithListContext.md
index 43a9c29c801..903ed74b34b 100644
--- a/docs/WithListContext.md
+++ b/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>
 );
 
diff --git a/docs/WithRecord.md b/docs/WithRecord.md
index b1003e95a09..e412889927e 100644
--- a/docs/WithRecord.md
+++ b/docs/WithRecord.md
@@ -32,13 +32,14 @@ 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
 
-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 [`<Datagrid>`](./Datagrid.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';
@@ -53,6 +54,8 @@ const PostList = () => (
 );
 ```
 
+**Tip:** You don't need to use `<WithRecord>` if you are using [`<DataTable>`](./DataTable.md), as the [`<DataTable.Col>`](./DataTable.md#datatablecol) component directly provides a [`render`](./DataTable.md#render) prop that works similarly to `<WithRecord>`.
+
 ## TypeScript
 
 The `<WithRecord>` component accepts a generic parameter for the record type:
diff --git a/docs/img/guessed-list.png b/docs/img/guessed-list.png
index 6b1a84b3d82..0d0d0a5875d 100644
Binary files a/docs/img/guessed-list.png and b/docs/img/guessed-list.png differ
diff --git a/docs/img/tutorial_guessed_list.png b/docs/img/tutorial_guessed_list.png
index b4b6dd62588..86ecda525a6 100644
Binary files a/docs/img/tutorial_guessed_list.png and b/docs/img/tutorial_guessed_list.png differ
diff --git a/docs/img/tutorial_guessed_post_list.png b/docs/img/tutorial_guessed_post_list.png
index 98ed564d1b6..f8aa440cfb2 100644
Binary files a/docs/img/tutorial_guessed_post_list.png and b/docs/img/tutorial_guessed_post_list.png differ
diff --git a/docs/useCanAccess.md b/docs/useCanAccess.md
index 255665e587b..d82f9478170 100644
--- a/docs/useCanAccess.md
+++ b/docs/useCanAccess.md
@@ -46,7 +46,7 @@ const DeleteUserButton = () => {
 The `checkAccess` function expects an argument with the shape `{ action, resource, record }`. This function resolves to a boolean indicating whether users can access the provided resource and action.
 
 ```jsx
-import { Datagrid, List, TextField, useCanAccessCallback } from 'react-admin';
+import { DataTable, List, useCanAccessCallback } from 'react-admin';
 
 export const UserList = () => {
     const checkAccess = useCanAccessCallback();
@@ -60,11 +60,11 @@ export const UserList = () => {
     };
     return (
         <List>
-            <Datagrid onClick={handleRowClick}>
-                <TextField source="id" />
-                <TextField source="name" />
-                <TextField source="email" />
-            </Datagrid>
+            <DataTable onClick={handleRowClick}>
+                <DataTable.Col source="id" />
+                <DataTable.Col source="name" />
+                <DataTable.Col source="email" />
+            </DataTable>
         </List>
     );
 };
@@ -72,7 +72,7 @@ export const UserList = () => {
 
 ## Multiple Resources
 
-`useCanAccessResources` can check the access to several resources in parallel (e.g. all the columns of a `<Datagrid>`) instead of just one for `useCanAccess`.
+`useCanAccessResources` can check the access to several resources in parallel (e.g. all the columns of a `<DataTable>`) instead of just one for `useCanAccess`.
 
 It takes an object `{ action, resources, record }` as argument. The `resources` parameter is an array of resource names for which to check the access permission. In addition to react-query result properties, it returns a `canAccess` object with a property for each provided resource, determining whether the user can access it.
 
diff --git a/docs/useDefineAppLocation.md b/docs/useDefineAppLocation.md
index b0b4b93957b..cca8c57c5f9 100644
--- a/docs/useDefineAppLocation.md
+++ b/docs/useDefineAppLocation.md
@@ -163,17 +163,17 @@ However, you can customize these default app locations in your CRUD pages. For i
 
 {% raw %}
 ```jsx
-import { List, Datagrid, TextField } from 'react-admin';
+import { List, DataTable } from 'react-admin';
 import { useDefineAppLocation } from '@react-admin/ra-navigation';
 
 export const PublishedPostsList = () => {
     useDefineAppLocation('posts.published');
     return (
         <List filter={{ isPublished: true }}>
-            <Datagrid>
-                <TextField source="title" />
+            <DataTable>
+                <DataTable.Col source="title" />
                 ...
-            </Datagrid>
+            </DataTable>
         </List>
     );
 }
diff --git a/docs/useGetList.md b/docs/useGetList.md
index f4c7d590249..eb1f8c27139 100644
--- a/docs/useGetList.md
+++ b/docs/useGetList.md
@@ -92,17 +92,15 @@ const LatestNews = () => {
 
 ## Rendering Data
 
-If you want to use the result in a react-admin iterator component like [`<Datagrid>`](./Datagrid.md), [`<SimpleList>`](./SimpleList.md), or [`<SingleFieldList>`](./SingleFieldList.md), you must first create a [`ListContext`](./useListContext.md) with the data. The [`useList`](./useList.md) hook does that for you:
+If you want to use the result in a react-admin iterator component like [`<DataTable>`](./DataTable.md), [`<SimpleList>`](./SimpleList.md), or [`<SingleFieldList>`](./SingleFieldList.md), you must first create a [`ListContext`](./useListContext.md) with the data. The [`useList`](./useList.md) hook does that for you:
 
 ```jsx
 import {
     useGetList,
     useList,
     ListContextProvider,
-    Datagrid,
-    TextField,
+    DataTable,
     DateField,
-    NumberField,
     Pagination
 } from 'react-admin';
 
@@ -121,18 +119,18 @@ const LatestNews = () => {
     return (
         <ListContextProvider value={listContext}>
             <h1>Latest news</h1>
-            <Datagrid>
-                <TextField source="title" />
-                <DateField source="published_at" />
-                <NumberField source="views" />
-            </Datagrid>
+            <DataTable>
+                <DataTable.Col source="title" />
+                <DataTable.Col source="published_at" field={DateField} />
+                <DataTable.NumberCol source="views" />
+            </DataTable>
             <Pagination />
         </ListContextProvider>
     );
 };
 ```
 
-In this example, the `useGetList` hook fetches all the posts, and displays a list of the 10 most recent posts in a `<Datagrid>`. The `<Pagination>` component allows the user to navigate through the list. Users can also sort the list by clicking on the column headers.
+In this example, the `useGetList` hook fetches all the posts, and displays a list of the 10 most recent posts in a `<DataTable>`. The `<Pagination>` component allows the user to navigate through the list. Users can also sort the list by clicking on the column headers.
 
 ## Passing Additional Arguments
 
@@ -220,11 +218,11 @@ import { ReferenceManyField } from 'react-admin';
 const PostComments = () => {
     return (
         <ReferenceManyField reference="comments" target="post_id">
-            <Datagrid>
-                <DateField source="created_at" />
-                <TextField source="author" />
-                <TextField source="body" />
-            </Datagrid>
+            <DataTable>
+                <DataTable.Col source="created_at" field={DateField} />
+                <DataTable.Col source="author" />
+                <DataTable.Col source="body" />
+            </DataTable>
         </ReferenceManyField>
     );
 };
@@ -246,11 +244,11 @@ const PostComments = () => {
     const listContext = useList({ data });
     return (
         <ListContextProvider value={listContext}>
-            <Datagrid>
-                <DateField source="created_at" />
-                <TextField source="author" />
-                <TextField source="body" />
-            </Datagrid>
+            <DataTable>
+                <DataTable.Col source="created_at" field={DateField} />
+                <DataTable.Col source="author" />
+                <DataTable.Col source="body" />
+            </DataTable>
         </ListContextProvider>
     );
 };
diff --git a/docs/useGetLocks.md b/docs/useGetLocks.md
index a5e80449523..b11f4bb1c14 100644
--- a/docs/useGetLocks.md
+++ b/docs/useGetLocks.md
@@ -15,7 +15,7 @@ import { useGetLocks } from '@react-admin/ra-realtime';
 const { data } = useGetLocks('posts');
 ```
 
-Here is how to use it in a custom Datagrid, to disable edit and delete buttons for locked records:
+Here is how to use it in a custom [`<DataTable>`](./DataTable.md), to disable edit and delete buttons for locked records:
 
 {% raw %}
 ```tsx
@@ -23,45 +23,44 @@ const MyPostGrid = () => {
     const resource = useResourceContext();
     const { data: locks } = useGetLocks(resource);
     return (
-        <Datagrid
+        <DataTable
             bulkActionButtons={false}
-            sx={{
-                '& .MuiTableCell-root:last-child': {
-                    textAlign: 'right',
-                },
-            }}
         >
-            <MyPostTitle label="Title" locks={locks} />
-            <MyPostActions label="Actions" locks={locks} />
-        </Datagrid>
+            <DataTable.Col label="Title">
+                <MyPostTitle locks={locks} />
+            </DataTable.Col>
+            <DataTable.Col label="Actions" align="right">
+                <MyPostActions locks={locks} />
+            </DataTable.Col>
+        </DataTable>
     );
 };
 
-const MyPostTitle = ({ label, locks }: { label: string; locks: Lock[] }) => {
+const MyPostTitle = ({ locks }: { locks: Lock[] }) => {
     const record = useRecordContext();
     const lock = locks.find(l => l.recordId === record.id);
 
     return (
-        <WrapperField label={label}>
+        <>
             <TextField source="title" />
             {lock && (
                 <span style={{ color: 'red' }}>
                     {` (Locked by ${lock.identity})`}
                 </span>
             )}
-        </WrapperField>
+        </>
     );
 };
 
-const MyPostActions = ({ label, locks }: { label: string; locks: Lock[] }) => {
+const MyPostActions = ({ locks }: { locks: Lock[] }) => {
     const record = useRecordContext();
     const locked = locks.find(l => l.recordId === record.id);
 
     return (
-        <WrapperField label={label}>
+        <>
             <DeleteButton disabled={!!locked} />
             <LockableEditButton disabled={!!locked} />
-        </WrapperField>
+        </>
     );
 };
 ```
diff --git a/docs/useGetLocksLive.md b/docs/useGetLocksLive.md
index d216aeccbeb..299687c8f35 100644
--- a/docs/useGetLocksLive.md
+++ b/docs/useGetLocksLive.md
@@ -29,10 +29,12 @@ const PostList = () => {
     const { data: locks } = useGetLocksLive();
     return (
         <List>
-            <Datagrid>
-                <TextField source="title" />
-                <LockField locks={locks} />
-            </Datagrid>
+            <DataTable>
+                <DataTable.Col source="title" />
+                <DataTable.Col>
+                    <LockField locks={locks} />
+                </DataTable.Col>
+            </DataTable>
         </List>
     );
 };
diff --git a/docs/useGetOne.md b/docs/useGetOne.md
index c0f62dfa926..fea300d272c 100644
--- a/docs/useGetOne.md
+++ b/docs/useGetOne.md
@@ -90,7 +90,7 @@ const UserProfile = () => {
 };
 ```
 
-This results in less calls to the dataProvider. For instance, if the `<UserProfile>` component above is rendered in a `<Datagrid>`, it will only make one call to `dataProvider.getMany()` for the entire list instead of one call to `dataProvider.getOne()` per row.
+This results in less calls to the dataProvider. For instance, if the `<UserProfile>` component above is rendered in a [`<DataTable>`](./DataTable.md], it will only make one call to `dataProvider.getMany()` for the entire list instead of one call to `dataProvider.getOne()` per row.
 
 As `useGetManyAggregate` is often used to fetch references, react-admin exposes a `useReference` hook, which avoids doing the array conversion manually. It's an application hook rather than a data provider hook, so its syntax is a bit different. Prefer `useReference` to `useGetManyAggregate` when you use `useGetOne` to fetch a reference.
 
diff --git a/docs/useList.md b/docs/useList.md
index 3df4ec4ac8b..69ef5e9c22b 100644
--- a/docs/useList.md
+++ b/docs/useList.md
@@ -7,7 +7,7 @@ title: "useList"
 
 The `useList` hook allows to create a `ListContext` based on local data. `useList` creates callbacks for sorting, paginating, filtering, and selecting records from an array.
 
-Thanks to it, you can display your data inside a [`<Datagrid>`](./Datagrid.md), a [`<SimpleList>`](./SimpleList.md) or an [`<EditableDatagrid>`](./EditableDatagrid.md).
+Thanks to it, you can display your data inside a [`<DataTable>`](./DataTable.md), a [`<SimpleList>`](./SimpleList.md) or an [`<EditableDatagrid>`](./EditableDatagrid.md).
 
 ## Usage
 
@@ -17,8 +17,7 @@ Thanks to it, you can display your data inside a [`<Datagrid>`](./Datagrid.md),
 import {
     useList,
     ListContextProvider,
-    Datagrid,
-    TextField
+    DataTable,
 } from 'react-admin';
 
 const data = [
@@ -31,10 +30,10 @@ const MyComponent = () => {
     const listContext = useList({ data });
     return (
         <ListContextProvider value={listContext}>
-            <Datagrid resource="actors">
-                <TextField source="id" />
-                <TextField source="name" />
-            </Datagrid>
+            <DataTable resource="actors">
+                <DataTable.Col source="id" />
+                <DataTable.Col source="name" />
+            </DataTable>
         </ListContextProvider>
     );
 };
@@ -53,10 +52,10 @@ const MyComponent = () => {
     const listContext = useList({ data, isPending });
     return (
         <ListContextProvider value={listContext}>
-            <Datagrid resource="posts">
-                <TextField source="id" />
-                <TextField source="name" />
-            </Datagrid>
+            <DataTable resource="posts">
+                <DataTable.Col source="id" />
+                <DataTable.Col source="name" />
+            </DataTable>
         </ListContextProvider>
     );
 };
@@ -141,7 +140,7 @@ const { data } = useList({
 
 ## `isFetching`
 
-This value ends up in the return value. It is used by list iterators (like `<Datagrid>`) to know when to display a loading indicator.
+This value ends up in the return value. It is used by list iterators (like `<DataTable>`) to know when to display a loading indicator.
 
 ```jsx
 import { useGetList, useList } from 'react-admin';
@@ -154,10 +153,10 @@ const MyComponent = () => {
     const listContext = useList({ data, isFetching });
     return (
         <ListContextProvider value={listContext}>
-            <Datagrid resource="posts">
-                <TextField source="id" />
-                <TextField source="name" />
-            </Datagrid>
+            <DataTable resource="posts">
+                <DataTable.Col source="id" />
+                <DataTable.Col source="name" />
+            </DataTable>
         </ListContextProvider>
     );
 };
@@ -165,15 +164,14 @@ const MyComponent = () => {
 
 ## `isPending`
 
-This value ends up in the return value. It is used by list iterators (like `<Datagrid>`) to know when to display a loading indicator.
+This value ends up in the return value. It is used by list iterators (like `<DataTable>`) to know when to display a loading indicator.
 
 ```jsx
 import {
     useGetList,
     useList,
     ListContextProvider,
-    Datagrid,
-    TextField
+    DataTable,
 } from 'react-admin';
 
 const MyComponent = () => {
@@ -184,10 +182,10 @@ const MyComponent = () => {
     const listContext = useList({ data, isPending });
     return (
         <ListContextProvider value={listContext}>
-            <Datagrid resource="posts">
-                <TextField source="id" />
-                <TextField source="name" />
-            </Datagrid>
+            <DataTable resource="posts">
+                <DataTable.Col source="id" />
+                <DataTable.Col source="name" />
+            </DataTable>
         </ListContextProvider>
     );
 };
diff --git a/docs/useListContext.md b/docs/useListContext.md
index fa43d743886..0e36039b70f 100644
--- a/docs/useListContext.md
+++ b/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!
diff --git a/docs/useListController.md b/docs/useListController.md
index 5dd17d4b475..e2c8d1f35a9 100644
--- a/docs/useListController.md
+++ b/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
 
diff --git a/docs/useMediaQuery.md b/docs/useMediaQuery.md
index 7e6576a052c..1b9e1479e93 100644
--- a/docs/useMediaQuery.md
+++ b/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>`](./SimpleList.md) on mobile, and a [`<DataTable>`](./DataTable.md) 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,19 @@ 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>
+                        <EditButton />
+                    </DataTable.Col>
+                </DataTable>
             )}
         </List>
     );
diff --git a/docs/useRecordContext.md b/docs/useRecordContext.md
index 8c3672ad7ac..3a371460c36 100644
--- a/docs/useRecordContext.md
+++ b/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
 
diff --git a/docs/useStore.md b/docs/useStore.md
index 1b0a0bdb44b..94ca4b3473f 100644
--- a/docs/useStore.md
+++ b/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>
     );
 }
diff --git a/docs/useSubscribeToRecordList.md b/docs/useSubscribeToRecordList.md
index 7ef1ded0919..4131eb10713 100644
--- a/docs/useSubscribeToRecordList.md
+++ b/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>
 );
diff --git a/docs/useUnselect.md b/docs/useUnselect.md
index 26e97cec906..77f55ca34ba 100644
--- a/docs/useUnselect.md
+++ b/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';
diff --git a/docs/useUnselectAll.md b/docs/useUnselectAll.md
index ee76a95e778..22b002807aa 100644
--- a/docs/useUnselectAll.md
+++ b/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';
diff --git a/packages/ra-data-fakerest/README.md b/packages/ra-data-fakerest/README.md
index 38acc3dbe68..df8a3ed0d8c 100644
--- a/packages/ra-data-fakerest/README.md
+++ b/packages/ra-data-fakerest/README.md
@@ -151,10 +151,10 @@ You can leverage this feature in page components to avoid multiple requests to t
 ```jsx
 const PostList = () => (
     <List queryOptions={{ meta: { embed: ['author'] } }}>
-        <Datagrid>
-            <TextField source="title" />
-            <TextField source="author.name" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author.name" />
+        </DataTable>
     </List>
 );
 ```
diff --git a/packages/ra-data-json-server/README.md b/packages/ra-data-json-server/README.md
index 6c2c1806763..06d57dbf730 100644
--- a/packages/ra-data-json-server/README.md
+++ b/packages/ra-data-json-server/README.md
@@ -122,10 +122,10 @@ You can leverage this feature in page components to avoid multiple requests to t
 ```jsx
 const PostList = () => (
     <List queryOptions={{ meta: { embed: 'author' } }}>
-        <Datagrid>
-            <TextField source="title" />
-            <TextField source="author.name" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author.name" />
+        </DataTable>
     </List>
 );
 ```
diff --git a/packages/react-admin/README.md b/packages/react-admin/README.md
index e27519f1908..1f07ca12f20 100644
--- a/packages/react-admin/README.md
+++ b/packages/react-admin/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>
 );