You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/ListBase.md
+1-3Lines changed: 1 addition & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -66,10 +66,8 @@ The `<ListBase>` component accepts the same props as [`useListController`](./use
66
66
*[`resource`](./List.md#resource)
67
67
*[`sort`](./List.md#sort)
68
68
69
-
These are a subset of the props accepted by `<List>` - only the props that change data fetching, and not the props related to the user interface.
70
-
71
69
In addition, `<ListBase>` renders its children components inside a `ListContext`. Check [the `<List children>` documentation](./List.md#children) for usage examples.
72
-
Alternatively you can pass a render function to the props, in place of children. This function will receive the listContext as argument.
70
+
Alternatively, you can pass a `render` function prop instead of `children`. This function will receive the `ListContext` as argument.
`<ReferenceArrayFieldBase>` fetches the `tag` resources related to each `post` resource by matching `post.tag_ids` to `tag.id`.
89
89
90
-
You can change how the list of related records is rendered by passing a custom child reading the `ListContext` (e.g. a [`<DataTable>`](./DataTable.md)). See the [`children`](#children) section for details.
90
+
You can change how the list of related records is rendered by passing a custom child reading the `ListContext` (e.g. a [`<DataTable>`](./DataTable.md)) or a render function prop. See the [`children`](#children) and the [`render`](#render) sections for details.
| `source` | Required | `string` | - | Name of the property to display |
97
97
| `reference` | Required | `string` | - | The name of the resource for the referenced records, e.g. 'tags' |
98
-
| `children` | Required if no render | `Element` | | One or several elements that render a list of records based on a `ListContext` |
99
-
| `render` | Required if no children | `(listContext) =>Element` | | A function that takes a list context and render a list of records |
98
+
| `children` | Optional\* | `Element` | | One or several elements that render a list of records based on a `ListContext` |
99
+
| `render` | Optional\*| `(ListContext) =>Element` | | A function that takes a list context and renders a list of records |
100
100
| `filter` | Optional | `Object` | - | Filters to use when fetching the related records (the filtering is done client-side) |
101
101
| `pagination` | Optional | `Element` | - | Pagination element to display pagination controls. empty by default (no pagination) |
102
102
| `perPage` | Optional | `number` | 1000 | Maximum number of results to display |
103
103
| `queryOptions` | Optional | [`UseQuery Options`](https://tanstack.com/query/v5/docs/react/reference/useQuery) | `{}` | `react-query` options for the `getMany` query |
104
104
| `sort` | Optional | `{ field, order }` | `{ field:'id', order:'DESC' }` | Sort order to use when displaying the related records (the sort is done client-side) |
105
105
| `sortBy` | Optional | `string |Function` | `source` | When used in a `List`, name of the field to use for sorting when the user clicks on the column header. |
106
106
107
+
\* Either one of children or render is required.
108
+
107
109
## `children`
108
110
109
111
You can pass any component of your own as child, to render the list of related records as you wish.
110
112
You can access the list context using the `useListContext` hook.
Alternatively to children you can pass a render prop to `<ReferenceArrayFieldBase>`. The render prop will receive the list context as its argument, allowing to inline the render logic for both the list and the pagination.
143
-
When receiving a render prop the `<ReferenceArrayFieldBase>` component will ignore the children and the pagination property.
144
-
143
+
Alternatively to children you can pass a `render` function prop to `<ReferenceArrayFieldBase>`. The `render` prop will receive the `ListContext` as its argument, allowing to inline the `render` logic for both the list and the pagination.
144
+
When receiving a `render` prop the `<ReferenceArrayFieldBase>` component will ignore the children property.
`<ReferenceFieldBase>` is useful for displaying many-to-one and one-to-one relationships, e.g. the details of a user when rendering a post authored by that user.
10
-
`<ReferenceFieldBase>` is a headless component, handling only the logic. This Allows to use any UI library for the render. For a version incorporating UI see [`<ReferenceField>`](/ReferenceField.html)
10
+
`<ReferenceFieldBase>` is a headless component, handling only the logic. This allows to use any UI library for the render. For a version based on MUI see [`<ReferenceField>`](/ReferenceField.html)
11
11
12
12
## Usage
13
13
@@ -29,7 +29,7 @@ In that case, use `<ReferenceFieldBase>` to display the post author's as follows
`<ReferenceFieldBase>` fetches the data, puts it in a [`RecordContext`](./useRecordContext.md), and its up to its children to handle the rendering by accessing the ReferencingContext using the useReferenceFieldContext hook.
40
40
41
-
This component fetches a referenced record (`users` in this example) using the `dataProvider.getMany()` method, and passes it to the ReferenceFieldContext.
41
+
This component fetches a referenced record (`users` in this example) using the `dataProvider.getMany()` method, and passes it to the `ReferenceFieldContext`.
It uses `dataProvider.getMany()` instead of `dataProvider.getOne()`[for performance reasons](#performance). When using several `<ReferenceFieldBase>` in the same page (e.g. in a `<DataTable>`), this allows to call the `dataProvider` once instead of once per row.
|`source`| Required |`string`| - | Name of the property to display |
76
75
|`reference`| Required |`string`| - | The name of the resource for the referenced records, e.g. 'posts' |
77
-
|`children`| Optional |`ReactNode`| - | React component to render the referenced record, the component need to use useReferenceFieldContext to access the context. |
78
-
|`render`| Optional |`(context) => ReactNode`| - | Function that takes the referenceFieldContext and render the referenced record. Will take priority on children props if both are set. |
76
+
|`children`| Optional |`ReactNode`| - | React component to render the referenced record. |
77
+
|`render`| Optional |`(context) => ReactNode`| - | Function that takes the referenceFieldContext and render the referenced record. |
79
78
|`empty`| Optional |`ReactNode`| - | What to render when the field has no value or when the reference is missing |
Alternatively you can pass a renderprop instead of children to be able to inline the rendering. The render function will then receive the reference field context directly.
114
+
Alternatively, you can pass a `render` function prop instead of children. This function will receive the `ReferenceFieldContext` as argument.
Use the `queryOptions` prop to pass options to [the `dataProvider.getMany()` query](./useGetOne.md#aggregating-getone-calls) that fetches the referenced record.
@@ -208,15 +210,13 @@ For instance, if the `posts` resource has a `user_id` field, set the `reference`
By default, when used in a `<Datagrid>`, and when the user clicks on the column header of a `<ReferenceFieldBase>`, react-admin sorts the list by the field `source`. To specify another field name to sort by, set the `sortBy` prop.
0 commit comments