From ffc685bc9b8d6261e7fcaa0b8fda721651c001c3 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Kaiser Date: Fri, 24 Nov 2023 10:31:55 +0100 Subject: [PATCH 1/2] [no ci] report changes from 'persist column order/size in store' --- docs/DatagridAG.md | 86 ++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 76 insertions(+), 10 deletions(-) diff --git a/docs/DatagridAG.md b/docs/DatagridAG.md index f65623e75fa..5c9bf96cbf2 100644 --- a/docs/DatagridAG.md +++ b/docs/DatagridAG.md @@ -90,16 +90,17 @@ Here are the important things to note: ## Props -| Prop | Required | Type | Default | Description | -| --- | --- | --- | --- | --- | -| `columnDefs` | Required | Array | n/a | The columns definitions | -| `bulkActionButtons` | Optional | Element | `` | The component used to render the bulk action buttons | -| `cellRenderer` | Optional | String, Function or Element | | Allows to use a custom component to render the cell content | -| `defaultColDef` | Optional | Object | | The default column definition (applied to all columns) | -| `mutationOptions` | Optional | Object | | The mutation options | -| `theme` | Optional | String | `'ag-theme-alpine'` | The name of the ag-grid theme | -| `pagination` | Optional | Boolean | `true` | Enable or disable pagination | -| `sx` | Optional | Object | | The sx prop passed down to the wrapping `
` element | +| Prop | Required | Type | Default | Description | +| ------------------- | -------- | --------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------- | +| `columnDefs` | Required | Array | n/a | The columns definitions | +| `bulkActionButtons` | Optional | Element | `` | The component used to render the bulk action buttons | +| `cellRenderer` | Optional | String, Function or Element | | Allows to use a custom component to render the cell content | +| `defaultColDef` | Optional | Object | | The default column definition (applied to all columns) | +| `mutationOptions` | Optional | Object | | The mutation options | +| `preferenceKey` | Optional | String or `false` | `${resource}.ag-grid.params` | The key used to persist columns order and sizing in the Store. `false` disables persistence. | +| `sx` | Optional | Object | | The sx prop passed down to the wrapping `
` element | +| `theme` | Optional | String | `'ag-theme-alpine'` | The name of the ag-grid theme | +| `pagination` | Optional | Boolean | `true` | Enable or disable pagination | `` also accepts the same props as [``](https://www.ag-grid.com/react-data-grid/grid-options/) with the exception of `rowData`, since the data is fetched from the List context. @@ -336,6 +337,49 @@ export const PostList = () => { {% endraw %} +This also allows to display a notification after the mutation succeeds. + +{% raw %} + +```tsx +import 'ag-grid-community/styles/ag-grid.css'; +import 'ag-grid-community/styles/ag-theme-alpine.css'; +import React from 'react'; +import { List, useNotify } from 'react-admin'; +import { DatagridAG } from '@react-admin/ra-editable-datagrid'; + +export const PostList = () => { + const columnDefs = [ + { field: 'title' }, + { field: 'published_at' }, + { field: 'body' }, + ]; + const notify = useNotify(); + const onSuccess = React.useCallback(() => { + notify('ra.notification.updated', { + type: 'info', + messageArgs: { + smart_count: 1, + }, + undoable: true, + }); + }, [notify]); + return ( + + + + ); +}; +``` + +{% endraw %} + ## `theme` You can use a different theme for the grid by passing a `theme` prop. You can for instance use one of the [themes provided by ag-grid](https://www.ag-grid.com/react-data-grid/themes/), like `ag-theme-balham` or `ag-theme-alpine-dark`: @@ -405,6 +449,28 @@ const CarList = () => { Your browser does not support the video tag. +### `preferenceKey` + +`` will store the order and size of columns in the [Store](./Store.md), under the key `${resource}.ag-grid.params`. + +If you wish to change the key used to store the columns order and size, you can pass a `preferenceKey` prop to ``. + +```tsx + + + +``` + +If, instead, you want to disable the persistence of the columns order and size, you can pass `false` to the `preferenceKey` prop: + +```tsx + + + +``` + +**Note:** Saving the columns size in the Store is disabled when using the [`flex` config](https://www.ag-grid.com/react-data-grid/column-sizing/#column-flex). + ## `sx` You can also use [the `sx` prop](./SX.md) to customize the grid's style: From b967662eba19556c05f6b3a4e11fad227142fe2f Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Kaiser Date: Fri, 24 Nov 2023 10:34:03 +0100 Subject: [PATCH 2/2] [no ci] Replace package to ra-datagrid-ag --- docs/DatagridAG.md | 52 +++++++++++++++++++++++----------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/docs/DatagridAG.md b/docs/DatagridAG.md index 5c9bf96cbf2..080ccab0f2f 100644 --- a/docs/DatagridAG.md +++ b/docs/DatagridAG.md @@ -44,15 +44,15 @@ Additionally, `` is compatible with the [Enterprise version of ag-gr ## Usage -First, install the `@react-admin/ra-editable-datagrid` package: +First, install the `@react-admin/ra-datagrid-ag` package: ```sh -npm install --save @react-admin/ra-editable-datagrid +npm install --save @react-admin/ra-datagrid-ag # or -yarn add @react-admin/ra-editable-datagrid +yarn add @react-admin/ra-datagrid-ag ``` -**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. +**Tip**: `ra-datagrid-ag` 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. Then, use `` as a child of a react-admin ``, ``, or any other component that creates a `ListContext`. @@ -61,7 +61,7 @@ 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-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const PostList = () => { const columnDefs = [ @@ -142,7 +142,7 @@ 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-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; const truncate = (str: string, n: number) => { return str.length > n ? str.slice(0, n - 1) + '...' : str; @@ -191,7 +191,7 @@ 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-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const PostList = () => { const columnDefs = [ @@ -221,7 +221,7 @@ import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; import React from 'react'; import { EmailField, List, ReferenceField, TextField } from 'react-admin'; -import { DatagridAG } from '@react-admin/ra-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const CommentList = () => { const columnDefs = [ @@ -267,7 +267,7 @@ import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; import React from 'react'; import { List, BulkExportButton, BulkDeleteButton } from 'react-admin'; -import { DatagridAG } from '@react-admin/ra-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; const PostBulkActionButtons = () => ( <> @@ -313,7 +313,7 @@ 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-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const PostList = () => { const columnDefs = [ @@ -346,7 +346,7 @@ import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; import React from 'react'; import { List, useNotify } from 'react-admin'; -import { DatagridAG } from '@react-admin/ra-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const PostList = () => { const columnDefs = [ @@ -389,7 +389,7 @@ 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-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const PostList = () => { const columnDefs = [ @@ -420,7 +420,7 @@ 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-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; const CarList = () => { const columnDefs = [ @@ -482,7 +482,7 @@ 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-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const PostList = () => { const columnDefs = [ @@ -514,7 +514,7 @@ 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-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const PostList = () => { const columnDefs = [ @@ -547,7 +547,7 @@ import 'ag-grid-community/styles/ag-theme-alpine.css'; import React from 'react'; import { AgGridReact } from 'ag-grid-react'; import { List } from 'react-admin'; -import { DatagridAG } from '@react-admin/ra-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const PostList = () => { const columnDefs = [ @@ -584,7 +584,7 @@ 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-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const PostList = () => { const columnDefs = [ @@ -613,7 +613,7 @@ import 'ag-grid-community/styles/ag-theme-alpine.css'; import React from 'react'; import { AgGridReact } from 'ag-grid-react'; import { List } from 'react-admin'; -import { DatagridAG } from '@react-admin/ra-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const PostList = () => { const columnDefs = [ @@ -664,7 +664,7 @@ 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-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const PostList = () => { const columnDefs = [ @@ -696,7 +696,7 @@ import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; import React from 'react'; import { List, BulkExportButton, BulkDeleteButton } from 'react-admin'; -import { DatagridAG } from '@react-admin/ra-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; const PostBulkActionButtons = () => ( <> @@ -746,7 +746,7 @@ 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-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; const CarList = () => { const columnDefs = [ @@ -778,7 +778,7 @@ import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; import React, { useMemo } from 'react'; import { List } from 'react-admin'; -import { DatagridAG } from '@react-admin/ra-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; import 'ag-grid-enterprise'; const CarList = () => { @@ -820,7 +820,7 @@ 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-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const PostList = () => { const columnDefs = [ @@ -845,7 +845,7 @@ 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-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const PostList = () => { const columnDefs = [ @@ -868,7 +868,7 @@ 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-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; export const PostList = () => { const columnDefs = [ @@ -905,7 +905,7 @@ import { AgGridReact } from 'ag-grid-react'; import 'ag-grid-enterprise'; import React from 'react'; import { List } from 'react-admin'; -import { DatagridAG } from '@react-admin/ra-editable-datagrid'; +import { DatagridAG } from '@react-admin/ra-datagrid-ag'; const OlympicWinnersList = () => { const columnDefs = [