Skip to content

Commit 01be6d1

Browse files
slax57slax57
committed
review
1 parent c1e45ad commit 01be6d1

38 files changed

+251
-246
lines changed

‎README.md‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -65,20 +65,22 @@ The `<Resource>` component defines CRUD pages (`list`, `edit`, and `create`) for
6565
```jsx
6666
// in posts.js
6767
import * as React from "react";
68-
import { List, Datagrid, Edit, Create, SimpleForm, DateField, TextField, EditButton, TextInput, DateInput, useRecordContext } from 'react-admin';
68+
import { List, DataTable, Edit, Create, SimpleForm, DateField, EditButton, TextInput, DateInput, useRecordContext } from 'react-admin';
6969
import BookIcon from '@mui/icons-material/Book';
7070
export const PostIcon = BookIcon;
7171

7272
export const PostList = () => (
7373
<List>
74-
<Datagrid>
75-
<TextField source="id" />
76-
<TextField source="title" />
77-
<DateField source="published_at" />
78-
<TextField source="average_note" />
79-
<TextField source="views" />
80-
<EditButton />
81-
</Datagrid>
74+
<DataTable>
75+
<DataTable.Col source="id" />
76+
<DataTable.Col source="title" />
77+
<DataTable.Col source="published_at" field={DateField} />
78+
<DataTable.Col source="average_note" />
79+
<DataTable.Col source="views" />
80+
<DataTable.Col>
81+
<EditButton />
82+
</DataTable.Col>
83+
</DataTable>
8284
</List>
8385
);
8486

‎docs/AuthRBAC.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -100,17 +100,17 @@ An _action_ is a string, usually a verb, that represents an operation. Examples
100100

101101
React-admin already does page-level access control with actions like "list", "show", "edit", "create", and "delete". RBAC checks additional actions in its components:
102102

103-
| Action | Description | Used In |
104-
| -------- | -------------------------------- |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
105-
| `list` | Allow to access the List page | [`<List>`](./List.md#access-control), [`<ListButton>`](./Buttons.md#listbutton), [`<Menu.ResourceItem>`](./Menu.md#access-control) |
106-
| `show` | Allow to access the Show page | [`<Show>`](./Show.md), [`<ShowButton>`](./Buttons.md#showbutton), [`<Datagrid>`](./Datagrid.md#access-control), [`<Edit>`](./Edit.md) |
107-
| `create` | Allow to access the Create page | [`<Create>`](./Create.md), [`<CreateButton>`](./Buttons.md#createbutton), [`<List>`](./List.md#access-control) |
108-
| `edit` | Allow to access the Edit page | [`<Edit>`](./Edit.md), [`<EditButton>`](./Buttons.md#editbutton), [`<Datagrid>`](./Datagrid.md#access-control), [`<Show>`](./Show.md) |
109-
| `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) |
110-
| `export` | Allow to export data | [`<ExportButton>`](./Buttons.md#exportbutton), [`<List>`](./List.md#access-control) |
111-
| `clone` | Allow to clone a record | [`<CloneButton>`](./Buttons.md#clonebutton), [`<Edit>`](./Edit.md) |
112-
| `read` | Allow to view a field (or a tab) | [`<Datagrid>`](./Datagrid.md#access-control), [`<SimpleShowLayout>`](./SimpleShowLayout.md#access-control), [`<TabbedShowLayout>`](./TabbedShowLayout.md#access-control) |
113-
| `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) |
103+
| Action | Description | Used In |
104+
| -------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
105+
| `list` | Allow to access the List page | [`<List>`](./List.md#access-control), [`<ListButton>`](./Buttons.md#listbutton), [`<Menu.ResourceItem>`](./Menu.md#access-control) |
106+
| `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) |
107+
| `create` | Allow to access the Create page | [`<Create>`](./Create.md), [`<CreateButton>`](./Buttons.md#createbutton), [`<List>`](./List.md#access-control) |
108+
| `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) |
109+
| `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) |
110+
| `export` | Allow to export data | [`<ExportButton>`](./Buttons.md#exportbutton), [`<List>`](./List.md#access-control) |
111+
| `clone` | Allow to clone a record | [`<CloneButton>`](./Buttons.md#clonebutton), [`<Edit>`](./Edit.md) |
112+
| `read` | Allow to view a field (or a tab) | [`<Datagrid>`](./Datagrid.md#access-control), [`<SimpleShowLayout>`](./SimpleShowLayout.md#access-control), [`<TabbedShowLayout>`](./TabbedShowLayout.md#access-control) |
113+
| `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) |
114114

115115
**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.
116116

‎docs/CRUD.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,6 @@ You can use any of the following components to build the list page:
182182
<tr style="border:none">
183183
<td style="width:50%;border:none;text-align:center">
184184
<a title="<DataTable>" href="./DataTable.html">
185-
<!-- TODO: shoot a new screenshot of Datatable to replace the following one -->
186185
<img src="./img/Datagrid.jpg">
187186
</a>
188187
<a href="./DataTable.html" style="display: block;transform: translateY(-10px);"><code>&lt;DataTable&gt;</code></a>

‎docs/Contributing.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ An exception is the `<Datagrid>` component, which inspects its Field children at
194194
- If a child is wrapped inside another component that doesn't follow the same API, the feature breaks
195195
- Developers typically expect a component to affect its subtree, not its ancestors. Violating this expectation can lead to difficult-to-explain bugs.
196196

197-
We keep child inspection in `<Datagrid>` because there is no superior alternative, but it's an uncommon exception.
197+
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).
198198

199199
## Principle Of Least Documentation
200200

‎docs/Count.md‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,6 @@ import {
147147
DataTable,
148148
DateField,
149149
List,
150-
NumberField,
151150
ReferenceArrayField,
152151
ReferenceManyCount,
153152
SingleFieldList,
@@ -158,15 +157,11 @@ export const PostList = () => (
158157
<DataTable>
159158
<DataTable.Col source="id" />
160159
<DataTable.Col source="title" />
161-
<DataTable.Col source="published_at">
162-
<DateField source="published_at" sortByOrder="DESC" />
163-
</DataTable.Col>
160+
<DataTable.Col source="published_at" sortByOrder="DESC" field={DateField} />
164161
<DataTable.Col label="Comments">
165162
<ReferenceManyCount reference="comments" target="post_id" />
166163
</DataTable.Col>
167-
<DataTable.Col source="views">
168-
<NumberField source="views" sortByOrder="DESC" />
169-
</DataTable.Col>
164+
<DataTable.NumberCol source="views" sortByOrder="DESC" />
170165
<DataTable.Col label="Tags">
171166
<ReferenceArrayField reference="tags" source="tags">
172167
<SingleFieldList>

‎docs/CreateInDialogButton.md‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -366,10 +366,6 @@ const CustomerLayout = () => (
366366
</SimpleShowLayout>
367367
);
368368

369-
// helper component to add actions buttons in a column (children),
370-
// and also in the header (label) of a DataTable
371-
const DataTableActionsColumn = ({ label, children }) => <DataTable.Col label={label}>{children}</DataTable.Col>;
372-
373369
const NestedCustomersDataTable = () => {
374370
const record = useRecordContext();
375371

@@ -411,10 +407,10 @@ const NestedCustomersDataTable = () => {
411407
<SelectField source="sex" choices={sexChoices} />
412408
</DataTable.Col>
413409
{/* Using a component as label is a trick to render it in the DataTable header */}
414-
<DataTableActionsColumn label={createButton}>
410+
<DataTable.Col label={createButton}>
415411
{editButton}
416412
{showButton}
417-
</DataTableActionsColumn>
413+
</DataTable.Col>
418414
</DataTable>
419415
</ReferenceManyField>
420416
);

‎docs/Datagrid.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ title: "The Datagrid Component"
55

66
# `<Datagrid>`
77

8+
> **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.
9+
810
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`.
911

1012
<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>

‎docs/DateField.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ export const PostList = () => (
2121
<DataTable>
2222
<DataTable.Col source="id" />
2323
<DataTable.Col source="title" />
24-
<DataTable.Col source="published_at" field={DateField} />
24+
<DataTable.Col source="published_at">
25+
<DateField source="published_at" />
26+
</DataTable.Col>
2527
...
2628
</DataTable>
2729
</List>

‎docs/EditInDialogButton.md‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -477,10 +477,6 @@ const CustomerLayout = () => (
477477
</SimpleShowLayout>
478478
);
479479

480-
// helper component to add actions buttons in a column (children),
481-
// and also in the header (label) of a DataTable
482-
const DataTableActionsColumn = ({ label, children }) => <DataTable.Col label={label}>{children}</DataTable.Col>;
483-
484480
const NestedCustomersDataTable = () => {
485481
const record = useRecordContext();
486482

@@ -522,10 +518,10 @@ const NestedCustomersDataTable = () => {
522518
<SelectField source="sex" choices={sexChoices} />
523519
</DataTable.Col>
524520
{/* Using a component as label is a trick to render it in the DataTable header */}
525-
<DataTableActionsColumn label={createButton}>
521+
<DataTable.Col label={createButton}>
526522
{editButton}
527523
{showButton}
528-
</DataTableActionsColumn>
524+
</DataTable.Col>
529525
</DataTable>
530526
</ReferenceManyField>
531527
);

‎docs/Features.md‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -428,7 +428,7 @@ Check the following components to learn more about guessers:
428428

429429
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".
430430

431-
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.
431+
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.
432432

433433
<video controls autoplay playsinline muted loop>
434434
<source src="./img/datagrid.mp4" type="video/mp4"/>
@@ -1473,7 +1473,6 @@ import {
14731473
DateField,
14741474
EditButton,
14751475
List,
1476-
NumberField,
14771476
ShowButton,
14781477
} from 'react-admin';
14791478
import Icon from '@mui/icons-material/Person';
@@ -1492,17 +1491,11 @@ export const PostList = () => (
14921491
>
14931492
<DataTable.Col source="id" />
14941493
<DataTable.Col source="title" />
1495-
<DataTable.Col label="Published at">
1496-
<DateField source="published_at" sortByOrder="DESC" />
1497-
</DataTable.Col>
1498-
<DataTable.Col label="Commentable">
1499-
<BooleanField source="commentable" sortable={false} />
1500-
</DataTable.Col>
1501-
<DataTable.Col label="Views">
1502-
<NumberField source="views" sortByOrder="DESC" />
1503-
</DataTable.Col>
1504-
<DataTable.Col EditButton />
1505-
<DataTable.Col ShowButton />
1494+
<DataTable.Col source="published_at" sortByOrder="DESC" field={DateField} />
1495+
<DataTable.Col source="commentable" sortable={false} field={BooleanField} />
1496+
<DataTable.NumberCol source="views" sortByOrder="DESC" />
1497+
<DataTable.Col field={EditButton} />
1498+
<DataTable.Col field={ShowButton} />
15061499
</DataTable>
15071500
</List>
15081501
);
@@ -1706,7 +1699,7 @@ export const PostList = () => {
17061699
) : (
17071700
<DataTable>
17081701
<DataTable.Col source="id" />
1709-
<DataTable.Col label="User">
1702+
<DataTable.Col source="userId" label="User">
17101703
<ReferenceField source="userId" reference="users">
17111704
<TextField source="name" />
17121705
</ReferenceField>

0 commit comments

Comments
 (0)