Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jan 23, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 27 additions & 16 deletions docs/DatagridAG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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>
Expand All @@ -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 = [
Expand All @@ -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 |
Expand Down Expand Up @@ -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';
Expand All @@ -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}>
Expand Down Expand Up @@ -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';
Expand All @@ -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}>
Expand Down Expand Up @@ -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,
Expand Down
Loading