diff --git a/docs/AccordionForm.md b/docs/AccordionForm.md
index 97d577027d4..14246c9cbac 100644
--- a/docs/AccordionForm.md
+++ b/docs/AccordionForm.md
@@ -8,8 +8,8 @@ title: "AccordionForm"
This [Enterprise Edition](https://react-admin-ee.marmelab.com) component offers an alternative layout for Edit and Create forms, where Inputs are grouped into expandable panels.
@@ -73,8 +73,8 @@ By default, each child accordion element handles its expanded state independentl
You can also use the `` component as a child of `` for secondary inputs:
@@ -421,9 +421,9 @@ const CustomerEdit = () => (
Renders children (Inputs) inside a Material UI `` element without a Card style. To be used as child of a `` or a `` element.
diff --git a/docs/AppBar.md b/docs/AppBar.md
index c5465025f15..99a87cc40c9 100644
--- a/docs/AppBar.md
+++ b/docs/AppBar.md
@@ -418,8 +418,8 @@ export const MyAppBar = () => (
A common use case for app bar customization is to add a site-wide search engine. The `` component is a good starting point for this.
diff --git a/docs/Breadcrumb.md b/docs/Breadcrumb.md
index 8df79807742..921fd31934c 100644
--- a/docs/Breadcrumb.md
+++ b/docs/Breadcrumb.md
@@ -8,8 +8,8 @@ title: "The Breadcrumb Component"
This [Enterprise Edition](https://react-admin-ee.marmelab.com) component renders a breadcrumb path that automatically adapts to the page location. It helps users navigate large web applications.
@@ -303,7 +303,7 @@ const MyBreadcrumb = () => (
The `` component is responsible for rendering individual breadcrumb items. It displays the item when the app's location matches the specified `name`. You can nest this component to create breadcrumb paths of varying depths.
-
+
It requires the following props:
diff --git a/docs/Buttons.md b/docs/Buttons.md
index 2286acf5ee5..a08ed15f675 100644
--- a/docs/Buttons.md
+++ b/docs/Buttons.md
@@ -821,14 +821,14 @@ See [The Menu documentation](./Menu.md) for more details.
**Tip**: If you need a multi-level menu, or a Mega Menu opening panels with custom content, check out [the `ra-navigation` module](https://react-admin-ee.marmelab.com/documentation/ra-navigation) (part of the [Enterprise Edition](https://react-admin-ee.marmelab.com))
diff --git a/docs/Calendar.md b/docs/Calendar.md
index 057b9ae8963..bab91f58a8c 100644
--- a/docs/Calendar.md
+++ b/docs/Calendar.md
@@ -8,8 +8,8 @@ title: "The Calendar Component"
This [Enterprise Edition](https://react-admin-ee.marmelab.com) component, part of [the `ra-calendar` module](https://react-admin-ee.marmelab.com/documentation/ra-calendar), renders a list of events as a calendar.
diff --git a/docs/ContainerLayout.md b/docs/ContainerLayout.md
index 2721b8d0930..83c8779b008 100644
--- a/docs/ContainerLayout.md
+++ b/docs/ContainerLayout.md
@@ -7,7 +7,7 @@ title: "ContainerLayout"
This [Enterprise Edition](https://react-admin-ee.marmelab.com) component offers an alternative to react-admin's `` for applications with a limited number of resources. It displays the content in a centered container, has no sidebar, and uses the top bar for navigation.
-
+
`` is part of the [ra-navigation](https://react-admin-ee.marmelab.com/documentation/ra-navigation#containerlayout) package.
diff --git a/docs/Create.md b/docs/Create.md
index 5336cb71d06..4335d2d0aa0 100644
--- a/docs/Create.md
+++ b/docs/Create.md
@@ -551,8 +551,8 @@ Note: In order to get the `mutationOptions` being considered, you have to set th
`` is designed to be a page component, passed to the `create` prop of the `` component. But you may want to let users create a record from another page.
diff --git a/docs/CreateDialog.md b/docs/CreateDialog.md
index 36d1ee25d12..4611d9b9ded 100644
--- a/docs/CreateDialog.md
+++ b/docs/CreateDialog.md
@@ -8,8 +8,8 @@ title: "CreateDialog"
This [Enterprise Edition](https://react-admin-ee.marmelab.com) component offers a replacement to [the `` component](./Create.md) allowing users to create records without leaving the context of the list page.
@@ -248,8 +248,8 @@ This may not be what you want if you need to display the creation dialog in anot
In that case, use [the `` component](./CreateInDialogButton.md), which doesn't create a route, but renders the dialog when the user clicks on it.
diff --git a/docs/CreateInDialogButton.md b/docs/CreateInDialogButton.md
index 34663eca044..ff2483b995e 100644
--- a/docs/CreateInDialogButton.md
+++ b/docs/CreateInDialogButton.md
@@ -8,8 +8,8 @@ title: "CreateInDialogButton"
This [Enterprise Edition](https://react-admin-ee.marmelab.com) component offers a way to open a `` view inside a dialog, hence allowing to create a new record without leaving the current view.
diff --git a/docs/Datagrid.md b/docs/Datagrid.md
index 45853561112..a2eec06231b 100644
--- a/docs/Datagrid.md
+++ b/docs/Datagrid.md
@@ -939,7 +939,7 @@ const PostList = () => (
**Tip**: For even more column customization (resizable columns, column grouping, etc.), check out the [``](./DatagridAG.md) component.
@@ -953,8 +953,8 @@ The separation between list pages and edit pages is not always relevant. Sometim
### ``: Editable Rows
@@ -1019,7 +1019,7 @@ Check [the `` documentation](./EditableDatagrid.md) for more d
### ``: Spreadsheet-like Interface
@@ -1047,7 +1047,7 @@ Additionally, `` is compatible with the [Enterprise version of ag-gr
- And more...
@@ -1260,7 +1260,7 @@ const PostList = () => (
**Tip**: For even more column customization (resizable columns, column grouping, etc.), check out the [``](./DatagridAG.md) component.
diff --git a/docs/DatagridAG.md b/docs/DatagridAG.md
index 13cd771c53d..95a1fa65434 100644
--- a/docs/DatagridAG.md
+++ b/docs/DatagridAG.md
@@ -10,7 +10,7 @@ This [Enterprise Edition](https://react-admin-ee.marmelab.com) **Note:** This component is still in **alpha** stage. Major changes may still be introduced in the future.
@@ -52,7 +52,7 @@ Additionally, `` is compatible with the [Enterprise version of ag-gr
- And more...
@@ -91,7 +91,7 @@ export const PostList = () => {
};
```
-
+
Here are the important things to note:
@@ -190,7 +190,7 @@ export const PostList = () => {
};
```
-
+
Have a look at [the ag-grid documentation](https://www.ag-grid.com/react-data-grid/column-properties/) for the exhaustive list of column properties.
@@ -224,7 +224,7 @@ export const PostList = () => {
};
```
-
+
## `cellRenderer`
@@ -268,7 +268,7 @@ export const CommentList = () => {
};
```
-
+
**Note:** You still need to pass the `source` prop to the field.
@@ -419,7 +419,7 @@ export const PostList = () => {
};
```
-
+
**Tip:** Remember to import the corresponding stylesheet (e.g. `ag-theme-balham[.min].css` for `ag-theme-balham`).
@@ -458,8 +458,8 @@ const CarList = () => {
```
@@ -517,7 +517,7 @@ export const PostList = () => {
{% endraw %}
-
+
It can also be helpful to change the default grid's height (`calc(100vh - 96px - ${theme.spacing(1)})`):
@@ -547,7 +547,7 @@ export const PostList = () => {
{% endraw %}
-
+
## Accessing The Grid And Column APIs
@@ -617,7 +617,7 @@ export const PostList = () => {
};
```
-
+
Alternatively, you can use the grid's `api` to call `autoSizeAllColumns` to automatically resize all columns to fit their content:
@@ -651,7 +651,7 @@ export const PostList = () => {
};
```
-
+
Check out the [Column Sizing](https://www.ag-grid.com/react-data-grid/column-sizing/) documentation for more information and more alternatives.
@@ -701,7 +701,7 @@ export const PostList = () => {
};
```
-
+
Just like with ``, you can customize the bulk actions by passing a [`bulkActionButtons`](./Datagrid.md#bulkactionbuttons) prop to ``.
@@ -748,8 +748,8 @@ export const PostList = () => {
By default, `` renders pagination controls at the bottom of the list. You can disable these controls to switch to an infinite pagination mode, where the grid shows the next rows on scroll. Thanks to [ag-grid's DOM virtualization](https://www.ag-grid.com/react-data-grid/dom-virtualisation/), this mode causes no performance problem.
@@ -785,7 +785,7 @@ const CarList = () => {
If you have subscribed to the [Enterprise version of ag-grid](https://www.ag-grid.com/react-data-grid/licensing/), you can also add a [Status Bar](https://www.ag-grid.com/react-data-grid/status-bar/) to show the total number of rows.
-
+
```tsx
import 'ag-grid-community/styles/ag-grid.css';
@@ -825,7 +825,7 @@ const CarList = () => {
By default, editing is enabled on cells, which means you can edit a cell by double-clicking on it, and it will trigger a call to the dataProvider's `update` function.
-
+
However, if you'd like to update the full row at once instead, you can enable full row editing by passing `editType="fullRow"` to ``:
@@ -848,7 +848,7 @@ export const PostList = () => {
};
```
-
+
## Disabling Cell Edition
@@ -964,6 +964,6 @@ const OlympicWinnersList = () => {
```
diff --git a/docs/DualListInput.md b/docs/DualListInput.md
index f5048f12d0b..3adc5113369 100644
--- a/docs/DualListInput.md
+++ b/docs/DualListInput.md
@@ -8,8 +8,8 @@ title: "The DualListInput Component"
This [Enterprise Edition](https://react-admin-ee.marmelab.com) component allows to edit array values, one-to-many or many-to-many relationships by moving items from one list to another.
diff --git a/docs/Edit.md b/docs/Edit.md
index 1d2eec2bf88..aff28bbb454 100644
--- a/docs/Edit.md
+++ b/docs/Edit.md
@@ -696,8 +696,8 @@ You can do the same for error notifications, by passing a custom `onError` call
`` is designed to be a page component, passed to the `edit` prop of the `` component. But you may want to let users edit a record from another page.
diff --git a/docs/EditDialog.md b/docs/EditDialog.md
index 916b58cba14..7bf9c3a4b54 100644
--- a/docs/EditDialog.md
+++ b/docs/EditDialog.md
@@ -8,8 +8,8 @@ title: "EditDialog"
This [Enterprise Edition](https://react-admin-ee.marmelab.com) component offers a replacement to [the `` component](./Edit.md) allowing users to update records without leaving the context of the list page.
@@ -279,8 +279,8 @@ This may not be what you want if you need to display the edit dialog in another
In that case, use [the `` component](./EditInDialogButton.md), which doesn't create a route, but renders the dialog when the user clicks on it.
diff --git a/docs/EditInDialogButton.md b/docs/EditInDialogButton.md
index c7619c7524c..05e71e2bb22 100644
--- a/docs/EditInDialogButton.md
+++ b/docs/EditInDialogButton.md
@@ -8,8 +8,8 @@ title: "EditInDialogButton"
This [Enterprise Edition](https://react-admin-ee.marmelab.com) component renders a button opening an `` view inside a dialog, hence allowing to edit a record without leaving the current view.
diff --git a/docs/EditTutorial.md b/docs/EditTutorial.md
index b8f1f261e5a..e3810ffaa84 100644
--- a/docs/EditTutorial.md
+++ b/docs/EditTutorial.md
@@ -949,8 +949,8 @@ Users often need to edit data from several resources in the same form. React-adm
- [``](./ReferenceManyToManyInput.md) lets users edit a list of related records via an associative table
diff --git a/docs/EditableDatagrid.md b/docs/EditableDatagrid.md
index cf244f9f744..b0723226ceb 100644
--- a/docs/EditableDatagrid.md
+++ b/docs/EditableDatagrid.md
@@ -10,8 +10,8 @@ The default react-admin user experience consists of three pages: List, Edit, and
`` is an [Enterprise Edition](https://react-admin-ee.marmelab.com) component that offers an "edit-in-place" experience, allowing users to edit, create, and delete records in place inside a ``.
@@ -574,8 +574,8 @@ const ArtistListWithMeta = () => {
You can let end users customize what fields are displayed in the `` by using the `` component instead, together with the `` component.
diff --git a/docs/Features.md b/docs/Features.md
index 1a49737f794..8e06eb50c2e 100644
--- a/docs/Features.md
+++ b/docs/Features.md
@@ -403,15 +403,15 @@ The basic [`` component](./Datagrid.md) displays a list of records in
The [`` component](./EditableDatagrid.md) lets users edit records in place, without having to navigate to an edit form. It's a great way to speed up data entry.
Finally, the [`` component](./DatagridAG.md) integrates the powerful [AG Grid](https://www.ag-grid.com/) library to provide a rich set of features, such as cell editing, aggregation, row grouping, master detail, clipboard, pivoting, column filtering, export to excel, context menu, tree data, charting, and more.
@@ -444,16 +444,16 @@ In most admin and B2B apps, the most common task is to look for a record. React-
@@ -796,7 +796,7 @@ const CustomerEdit = () => (
```
{% endraw %}
-
+
And if you want something super custom that react-admin doesn't support out of the box, you can always use [react-hook-form](https://react-hook-form.com/) directly.
@@ -833,8 +833,8 @@ const PersonEdit = () => (
You can also use the [``](./SmartRichTextInput.md) component, which lets users edit HTML documents in WYSIWYG with superpowers:
-
component renders a breadcrumb path that automatically adapts to the page location. It helps users navigate large web applications.
@@ -303,7 +303,7 @@ const MyBreadcrumb = () => (
The `
+ 
Global