marmelab · djhi · Jul 4, 2025 · Jun 23, 2025 · Jun 24, 2025 · Jun 24, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # Changelog
 
+## 5.9.1
+
+* Fix `<Datagrid>` empty throws error when used in standalone mode ([#10812](https://github.com/marmelab/react-admin/pull/10812)) ([fzaninotto](https://github.com/fzaninotto))
+* Fix `<DataTable>` does not allow to put a button in the column's header ([#10802](https://github.com/marmelab/react-admin/pull/10802)) ([slax57](https://github.com/slax57))
+* [Doc] Add link to storybook in page toc for components and hooks that have storybook ([#10819](https://github.com/marmelab/react-admin/pull/10819)) ([jonathanarnault](https://github.com/jonathanarnault))
+* [Doc] Add team wiki to demos documentation ([#10816](https://github.com/marmelab/react-admin/pull/10816)) ([jonathanarnault](https://github.com/jonathanarnault))
+* [Doc] Fix anchors and code examples ([#10807](https://github.com/marmelab/react-admin/pull/10807)) ([WiXSL](https://github.com/WiXSL))
+* [Doc] Fix `<DataTable.Col align>` default value and example ([#10806](https://github.com/marmelab/react-admin/pull/10806)) ([slax57](https://github.com/slax57))
+* [Doc] Add `<DataTable hiddenColumns>` documentation ([#10800](https://github.com/marmelab/react-admin/pull/10800)) ([Madeorsk](https://github.com/Madeorsk))
+* [Chore] Sync tips from tips repository ([#10815](https://github.com/marmelab/react-admin/pull/10815)) ([jonathanarnault](https://github.com/jonathanarnault))
+* [Chore] Migrate stories to use DataTable ([#10804](https://github.com/marmelab/react-admin/pull/10804)) ([slax57](https://github.com/slax57))
+* [Chore] Avoid vercel deployment for `gh-pages` branch ([#10803](https://github.com/marmelab/react-admin/pull/10803)) ([djhi](https://github.com/djhi))
+
 ## 5.9.0
 
 * Add support for customization with MUI theme to inputs ([#10772](https://github.com/marmelab/react-admin/pull/10772)) ([Madeorsk](https://github.com/Madeorsk))

diff --git a/docs/Admin.md b/docs/Admin.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The Admin Component"
+storybook_path: react-admin-admin--basic
 ---
 
 # `<Admin>`

diff --git a/docs/AppBar.md b/docs/AppBar.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The AppBar Component"
+storybook_path: ra-ui-materialui-layout-appbar--basic
 ---
 
 # `<AppBar>`

diff --git a/docs/ArrayField.md b/docs/ArrayField.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The ArrayField Component"
+storybook_path: ra-ui-materialui-fields-arrayfield--basic
 ---
 
 # `<ArrayField>`

diff --git a/docs/ArrayInput.md b/docs/ArrayInput.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The ArrayInput Component"
+storybook_path: ra-ui-materialui-input-arrayinput--basic
 ---
 
 # `<ArrayInput>`

diff --git a/docs/AutocompleteArrayInput.md b/docs/AutocompleteArrayInput.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The AutocompleteArrayInput Component"
+storybook_path: ra-ui-materialui-input-autocompletearrayinput--basic
 ---
 
 # `<AutocompleteArrayInput>`

diff --git a/docs/AutocompleteInput.md b/docs/AutocompleteInput.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The AutocompleteInput Component"
+storybook_path: ra-ui-materialui-input-autocompleteinput--basic
 ---
 
 # `<AutocompleteInput>`

diff --git a/docs/BooleanField.md b/docs/BooleanField.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The BooleanField Component"
+storybook_path: ra-ui-materialui-fields-booleanfield--basic
 ---
 
 # `<BooleanField>`

diff --git a/docs/BooleanInput.md b/docs/BooleanInput.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The BooleanInput Component"
+storybook_path: ra-ui-materialui-input-booleaninput--basic
 ---
 
 # `<BooleanInput>`

diff --git a/docs/CanAccess.md b/docs/CanAccess.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "CanAccess"
+storybook_path: ra-core-auth-canaccess--basic
 ---
 
 # `<CanAccess>`

diff --git a/docs/CheckboxGroupInput.md b/docs/CheckboxGroupInput.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The CheckboxGroupInput Component"
+storybook_path: ra-ui-materialui-input-checkboxgroupinput--basic
 ---
 
 # `<CheckboxGroupInput>`

diff --git a/docs/ChipField.md b/docs/ChipField.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The ChipField Component"
+storybook_path: ra-ui-materialui-fields-chipfield--basic
 ---
 
 # `<ChipField>`

diff --git a/docs/Configurable.md b/docs/Configurable.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The Configurable Component"
+storybook_path: ra-ui-materialui-preferences-configurable--basic
 ---
 
 # `<Configurable>`

diff --git a/docs/Confirm.md b/docs/Confirm.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The Confirm Component"
+storybook_path: ra-ui-materialui-layout-confirm--back-click
 ---
 
 # `<Confirm>`

diff --git a/docs/Count.md b/docs/Count.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The Count Component"
+storybook_path: ra-ui-materialui-list-count--basic
 ---
 
 # `<Count>`

diff --git a/docs/Create.md b/docs/Create.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The Create Component"
+storybook_path: ra-ui-materialui-detail-create--basic
 ---
 
 # `<Create>`

diff --git a/docs/CreateBase.md b/docs/CreateBase.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The CreateBase Component"
+storybook_path: ra-core-controller-createbase--default-title
 ---
 
 # `<CreateBase>`

diff --git a/docs/CustomRoutes.md b/docs/CustomRoutes.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The CustomRoutes Component"
+storybook_path: ra-core-core-customroutes--authenticated-custom-route
 ---
 
 # `<CustomRoutes>`

diff --git a/docs/DataTable.md b/docs/DataTable.md
@@ -1,12 +1,15 @@
 ---
 layout: default
 title: "The DataTable Component"
+storybook_path: ra-ui-materialui-list-datatable--basic
 ---
 
 # `<DataTable>`
 
 The `<DataTable>` component renders a list of records as a table. It supports sorting, row selection for bulk actions, a collapsible panel, hiding and reordering columns, dynamic row and cell styles, and more.
 
+<iframe src="https://www.youtube-nocookie.com/embed/IHjBd9WrVcI" 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>
+
 ## Usage
 
 Use `<DataTable>` inside a `ListContext` (e.g., as a descendent of [`<List>`](./List.md#list) or [`<ReferenceManyField>`](./ReferenceManyField.md)). Define the table columns with its children using `<DataTable.Col>` components:
@@ -141,7 +144,7 @@ const PostList = () => (
 ```
 {% endraw %}
 
-**Tip**: `<DataTable>` also lets you customize the table [header](#header) and [footer](#footer) components.
+**Tip**: `<DataTable>` also lets you customize the table [header](#head) and [footer](#foot) components.
 
 ## `bulkActionButtons`
 
@@ -691,6 +694,33 @@ const PostList = () => (
 
 **Tip**: To handle sorting in your custom DataTable head component, check out the [Building a custom sort control](./ListTutorial.md#building-a-custom-sort-control) section.
 
+## `hiddenColumns`
+
+By default, `<DataTable>` renders all `<DataTable.Col>` children. Use the `hiddenColumns` property to set hidden columns by default.
+
+```tsx
+import { ColumnsButton, TopToolbar, List, DataTable } from 'react-admin';
+
+const PostListActions = () => (
+        <TopToolbar>
+          <ColumnsButton />
+        </TopToolbar>
+)
+
+const PostList = () => (
+    <List actions={<PostListActions />}>
+        <DataTable hiddenColumns={['id', 'author']}>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="title" />
+            <DataTable.Col source="author" />
+            <DataTable.Col source="year" />
+        </DataTable>
+    </List>
+);
+```
+
+Using `hiddenColumns` instead of removing `<DataTable.Col>` elements allows hidden columns to be displayed again using a `<ColumnsButton>`, as explained in the [Hiding or Reordering Columns](#hiding-or-reordering-columns) section.
+
 ## `hover`
 
 By default, when a user hovers over a row, the background color changes to indicate the row is active. Set the `hover` prop to `false` to disable this behavior.
@@ -714,7 +744,7 @@ Using the `isRowExpandable` prop, you can customize which rows can have a collap
 For instance, this code shows an expand button only for rows that have a detail to show:
 
 ```tsx
-import { List, DataTable useRecordContext } from 'react-admin';
+import { List, DataTable, useRecordContext } from 'react-admin';
 
 const PostPanel = () => {
     const record = useRecordContext();
@@ -960,13 +990,13 @@ Additional props are passed to [the MUI `<TableCell>`](https://mui.com/material-
 
 ### `align`
 
-Table cells are right-aligned by default. To left-align a column, set the `align` prop to `"left"`. This is useful for numeric columns:
+Table cells are left-aligned by default. To right-align a column, set the `align` prop to `"right"`. This is useful for numeric columns:
 
 ```tsx
 <DataTable.Col 
     source="nb_views"
     field={NumberField}
-    align="left" 
+    align="right" 
 />
 ```
 
@@ -1616,7 +1646,7 @@ An action column should not be sortable, so you don't need to specify a `source`
 
 ```tsx
 <DataTable.Col>
-    <EditButton>
+    <EditButton />
     <DeleteButton />
 </DataTable.Col>
 ```
@@ -1652,9 +1682,9 @@ const ProductList = () => (
             </CanAccess>
             <CanAccess action="read" resource="products.reference">
                 <DataTable.Col source="reference" />
-            </DataTable.Col>
+            </CanAccess>
             <CanAccess action="read" resource="products.category_id">
-                <DataTable.Col source="category_id" />
+                <DataTable.Col source="category_id">
                     <ReferenceField source="category_id" reference="categories" />
                 </DataTable.Col>
             </CanAccess>
@@ -1686,9 +1716,9 @@ As this is quite verbose, you may prefer using the `<Datagrid>` component from t
 - Users must have the `'read'` permission on a resource column to see it in the export:
 
 ```jsx
-{ action: "read", resource: `${resource}.${source}` }.
+{ action: "read", resource: `${resource}.${source}` }
 // or
-{ action: "read", resource: `${resource}.*` }.
+{ action: "read", resource: `${resource}.*` }
 ```
 
 - Users must have the `'delete'` permission on the resource to see the `<BulkExportButton>`.
@@ -1757,7 +1787,7 @@ const ProductList = () => (
 **Tip**: Adding the 'read' permission for the resource itself doesn't grant the 'read' permission on the columns. If you want a user to see all possible columns, add the 'read' permission on columns using a wildcard:
 
 ```jsx
-{ action: "read", resource: "products.*" }.
+{ action: "read", resource: "products.*" }
 ```
 
 ## Typescript

diff --git a/docs/Datagrid.md b/docs/Datagrid.md
@@ -1,11 +1,12 @@
 ---
 layout: default
 title: "The Datagrid Component"
+storybook_path: ra-ui-materialui-list-datagrid--basic
 ---
 
 # `<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.
+> **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. If you want to migrate to `<DataTable>`, we offer a [codemod](./DataTable.md#migrating-from-datagrid-to-datatable) that makes it easier.
 
 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`.
 

diff --git a/docs/DateField.md b/docs/DateField.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The DateField Component"
+storybook_path: ra-ui-materialui-fields-datefield--basic
 ---
 
 # `<DateField>`

diff --git a/docs/DateInput.md b/docs/DateInput.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The DateInput Component"
+storybook_path: ra-ui-materialui-input-dateinput--basic
 ---
 
 # `<DateInput>`

diff --git a/docs/DateTimeInput.md b/docs/DateTimeInput.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The DateTimeInput Component"
+storybook_path: ra-ui-materialui-input-datetimeinput--basic
 ---
 
 # `<DateTimeInput>`

diff --git a/docs/Demos.md b/docs/Demos.md
@@ -232,6 +232,35 @@ If you want to see what react-admin is capable of, or if you want to learn from
             </div>
         </div>
     </div>
+    <div class="card">
+        <a href="#team-wiki" class="no-decoration"><img src="./img/team-wiki.jpg" alt="Kanban Board"></a>
+        <div class="content-card">
+            <a href="#team-wiki" class="no-decoration">
+                <p class="title-card"><b>Team Wiki</b></p>
+                <p  class="description-card">A Team Wiki board built with React-admin Enterprise Edition</p>
+            </a>
+        </div>
+        <div class="card-footer">
+            <div class="links-container">
+                <p><b><a href="https://marmelab.com/team-wiki/" class="demo link">Demo</a></b></p>
+                <p><b><a href="https://github.com/marmelab/team-wiki" class="source-code link">Source code</a></b></p>
+            </div>
+        </div>
+    </div>
+    <div class="card">
+        <a href="#broadcom-layer-7-api-hub" class="no-decoration"><img src="https://marmelab.com/static/bcb26e245e6e50e8f13631a156727d2e/46097/API_Hub.png" alt="Developer Portal"></a>
+        <div class="content-card">
+            <a href="#broadcom-layer-7-api-hub" class="no-decoration">
+                <p class="title-card"><b>Developer portal</b></p>
+                <p  class="description-card">Interactive documentation and rights administration for an API gateway</p>
+            </a>
+        </div>
+        <div class="card-footer">
+            <div class="links-container">
+                <p><b><a href="https://github.com/CAAPIM/APIHub" class="source-code link">Source code</a></b></p>
+            </div>
+        </div>
+    </div>
 </div>
 
 ## E-commerce
@@ -414,11 +443,32 @@ The source shows how to implement the following features:
 - [InPlace Edition](https://github.com/djhi/atomic-pm/blob/main/src/ra/EditInPlaceInput.tsx)
 - [Drag & drop](https://github.com/djhi/atomic-pm/blob/main/src/boards/BoardShow.tsx)
 
+## Team Wiki
+
+A Team Wiki board built with React-admin Enterprise edition.
+
+[![Team wiki](./img/team-wiki.jpg)](https://marmelab.com/team-wiki/)
+
+* Demo: [https://marmelab.com/team-wiki/](https://marmelab.com/team-wiki/)
+* Source code: [https://github.com/marmelab/team-wiki](https://github.com/marmelab/team-wiki)
+
+It leverages the following Enterprise Edition features:
+- [Navigation](https://react-admin-ee.marmelab.com/documentation/ra-navigation)
+- [History](https://react-admin-ee.marmelab.com/documentation/ra-history)
+- [Markdown](https://react-admin-ee.marmelab.com/documentation/ra-markdown)
+- [Search](https://react-admin-ee.marmelab.com/documentation/ra-search)
+- [Tree](https://react-admin-ee.marmelab.com/documentation/ra-tree)
+
+The source shows how to implement the following features:
+- [AppBar with Custom Navigation and Search](https://github.com/marmelab/team-wiki/blob/main/src/layout/AppBar.tsx)
+- [Customizing the Markdown Input](https://github.com/marmelab/team-wiki/blob/main/src/inputs/PageMarkdownInput.tsx)
+- [Custom List](https://github.com/marmelab/team-wiki/blob/main/src/resources/pages/PageList.tsx)
+
 ## Broadcom Layer 7 API Hub
 
 A framework built on top of react-admin for building developer portals.
 
-<div class="iframe-wrapper"><iframe src="https://www.youtube.com/embed/ecHsgNmug9E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+[![Broadcom API Hub](https://marmelab.com/static/bcb26e245e6e50e8f13631a156727d2e/46097/API_Hub.png)](https://github.com/CAAPIM/APIHub)
 
 * Source code: [https://github.com/CAAPIM/APIHub](https://github.com/CAAPIM/APIHub)
 

diff --git a/docs/Edit.md b/docs/Edit.md
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: "The Edit Component"
+storybook_path: ra-ui-materialui-detail-edit--basic
 ---
 
 # `<Edit>`