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
`<ReferenceArrayField>` fetches a list of referenced records (using the `dataProvider.getMany()` method), and puts them in a [`ListContext`](./useListContext.md). It then renders each related record, using its [`recordRepresentation`](./Resource.md#recordrepresentation), in a [`<ChipField>`](./ChipField.md).
13
+
`<ReferenceArrayField>` fetches a list of referenced records (using the `dataProvider.getMany()` method), and puts them in a [`ListContext`](./useListContext.md). It then renders each related record, using its [`recordRepresentation`](./Resource.md#recordrepresentation), in a [`<ChipField>`](./ChipField.md).
14
14
15
15
**Tip**: If the relationship is materialized by a foreign key on the referenced resource, use [the `<ReferenceManyField>` component](./ReferenceManyField.md) instead.
16
16
@@ -100,7 +100,7 @@ You can change how the list of related records is rendered by passing a custom c
100
100
101
101
## `children`
102
102
103
-
By default, `<ReferenceArrayField>` renders one string by related record, via a [`<SingleFieldList>`](./SingleFieldList.md) with a [`<ChipField>`](./ChipField.md) using the resource [`recordRepresentation`](./Resource.md#recordrepresentation).
103
+
By default, `<ReferenceArrayField>` renders one string by related record, via a [`<SingleFieldList>`](./SingleFieldList.md) with a [`<ChipField>`](./ChipField.md) using the resource [`recordRepresentation`](./Resource.md#recordrepresentation).
104
104
105
105

106
106
@@ -130,7 +130,7 @@ Is equivalent to:
130
130
-[`<SimpleList>`](./SimpleList.md)
131
131
-[`<EditableDatagrid>`](./EditableDatagrid.md)
132
132
-[`<Calendar>`](./Calendar.md)
133
-
- Or a component of your own (check the [`<WithListContext>`](./WithListContext.md) and the [`useListContext`](./useListContext.md) chapters to learn how).
133
+
- Or a component of your own (check the [`<WithListContext>`](./WithListContext.md) and the [`useListContext`](./useListContext.md) chapters to learn how).
134
134
135
135
For instance, use a `<DataTable>` to render the related records in a table:
`<ReferenceArrayField>` fetches all the related records, and displays them all, too. You can use the `filter` prop to filter the list of related records to display (this works by filtering the records client-side, after the fetch).
191
-
)} />
192
-
<EditButton />
193
-
</SimpleShowLayout>
194
-
</Show>
195
-
);
196
-
```
197
-
198
-
## `filter`
199
-
200
190
`<ReferenceArrayField>` fetches all the related records, and displays them all, too. You can use the `filter` prop to filter the list of related records to display (this works by filtering the records client-side, after the fetch).
201
191
202
192
For instance, to render only tags that are 'published', you can use the following code:
203
193
204
194
{% raw %}
195
+
205
196
```jsx
206
197
<ReferenceArrayField
207
198
label="Tags"
@@ -210,6 +201,7 @@ For instance, to render only tags that are 'published', you can use the followin
210
201
filter={{ is_published:true }}
211
202
/>
212
203
```
204
+
213
205
{% endraw %}
214
206
215
207
## `label`
@@ -272,9 +264,11 @@ Use the `queryOptions` prop to pass options to [the `dataProvider.getMany()` que
272
264
For instance, to pass [a custom `meta`](./Actions.md#meta-parameter):
@@ -325,6 +319,7 @@ By default, the related records are displayed in the order in which they appear
325
319
For instance, to sort tags by title in ascending order, you can use the following code:
326
320
327
321
{% raw %}
322
+
328
323
```jsx
329
324
<ReferenceArrayField
330
325
label="Tags"
@@ -333,6 +328,7 @@ For instance, to sort tags by title in ascending order, you can use the followin
333
328
sort={{ field:'title', order:'ASC' }}
334
329
/>
335
330
```
331
+
336
332
{% endraw %}
337
333
338
334
## `sx`: CSS API
@@ -344,4 +340,3 @@ The `<ReferenceArrayField>` component accepts the usual `className` prop. You ca
344
340
|`& .RaReferenceArrayField-progress`| Applied to the Material UI's `LinearProgress` component while `isPending` prop is `true`|
345
341
346
342
To override the style of all instances of `<ReferenceArrayField>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaReferenceArrayField` key.
0 commit comments