Skip to content

Commit c83a5c3

Browse files
erwanMarmelaberwanMarmelab
committed
WIP
1 parent be5f8bc commit c83a5c3

34 files changed

+766
-713
lines changed

‎docs/Actions.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -156,17 +156,17 @@ See the [Success and Error Side Effects](#success-and-error-side-effects) below
156156

157157
{% raw %}
158158
```jsx
159-
import { List, Datagrid, TextField } from 'react-admin';
159+
import { List, DataTable } from 'react-admin';
160160

161161
const PostList = () => (
162162
<List
163163
queryOptions={{ onSettled: (data, error) => console.log(data, error) }}
164164
>
165-
<Datagrid>
166-
<TextField source="id" />
167-
<TextField source="title" />
168-
<TextField source="body" />
169-
</Datagrid>
165+
<DataTable>
166+
<DataTable.Col source="id" />
167+
<DataTable.Col source="title" />
168+
<DataTable.Col source="body" />
169+
</DataTable>
170170
</List>
171171
);
172172
```
@@ -319,8 +319,8 @@ To execute some logic after a query or a mutation is complete, use the `onSucces
319319
- [`useNotify`](./useNotify.md): Return a function to display a notification.
320320
- [`useRedirect`](./useRedirect.md): Return a function to redirect the user to another page.
321321
- [`useRefresh`](./useRefresh.md): Return a function to force a rerender of the current view (equivalent to pressing the Refresh button).
322-
- [`useUnselect`](./useUnselect.md): Return a function to unselect lines in the current `Datagrid` based on the ids passed to it.
323-
- [`useUnselectAll`](./useUnselectAll.md): Return a function to unselect all lines in the current `Datagrid`.
322+
- [`useUnselect`](./useUnselect.md): Return a function to unselect lines in the current `DataTable` based on the ids passed to it.
323+
- [`useUnselectAll`](./useUnselectAll.md): Return a function to unselect all lines in the current `DataTable`.
324324

325325
### `onSuccess`
326326

‎docs/AppTheme.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -273,19 +273,19 @@ const ThemeToggler = () => {
273273

274274
In a custom theme, you can override the style of a component for the entire application using the `components` key.
275275

276-
For instance, to create a custom theme that overrides the style of the `<Datagrid>` component:
276+
For instance, to create a custom theme that overrides the style of the `<DataTable>` component:
277277

278278
```jsx
279279
import { defaultTheme } from 'react-admin';
280280
import { deepmerge } from '@mui/utils';
281281

282282
const theme = deepmerge(defaultTheme, {
283283
components: {
284-
RaDatagrid: {
284+
RaDataTable: {
285285
styleOverrides: {
286286
root: {
287287
backgroundColor: "Lavender",
288-
"& .RaDatagrid-headerCell": {
288+
"& .RaDataTable-headerCell": {
289289
backgroundColor: "MistyRose",
290290
},
291291
}
@@ -306,7 +306,7 @@ There are 2 important gotchas here:
306306
- 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)
307307
- 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.
308308

309-
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)).
309+
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)).
310310

311311
**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.
312312

@@ -499,11 +499,11 @@ import { defaultTheme } from 'react-admin';
499499

500500
const theme = deepmerge(defaultTheme, {
501501
components: {
502-
RaDatagrid: {
502+
RaDataTable: {
503503
styleOverrides: {
504504
root: {
505505
backgroundColor: "Lavender",
506-
"& .RaDatagrid-headerCell": {
506+
"& .RaDataTable-headerCell": {
507507
backgroundColor: "MistyRose",
508508
},
509509
}

‎docs/ArrayField.md‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ title: "The ArrayField Component"
99

1010
![ArrayField](./img/array-field.webp)
1111

12-
`<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).
12+
`<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).
1313

1414
## Usage
1515

@@ -35,13 +35,13 @@ title: "The ArrayField Component"
3535
}
3636
```
3737

38-
Leverage `<ArrayField>` e.g. in a Show view, to display the `tags` as a `<SingleFieldList>` and the `backlinks` as a `<Datagrid>`:
38+
Leverage `<ArrayField>` e.g. in a Show view, to display the `tags` as a `<SingleFieldList>` and the `backlinks` as a `<DataTable>`:
3939

4040
```jsx
4141
import {
4242
ArrayField,
4343
ChipField,
44-
Datagrid,
44+
DataTable,
4545
Show,
4646
SimpleShowLayout,
4747
SingleFieldList,
@@ -58,11 +58,11 @@ const PostShow = () => (
5858
</SingleFieldList>
5959
</ArrayField>
6060
<ArrayField source="backlinks">
61-
<Datagrid bulkActionButtons={false}>
62-
<TextField source="uuid" />
63-
<TextField source="date" />
64-
<TextField source="url" />
65-
</Datagrid>
61+
<DataTable bulkActionButtons={false}>
62+
<DataTable.Col source="uuid" />
63+
<DataTable.Col source="date" />
64+
<DataTable.Col source="url" />
65+
</DataTable>
6666
</ArrayField>
6767
</SimpleShowLayout>
6868
</Show>
@@ -84,7 +84,7 @@ const PostShow = () => (
8484

8585
## `children`
8686

87-
`<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).
87+
`<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).
8888

8989
```jsx
9090
{/* using SingleFieldList as child */}
@@ -94,13 +94,13 @@ const PostShow = () => (
9494
</SingleFieldList>
9595
</ArrayField>
9696

97-
{/* using Datagrid as child */}
97+
{/* using DataTable as child */}
9898
<ArrayField source="backlinks">
99-
<Datagrid>
100-
<TextField source="uuid" />
101-
<TextField source="date" />
102-
<TextField source="url" />
103-
</Datagrid>
99+
<DataTable>
100+
<DataTable.Col source="uuid" />
101+
<DataTable.Col source="date" />
102+
<DataTable.Col source="url" />
103+
</DataTable>
104104
</ArrayField>
105105

106106
{/* 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
159159
{% raw %}
160160
```jsx
161161
<ArrayField source="backlinks" filter={{ date: '2012-08-10T00:00:00.000Z' }}>
162-
<Datagrid>
163-
<TextField source="uuid" />
164-
<TextField source="date" />
165-
<TextField source="url" />
166-
</Datagrid>
162+
<DataTable>
163+
<DataTable.Col source="uuid" />
164+
<DataTable.Col source="date" />
165+
<DataTable.Col source="url" />
166+
</DataTable>
167167
</ArrayField>
168168
```
169169
{% endraw %}
@@ -179,7 +179,7 @@ As `<ArrayField>` creates a [`ListContext`](./useListContext.md), you can use th
179179
```jsx
180180
import {
181181
ArrayField,
182-
Datagrid,
182+
DataTable,
183183
Pagination,
184184
Show,
185185
SimpleShowLayout,
@@ -191,11 +191,11 @@ const PostShow = () => (
191191
<SimpleShowLayout>
192192
<TextField source="title" />
193193
<ArrayField source="backlinks" perPage={5}>
194-
<Datagrid>
195-
<TextField source="uuid" />
196-
<TextField source="date" />
197-
<TextField source="url" />
198-
</Datagrid>
194+
<DataTable>
195+
<DataTable.Col source="uuid" />
196+
<DataTable.Col source="date" />
197+
<DataTable.Col source="url" />
198+
</DataTable>
199199
<Pagination />
200200
</ArrayField>
201201
</SimpleShowLayout>

‎docs/Breadcrumb.md‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -742,7 +742,7 @@ Let's see how the components for the songs list and detail pages define their ap
742742
{% raw %}
743743
```jsx
744744
// in src/songs/SongList.js
745-
import { useGetOne, List, SearchInput, Datagrid, TextField, DateField } from 'react-admin';
745+
import { useGetOne, List, SearchInput, DataTable, DateField } from 'react-admin';
746746
import { useDefineAppLocation } from '@react-admin/ra-navigation';
747747
import { useParams } from 'react-router-dom';
748748

@@ -756,14 +756,16 @@ export const SongList = () => {
756756
filter={{ artist_id: id }}
757757
filters={[<SearchInput key="q" source="q" alwaysOn />]}
758758
>
759-
<Datagrid>
760-
<TextField source="title" />
761-
<DateField source="released" />
762-
<TextField source="writer" />
763-
<TextField source="producer" />
764-
<TextField source="recordCompany" label="Label" />
765-
<EditSongButton />
766-
</Datagrid>
759+
<DataTable>
760+
<DataTable.Col source="title" />
761+
<DataTable.Col source="released" field={DateField} />
762+
<DataTable.Col source="writer" />
763+
<DataTable.Col source="producer" />
764+
<DataTable.Col source="recordCompany" label="Label" />
765+
<DataTable.Col>
766+
<EditSongButton />
767+
</DataTable.Col>
768+
</DataTable>
767769
</List>
768770
);
769771
};
@@ -857,16 +859,16 @@ To do so, override the [app location](#app-location) of the CRUD pages using the
857859
{% raw %}
858860
```jsx
859861
// in src/songs/SongList.jsx
860-
import { List, Datagrid, TextField } from 'react-admin';
862+
import { List, DataTable } from 'react-admin';
861863
import { useDefineAppLocation } from '@react-admin/ra-navigation';
862864
863865
export const SongList = () => {
864866
useDefineAppLocation('music.songs');
865867
return (
866868
<List>
867-
<Datagrid>
868-
<TextField source="title" />
869-
</Datagrid>
869+
<DataTable>
870+
<DataTable.Col source="title" />
871+
</DataTable>
870872
</List>
871873
);
872874
};

0 commit comments

Comments
 (0)