All components (244)

Match fields

Management · DataMappingEditor

What it is and when to use it

Match the fields of a source (another system, a file, an API) with those of a target: for each target field, which field it comes from and with which transformation, with an example of how it ends up.

When to use it

Connecting a CRM with the shop, a spreadsheet with the database, an external API with your own schema.
sources are the source fields (with a sample for the example) and targets the target ones, with required and aliases.
"Match by name" fills what fits by key, label or alias. The transformations are trimming spaces, uppercase, lowercase and converting to a number.
It warns about required fields without a source, types that do not match and sources used in more than one target.

When not to

Importing a file in one go: DataImportWizard already has its columns step.
It moves no data: applyMapping converts a record with the saved matching.

Keyboard: they are normal dropdowns and a button, in a table with row headers.

Accessibility: each dropdown is named after its field ("Source of Phone"), the target field is the header of its row and the warnings are written out.

Fine appearance: a required field without a source carries the soft error background in its header; the table scrolls sideways if it does not fit.

What it looks like

Target	Comes from	Transformation	Example
Namerequired	Source of Name No source Customer Mail Amount Notes	Transformation of Name As is Without spaces at the ends In uppercase In lowercase As a number
Emailrequired	Source of Email No source Customer Mail Amount Notes	Transformation of Email As is Without spaces at the ends In uppercase In lowercase As a number	[email protected]
Total	Source of Total No source Customer Mail Amount Notes	Transformation of Total As is Without spaces at the ends In uppercase In lowercase As a number

<DataMappingEditor
  label="Which column goes in each field"
  sources={columnasDelFichero}
  targets={camposDeDestino}
  value={mapeo}
  onChange={setMapeo}
/>

Props

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

Prop	Type	What it does
`label`required	`string`	What is being matched («CRM fields with the shop's»). Required.
`onChange`required	`(value: DataMapping) => void`	—
`sources`required	`readonly SourceField[]`	—
`targets`required	`readonly TargetField[]`	—
`value`required	`Readonly<Record<string, MappingEntry>>`	—
`className`	`string`	Merged with the library classes; it does not replace them.

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: