diff --git a/docs/Datagrid.md b/docs/Datagrid.md index bfdf545e3a0..247f98b5683 100644 --- a/docs/Datagrid.md +++ b/docs/Datagrid.md @@ -5,9 +5,12 @@ title: "The Datagrid Component" # `` -![The `` component](./img/tutorial_post_list_less_columns.png) +The `` 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.md#list) and [``](./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.md#list) and [``](./ReferenceManyField.md) components. Outside these components, it must be used inside a `ListContext`. + ## 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 = () => ( + - ); ``` -You can find more advanced examples of `` usage in the [demos](./Demos.md). +![The `` component](./img/tutorial_post_list_less_columns.png) -**Tip**: To let users edit the content right in the datagrid, check [``](./EditableDatagrid.md), an [Enterprise Edition](https://marmelab.com/ra-enterprise) component. +You can find more advanced examples of `` usage in the [demos](./Demos.md). The `` 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.md) and [``](./SingleFieldList.md). +**Tip**: If you need more Datagrid features, check out these two alternative components: + +- [``](./EditableDatagrid.md) lets users edit the content right in the datagrid +- [``](./DatagridAG.md) 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 = () => ( `` accepts the same props as ``. +**Tip**: For even more column customization (resizable columns, column grouping, etc.), check out the [``](./DatagridAG.md) component. + + + ## 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.md) leverages the react-admin input components to turn a row into an editable form. +- [``](./DatagridAG.md) provides a spreadsheet-like interface, "à la" Excel, using the [ag-Grid](https://www.ag-grid.com/) library. + +### ``: Editable Rows -Check [the `ra-editable-datagrid` documentation](https://marmelab.com/ra-enterprise/modules/ra-editable-datagrid#datagridag) for more details. - ## Usage -Use `` as a child of a react-admin ``, ``, 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 `` as a child of a react-admin ``, ``, or any other component that creates a `ListContext`. ```tsx import 'ag-grid-community/styles/ag-grid.css'; diff --git a/docs/EditableDatagrid.md b/docs/EditableDatagrid.md index 0377f1b776c..c575a7c4082 100644 --- a/docs/EditableDatagrid.md +++ b/docs/EditableDatagrid.md @@ -15,7 +15,17 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)` is a drop-in replacement for ``. It expects 2 additional props: `createForm` and `editForm`, the components to be displayed when a user creates or edits a row. The `` 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 `` as a child of a react-admin ``, ``, or any other component that creates a `ListContext`. ```jsx import { @@ -71,4 +81,7 @@ const ArtistForm = () => ( ); ``` +`` is a drop-in replacement for ``. It expects 2 additional props: `createForm` and `editForm`, the components to be displayed when a user creates or edits a row. The `` 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. diff --git a/docs/Features.md b/docs/Features.md index 8b857d20f32..b8785b5aa07 100644 --- a/docs/Features.md +++ b/docs/Features.md @@ -297,6 +297,32 @@ Check the following components to learn more about guessers: - [``](./EditGuesser.md) - [``](./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 [`` 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. + + + +The [`` 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. + + + +Finally, the [`` 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. + + + ## 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**. diff --git a/docs/ListTutorial.md b/docs/ListTutorial.md index f9d397edc93..4b930e89453 100644 --- a/docs/ListTutorial.md +++ b/docs/ListTutorial.md @@ -494,6 +494,7 @@ const App = () => ( The components you can use as child of `` are called "List Iterator". They render a list of records. `` is such a List Iterator, but react-admin provides many more: - [``](./Datagrid.md) +- [``](./DatagridAG.md) - [``](./SimpleList.md) - [``](./SingleFieldList.md) - [``](./EditableDatagrid.md) diff --git a/docs/img/datagrid.mp4 b/docs/img/datagrid.mp4 new file mode 100644 index 00000000000..76c21e29217 Binary files /dev/null and b/docs/img/datagrid.mp4 differ