All components (244)

Bulk editing

Management · BulkEditPanel

What it is and when to use it

Change one or several fields of all the selected records at once: for each field, keep it, set a value or clear it.

When to use it

After selecting several rows of a table: change the status of 30 invoices, assign an owner to 12 incidents.
fields are the fields that can be changed, with their type (text, number, date, boolean, select with options). clearable: false removes the clear option from a required field.
count is how many records are selected; SelectionBar keeps the count.
onApply receives only what changes ([{ field, value }]; clearing is value: null). Before applying it says how many fields will change in how many records, and it does not let you apply with a half-filled value.

When not to

Editing a single record: its form.
It touches no record: it calls onApply, and the server checks that each one can be changed.

Keyboard: they are normal dropdowns, fields and buttons.

Accessibility: each field has its label and the new value is named after the field ("New value of Owner"). The summary and the result are announced; a failure is said in an alert.

Fine appearance: the fields go in a grid that adapts to the width; the buttons, at the end and on the right.

What it looks like

12 records selected

Status
Do not change
Set
Clear
Price
Do not change
Set
Clear
Featured
Do not change
Set
Clear
Tag
Do not change
Set
Clear

Choose what to change in each field.

No changes applied.

<BulkEditPanel
  label="Edit 12 products"
  fields={campos}
  count={12}
  onApply={(cambios) => aplicarA(seleccionados, cambios)}
  onCancel={cerrar}
/>

Props

Import it with import { BulkEditPanel } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`count`required	`number`	How many records are selected.
`fields`required	`readonly BulkField[]`	The fields that can be changed at once in all the selected ones.
`label`required	`string`	What is being edited («Edit selected invoices»). Required.
`onApply`required	`(changes: readonly BulkChange[]) => void \| Promise<void>`	Apply the changes to all the selected. It receives only the fields that change; clearing is `value: null`. If it throws or rejects, it says so and the panel stays as it was. The server has to check that each record can be changed.
`className`	`string`	Merged with the library classes; it does not replace them.
`onCancel`	`() => void`	Close without applying. If passed, the cancel button appears.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: