[Doc] DatagridAG Serendipity

docs/Datagrid.md

@@ -5,9 +5,12 @@ title: "The Datagrid Component"
 
 # `<Datagrid>`
 
-![The `<Datagrid>` component](./img/tutorial_post_list_less_columns.png)
+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`.
 
-The `Datagrid` component renders a list of records as a table. 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`.
+<video controls autoplay playsinline muted loop>
+  <source src="./img/Datagrid.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
 
 ## Usage
 
@@ -16,26 +19,33 @@ The `Datagrid` component renders a list of records as a table. It is usually use
 ```tsx
 // in src/posts.tsx
 import * as React from "react";
-import { List, Datagrid, TextField, EditButton } from 'react-admin';
+import { List, Datagrid, TextField, ReferenceField, EditButton } from 'react-admin';
 
 export const PostList = () => (
     <List>
         <Datagrid>
             <TextField source="id" />
+            <ReferenceField source="user_id" reference="users" />
             <TextField source="title" />
-            <TextField source="body" />
             <EditButton />
         </Datagrid>
     </List>
 );
 ```
 
-You can find more advanced examples of `<Datagrid>` usage in the [demos](./Demos.md). 
+![The `<Datagrid>` component](./img/tutorial_post_list_less_columns.png)
 
-**Tip**: To let users edit the content right in the datagrid, check [`<EditableDatagrid>`](./EditableDatagrid.md)<img class="icon" src="./img/premium.svg" />, an [Enterprise Edition](https://marmelab.com/ra-enterprise) component.
+You can find more advanced examples of `<Datagrid>` usage in the [demos](./Demos.md). 
 
 The `<Datagrid>` is an **iterator** component: it gets an array of records from the `ListContext`, and iterates to display each record in a row. Other examples of iterator component are [`<SimpleList>`](./SimpleList.md) and [`<SingleFieldList>`](./SingleFieldList.md).
 
+**Tip**: If you need more Datagrid features, check out these two alternative components:
+
+- [`<EditableDatagrid>`](./EditableDatagrid.md)<img class="icon" src="./img/premium.svg" /> lets users edit the content right in the datagrid
+- [`<DatagridAG>`](./DatagridAG.md)<img class="icon" src="./img/premium.svg" /> adds suport for column reordering, aggregation, pivoting, row grouping, infinite scroll, etc. 
+
+Both are [Enterprise Edition](https://marmelab.com/ra-enterprise) components.
+
 ## Props
 
 | Prop | Required | Type | Default | Description |
@@ -911,9 +921,21 @@ const PostList = () => (
 
 `<DatagridConfigurable>` accepts the same props as `<Datagrid>`.
 
+**Tip**: For even more column customization (resizable columns, column grouping, etc.), check out the [`<DatagridAG>`](./DatagridAG.md) component.
+
+<video controls autoplay playsinline muted loop>
+  <source src="https://marmelab.com/ra-enterprise/modules/assets/DatagridAG.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
 ## Editable Spreadsheet
 
-You can combine a datagrid and an edition form into a unified spreadsheet view, "à la" Excel. This is useful when you want to let users edit a large number of records at once.
+The separation between list pages and edit pages is not always relevant. Sometimes, you want to let users edit records directly in the list page. React-admin provides two alternative components to edit records in a Datagrid:
+
+- [`<EditableDatagrid>`](./EditableDatagrid.md) leverages the react-admin input components to turn a row into an editable form.
+- [`<DatagridAG>`](./DatagridAG.md) provides a spreadsheet-like interface, "à la" Excel, using the [ag-Grid](https://www.ag-grid.com/) library.
+
+### `<EditableDatagrid>`: Editable Rows
 
 <video controls autoplay playsinline muted loop>
   <source src="https://marmelab.com/ra-enterprise/modules/assets/ra-editable-datagrid-overview.webm" type="video/webm" />
@@ -977,7 +999,44 @@ const ArtistForm = () => (
 );
 ```
 
-Check [the `ra-editable-datagrid` documentation](https://marmelab.com/ra-enterprise/modules/ra-editable-datagrid) for more details.
+Check [the `<EditableDatagrid>` documentation](./EditableDatagrid.md) for more details.
+
+### `<DatagridAG>`: Spreadsheet-like Interface
+
+<video controls autoplay playsinline muted loop>
+  <source src="https://marmelab.com/ra-enterprise/modules/assets/DatagridAG.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
+`<DatagridAG>` is an advanced Datagrid component based on [ag-grid](https://www.ag-grid.com/). Here is a (non-exhaustive) list of [features](https://www.ag-grid.com/react-data-grid/) that `<DatagridAG>` offers:
+
+-   In place editing of cells or rows
+-   Advanced filtering
+-   Columns resizing and reordering
+-   Automatic page size
+-   Automatic column size
+-   Themes
+-   Row selection and bulk actions
+-   Compatibility with React Admin fields
+
+Additionally, `<DatagridAG>` is compatible with the [Enterprise version of ag-grid](https://www.ag-grid.com/react-data-grid/licensing/), which offers even more features:
+
+-   Row Grouping
+-   Aggregation
+-   Tree Data
+-   Pivoting
+-   More advanced filtering
+-   Master Detail views
+-   Range Selection
+-   Excel Export
+-   And more...
+
+<video controls autoplay playsinline muted loop>
+  <source src="https://marmelab.com/ra-enterprise/modules/assets/DatagridAG-enterprise.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
+Check [the `<DatagridAG>` documentation](./DatagridAG.md) for more details.
 
 ## Fields And Permissions
 
@@ -1183,6 +1242,13 @@ const PostList = () => (
 
 `<SelectColumnsButton>` must be used in conjunction with `<DatagridConfigurable>`, the configurable version of `<Datagrid>`, described in the next section.
 
+**Tip**: For even more column customization (resizable columns, column grouping, etc.), check out the [`<DatagridAG>`](./DatagridAG.md) component.
+
+<video controls autoplay playsinline muted loop>
+  <source src="https://marmelab.com/ra-enterprise/modules/assets/DatagridAG.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
 ## Hiding Checkboxes
 
 You can hide the checkbox column by passing `false` to the [`bulkActionButtons`](#bulkactionbuttons) prop:

docs/DatagridAG.md

@@ -42,11 +42,19 @@ Additionally, `<DatagridAG>` is compatible with the [Enterprise version of ag-gr
   Your browser does not support the video tag.
 </video>
 
-Check [the `ra-editable-datagrid` documentation](https://marmelab.com/ra-enterprise/modules/ra-editable-datagrid#datagridag) for more details.
-
 ## Usage
 
-Use `<DatagridAG>` as a child of a react-admin `<List>`, `<ReferenceManyField>`, or any other component that creates a `ListContext`.
+First, install the `@react-admin/ra-editable-datagrid` package:
+
+```sh
+npm install --save @react-admin/ra-editable-datagrid
+# or
+yarn add @react-admin/ra-editable-datagrid
+```
+
+**Tip**: `ra-editable-datagrid` is hosted in a private npm registry. You need to subscribe to one of the [Enterprise Edition](https://marmelab.com/ra-enterprise/) plans to access this package.
+
+Than, use `<DatagridAG>` as a child of a react-admin `<List>`, `<ReferenceManyField>`, or any other component that creates a `ListContext`.
 
 ```tsx
 import 'ag-grid-community/styles/ag-grid.css';

docs/EditableDatagrid.md

@@ -15,7 +15,17 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" s
 
 ## Usage
 
-`<EditableDatagrid>` is a drop-in replacement for `<Datagrid>`. It expects 2 additional props: `createForm` and `editForm`, the components to be displayed when a user creates or edits a row. The `<RowForm>` component allows to create such forms using react-admin Input components. 
+First, install the `@react-admin/ra-editable-datagrid` package:
+
+```sh
+npm install --save @react-admin/ra-editable-datagrid
+# or
+yarn add @react-admin/ra-editable-datagrid
+```
+
+**Tip**: `ra-editable-datagrid` is hosted in a private npm registry. You need to subscribe to one of the [Enterprise Edition](https://marmelab.com/ra-enterprise/) plans to access this package.
+
+Than, use `<EditableDatagrid>` as a child of a react-admin `<List>`, `<ReferenceManyField>`, or any other component that creates a `ListContext`.
 
 ```jsx
 import {
@@ -71,4 +81,7 @@ const ArtistForm = () => (
 );
 ```
 
+`<EditableDatagrid>` is a drop-in replacement for `<Datagrid>`. It expects 2 additional props: `createForm` and `editForm`, the components to be displayed when a user creates or edits a row. The `<RowForm>` component allows to create such forms using react-admin Input components. 
+
+
 Check [the `ra-editable-datagrid` documentation](https://marmelab.com/ra-enterprise/modules/ra-editable-datagrid) for more details.

docs/Features.md

@@ -297,6 +297,32 @@ Check the following components to learn more about guessers:
 - [`<EditGuesser>`](./EditGuesser.md)
 - [`<ShowGuesser>`](./ShowGuesser.md)
 
+## Powerful Datagrid Components
+
+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".
+
+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.
+
+<video controls autoplay playsinline muted loop>
+  <source src="./img/Datagrid.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
+The [`<EditableDatagrid>` 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.
+
+<video controls autoplay playsinline muted loop>
+  <source src="https://marmelab.com/ra-enterprise/modules/assets/ra-editable-datagrid-overview.webm" type="video/webm" />
+  <source src="https://marmelab.com/ra-enterprise/modules/assets/ra-editable-datagrid-overview.mp4" type="video/mp4" />
+  Your browser does not support the video tag.
+</video>
+
+Finally, the [`<DatagridAG>` 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.
+
+<video controls autoplay playsinline muted loop>
+  <source src="https://marmelab.com/ra-enterprise/modules/assets/DatagridAG-enterprise.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
 ## Search & Filtering
 
 In most admin and B2B apps, the most common task is to look for a record. React-admin includes many features to help you **build a user experience that streamlines the search workflow**.

docs/ListTutorial.md

@@ -494,6 +494,7 @@ const App = () => (
 The components you can use as child of `<List>` are called "List Iterator". They render a list of records. `<Datagrid>` is such a List Iterator, but react-admin provides many more:
 
 - [`<Datagrid>`](./Datagrid.md)
+- [`<DatagridAG>`](./DatagridAG.md)
 - [`<SimpleList>`](./SimpleList.md)
 - [`<SingleFieldList>`](./SingleFieldList.md)
 - [`<EditableDatagrid>`](./EditableDatagrid.md)