Skip to content

Commit a0f0fd1

Browse files
committed
[Doc] Update <ReferenceManyInput> documentation to mention rankSource
1 parent 9ed2537 commit a0f0fd1

File tree

1 file changed

+28
-0
lines changed

1 file changed

+28
-0
lines changed

docs/ReferenceManyInput.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@ const ProductEdit = () => (
7474

7575
**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.
7676

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).
78+
7779
## Props
7880

7981
| Prop | Required | Type | Default | Description |
@@ -86,6 +88,7 @@ const ProductEdit = () => (
8688
| `source` | Optional | `string` | `id` | Name of the field that carries the identity of the current record, used as origin for the relationship |
8789
| `filter` | Optional | `Object` | - | Filters to use when fetching the related records, passed to `getManyReference()` |
8890
| `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. |
8992
| `sort` | Optional | `{ field, order }` | `{ field: 'id', order: 'DESC' }` | Sort order to use when fetching the related records, passed to `getManyReference()` |
9093
| `defaultValue` | Optional | `array` | - | Default value of the input. |
9194
| `validate` | Optional | `Function` &#124; `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
202205
</ReferenceManyInput>
203206
```
204207

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+
205233
## `reference`
206234

207235
The name of the resource to fetch for the related records.

0 commit comments

Comments
 (0)