Merge pull request #9599 from marmelab/doc-datagrid-ag

[Doc] Update `<DatagridAG>` page to reflect latest changes

docs/DatagridAG.md

@@ -14,16 +14,28 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" s
   Your browser does not support the video tag.
 </video>
 
-Here is a (non-exhaustive) list of [features](https://www.ag-grid.com/react-data-grid/) that `<DatagridAG>` offers:
+`<DatagridAG>` supports all the `<Datagrid>` features, plus some exclusive [ag-grid features](https://www.ag-grid.com/react-data-grid/):
 
 -   In place editing of cells or rows
--   Advanced filtering
+-   DOM virtualization
 -   Columns resizing and reordering
--   Automatic page size
--   Automatic column size
+-   Column & Row pinning
+-   Cell expressions
+-   Row animation
+-   Advanced filtering
+-   Keyboard navigation
+-   Row dragging
 -   Themes
--   Row selection and bulk actions
+-   Flashing Cells
+-   Tooltips
+
+The `<DatagridAG>` component provides a smooth integration of ag-grid with react-admin, offering the following features out of the box:
+
+-   Data read from `ListContext`
+-   Loading state
 -   Compatibility with React Admin fields
+-   Persistence of the columns order and size
+-   Bulk Actions
 
 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:
 
@@ -35,6 +47,7 @@ Additionally, `<DatagridAG>` is compatible with the [Enterprise version of ag-gr
 -   Master Detail views
 -   Range Selection
 -   Excel Export
+-   Context Menu
 -   And more...
 
 <video controls autoplay playsinline muted loop>
@@ -57,11 +70,11 @@ yarn add @react-admin/ra-datagrid-ag
 Then, 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';
-import 'ag-grid-community/styles/ag-theme-alpine.css';
 import React from 'react';
 import { List } from 'react-admin';
 import { DatagridAG } from '@react-admin/ra-datagrid-ag';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
 
 export const PostList = () => {
     const columnDefs = [
@@ -81,15 +94,13 @@ export const PostList = () => {
 
 Here are the important things to note:
 
--   You need to import the ag-grid stylesheets `ag-grid.css` and `ag-theme-alpine.css`.
+-   You need to import the ag-grid stylesheets (`ag-grid.css` and `ag-theme-alpine.css`).
 -   To benefit from ag-grid's filtering and sorting features (as well as some Enterprise features like grouping), you need to load the entire list of records client-side. To do so, you must set `<List perPage>` to a high number (e.g. 10,000).
 -   As the pagination is handled by ag-grid, you can disable react-admin's pagination with `<List pagination={false}>`.
 -   The columns are defined using the `columnDefs` prop. See [the dedicated doc section](#columndefs) for more information.
 
 `<DatagridAG>` doesn't currently support the [server-side row model](https://www.ag-grid.com/react-data-grid/row-models/), so you have to load all data client-side. The client-side performance isn't affected by a large number of records, as ag-grid uses [DOM virtualization](https://www.ag-grid.com/react-data-grid/dom-virtualisation/). `<DatagridAG>` has been tested with 10,000 records without any performance issue.
 
-> **Note:** To mitigate an [issue](https://github.com/ag-grid/ag-grid/issues/7241) preventing tree shaking with some bundlers, `<DatagridAG>` uses React's [lazy loading](https://react.dev/reference/react/lazy#suspense-for-code-splitting) by default. This feature relies on [dynamic `import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import), which might require support from your bundler or framework.
-
 ## Props
 
 | Prop                | Required | Type                        | Default                      | Description                                                                                  |
@@ -539,9 +550,9 @@ export const PostList = () => {
 
 ## Accessing The Grid And Column APIs
 
-You can access the grid's `api` and `columnApi` by passing a `ref` to `<DatagridAG>`.
+You can access the grid's `api` by passing a `ref` to `<DatagridAG>`.
 
-In this example, we use the `columnApi` to automatically resize all columns to fit their content on first render:
+In this example, we use the `api` to automatically resize all columns to fit their content on first render:
 
 ```tsx
 import 'ag-grid-community/styles/ag-grid.css';
@@ -559,7 +570,7 @@ export const PostList = () => {
     ];
     const gridRef = React.useRef<AgGridReact>(null);
     const onFirstDataRendered = React.useCallback(() => {
-        gridRef.current.columnApi.autoSizeAllColumns();
+        gridRef.current.api.autoSizeAllColumns();
     }, []);
     return (
         <List perPage={10000} pagination={false}>
@@ -607,7 +618,7 @@ export const PostList = () => {
 
 ![DatagridAG flex](https://marmelab.com/ra-enterprise/modules/assets/DatagridAG-flex.png)
 
-Alternatively, you can use the grid's `columnApi` to call `autoSizeAllColumns` to automatically resize all columns to fit their content:
+Alternatively, you can use the grid's `api` to call `autoSizeAllColumns` to automatically resize all columns to fit their content:
 
 ```tsx
 import 'ag-grid-community/styles/ag-grid.css';
@@ -625,7 +636,7 @@ export const PostList = () => {
     ];
     const gridRef = React.useRef<AgGridReact>(null);
     const onFirstDataRendered = React.useCallback(() => {
-        gridRef.current.columnApi.autoSizeAllColumns();
+        gridRef.current.api.autoSizeAllColumns();
     }, []);
     return (
         <List perPage={10000} pagination={false}>
@@ -931,7 +942,7 @@ const OlympicWinnersList = () => {
     ];
     const gridRef = React.useRef<AgGridReact>(null);
     const onFirstDataRendered = React.useCallback(() => {
-        gridRef.current.columnApi.autoSizeAllColumns();
+        gridRef.current.api.autoSizeAllColumns();
     }, []);
     const defaultColDef = {
         enableRowGroup: true,