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/ReferenceManyInput.md
+28Lines changed: 28 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -74,6 +74,8 @@ const ProductEdit = () => (
74
74
75
75
**Tip**: `<ReferenceManyInput>` cannot be used with `undoable` mutations. You have to set `mutationMode="optimistic"` or `mutationMode="pessimistic"` in the parent `<Edit>`, as in the example above.
76
76
77
+
**Tip**: `<SimpleFormIterator>` uses the `disableReordering` prop in this example because the `variants` resource doesn't support reordering. If your reference table does have a `rank` column, you can leave sorting controls on (see [the `rankSource` section](#ranksource) for details).
|`source`| Optional |`string`|`id`| Name of the field that carries the identity of the current record, used as origin for the relationship |
87
89
|`filter`| Optional |`Object`| - | Filters to use when fetching the related records, passed to `getManyReference()`|
88
90
|`perPage`| Optional |`number`| 25 | Maximum number of referenced records to fetch |
91
+
|`rankSource`| Optional |`string`| - | Name of the field used to store the rank of each item. When defined, it enables reordering of the items. |
89
92
|`sort`| Optional |`{ field, order }`|`{ field: 'id', order: 'DESC' }`| Sort order to use when fetching the related records, passed to `getManyReference()`|
90
93
|`defaultValue`| Optional |`array`| - | Default value of the input. |
91
94
|`validate`| Optional |`Function`|`array`| - | Validation rules for the array. See the [Validation Documentation](./Validation.md) for details. |
@@ -202,6 +205,31 @@ By default, react-admin restricts the possible values to 25 and displays no pagi
202
205
</ReferenceManyInput>
203
206
```
204
207
208
+
### `rankSource`
209
+
210
+
`<SimpleFormIterator>` provides controls to reorder the items in the list. If the related records have a numeric rank field, you can enable the reordering feature by setting the `rankSource` prop.
211
+
212
+
for example, if the variants have a `rank` field, you can set the `rankSource` prop like this:
213
+
214
+
```jsx
215
+
<ReferenceManyInput
216
+
reference="variants"
217
+
target="product_id"
218
+
rankSource="rank"
219
+
>
220
+
<SimpleFormIterator>
221
+
<TextInput source="sku"/>
222
+
<SelectInput source="size" choices={sizes} />
223
+
<SelectInput source="color" choices={colors} />
224
+
<NumberInput source="stock" defaultValue={0} />
225
+
</SimpleFormIterator>
226
+
</ReferenceManyInput>
227
+
```
228
+
229
+
Now the variants will be ordered by rank, and whenever the user changes the order of the items, `<ReferenceManyInput>` will update the `rank` field of each item accordingly.
230
+
231
+
Note that `<SimpleFormIterator>` doesn't have the `disableReordering` prop in that case, to display the up/down controls.
232
+
205
233
## `reference`
206
234
207
235
The name of the resource to fetch for the related records.
0 commit comments