Reorder editable rows
A list editor needs to move a row upward or downward without replacing the entire form state.
Conform · Pipe
form.reorder
form.reorder creates button props for moving an item within an array field. Provide the list name and the item’s current and destination indexes.
How it works
form.reorder provides button props for changing the order of items in an array field. Pass the array field name, the item's current index, and its destination index; the resulting intent is handled when the form control is used.
Syntax
form.reorder.getButtonProps({ name, from, to })Parameters
| Name | Type | Description |
|---|---|---|
name | string | Name of the array field. |
from | number | Current index of the item. |
to | number | Target index to move the item to. |
Returns
void
Key points
- The operation changes the order of entries belonging to an array field.
- Set
nameto the array field being reordered. - Use
fromfor the item’s current position. - Use
tofor the destination position.
Example: Move an item to the top
const form = useForm();
const fields = form.getFieldset();
return (
<form {...form.props}>
{fields.tasks.getFieldList().map((task, index) => (
<div key={task.key}>
<input name={task.name} />
<button {...form.reorder.getButtonProps({
name: fields.tasks.name,
from: index,
to: 0,
})}>
Move to top
</button>
</div>
))}
</form>
);Adds a button that moves the selected array item to index 0 when activated.
When to use it
Move an item to the top
A task manager lets users promote one task to the first position.
Change preference order
A settings screen lets users arrange preferences by priority.
Interview questions
QHow do you configure a reorder control?
Use form.reorder.getButtonProps on a button and provide name, from, and to. The name identifies the array field, while from and to identify the current and target positions.
Follow-up: How would you move an item to the end? Pass the array field name, its current index as from, and the final array index as to.
QWhat do the reorder options mean?
The name option must refer to the array field whose items are being reordered. The from option is the current item index, and to is the destination index.
Follow-up: What should be checked when a reorder button moves the wrong item? Verify that the rendered item index and the submitted array-field name match the intended list.
QWhy use the generated button props instead of manually creating the control?
Reordering is exposed as a form intent rather than requiring a custom submission format. Applying the generated props to a button lets Conform serialize the requested reorder operation for the form.
Follow-up: Which other form operations use the same intent approach? The documentation lists validating, resetting, updating, inserting, removing, and reordering as form actions.
Related
useIntentform.insertform.removeform.updateIntent button