You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In a custom theme, you can override the style of a component for the entire application using the `components` key.
275
275
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:
277
277
278
278
```jsx
279
279
import { defaultTheme } from'react-admin';
280
280
import { deepmerge } from'@mui/utils';
281
281
282
282
consttheme=deepmerge(defaultTheme, {
283
283
components: {
284
-
RaDatagrid: {
284
+
RaDataTable: {
285
285
styleOverrides: {
286
286
root: {
287
287
backgroundColor:"Lavender",
288
-
"& .RaDatagrid-headerCell": {
288
+
"& .RaDataTable-headerCell": {
289
289
backgroundColor:"MistyRose",
290
290
},
291
291
}
@@ -306,7 +306,7 @@ There are 2 important gotchas here:
306
306
- 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)
307
307
- 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.
308
308
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)).
310
310
311
311
**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.
312
312
@@ -499,11 +499,11 @@ import { defaultTheme } from 'react-admin';
Copy file name to clipboardExpand all lines: docs/ArrayField.md
+26-26Lines changed: 26 additions & 26 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ title: "The ArrayField Component"
9
9
10
10
11
11
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).
13
13
14
14
## Usage
15
15
@@ -35,13 +35,13 @@ title: "The ArrayField Component"
35
35
}
36
36
```
37
37
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>`:
39
39
40
40
```jsx
41
41
import {
42
42
ArrayField,
43
43
ChipField,
44
-
Datagrid,
44
+
DataTable,
45
45
Show,
46
46
SimpleShowLayout,
47
47
SingleFieldList,
@@ -58,11 +58,11 @@ const PostShow = () => (
58
58
</SingleFieldList>
59
59
</ArrayField>
60
60
<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>
66
66
</ArrayField>
67
67
</SimpleShowLayout>
68
68
</Show>
@@ -84,7 +84,7 @@ const PostShow = () => (
84
84
85
85
## `children`
86
86
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).
88
88
89
89
```jsx
90
90
{/* using SingleFieldList as child */}
@@ -94,13 +94,13 @@ const PostShow = () => (
94
94
</SingleFieldList>
95
95
</ArrayField>
96
96
97
-
{/* using Datagrid as child */}
97
+
{/* using DataTable as child */}
98
98
<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>
104
104
</ArrayField>
105
105
106
106
{/* 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
It's very common that your auth logic is so specific that you'll need to write your own `authProvider`. However, the community has built a few open-source Auth Providers that may fit your need:
Copy file name to clipboardExpand all lines: docs/AuthRBAC.md
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -100,17 +100,17 @@ An _action_ is a string, usually a verb, that represents an operation. Examples
100
100
101
101
React-admin already does page-level access control with actions like "list", "show", "edit", "create", and "delete". RBAC checks additional actions in its components:
|`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)|
|`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)|
114
114
115
115
**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.
0 commit comments