Merge branch 'marmelab:master' into disable-radiobuttongroupitem

Author: WiXSL

docs/DataTable.md

@@ -7,6 +7,8 @@ title: "The DataTable Component"
 
 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 +143,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 +693,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 +743,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 +989,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 +1645,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 +1681,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 +1715,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 +1786,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

docs/Demos.md

@@ -232,6 +232,21 @@ 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>
 
 ## E-commerce
@@ -414,6 +429,25 @@ 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.
+
+* 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.

docs/InPlaceEditor.md

@@ -158,7 +158,7 @@ For example, to render a `<SelectField>` in read mode, you can use the following
 
 The component to render in edit mode. By default, it's a `<TextInput>` using the `source` prop.
 
-You can use any [input component](./Input.md) instead, as it renders in a `<Form>`. You will probably need to tweak the input variant, margin and style so that it matches the style of the read mode component.
+You can use any [input component](./Inputs.md) instead, as it renders in a `<Form>`. You will probably need to tweak the input variant, margin and style so that it matches the style of the read mode component.
 
 <video controls autoplay playsinline muted loop>
   <source src="./img/InPlaceEditorField.mp4" type="video/mp4"/>
@@ -293,4 +293,4 @@ You can use the `sx` prop to apply styles to the read mode, edit mode and saving
 
 - `& .RaInPlaceEditor-reading`: The read mode.
 - `& .RaInPlaceEditor-editing`: The editing mode.
-- `& .RaInPlaceEditor-saving`: The saving mode.
+- `& .RaInPlaceEditor-saving`: The saving mode.

docs/Reference.md

@@ -174,6 +174,7 @@ title: "Index"
 
 * [`<SaveButton>`](./SaveButton.md)
 * [`<SavedQueriesList>`](./SavedQueriesList.md)
+* [`<Scheduler>`](./Scheduler.md)<img class="icon" src="./img/premium.svg" alt="React Admin Enterprise Edition icon" />
 * [`<Search>`](./Search.md)<img class="icon" src="./img/premium.svg" alt="React Admin Enterprise Edition icon" />
 * [`<SearchInput>`](./SearchInput.md)
 * [`<SearchWithResult>`](./SearchWithResult.md)<img class="icon" src="./img/premium.svg" alt="React Admin Enterprise Edition icon" />