Shadcn UI Field Mapping Block
FieldMapping1 is a data import interface for mapping CSV or file columns to database fields. The initial state shows an empty table with a blurred overlay prompting users to browse files. The mapping dialog displays source columns as badges on the left with arrows pointing to combobox selectors on the right for choosing target fields. A preview panel shows sample values for the focused field.
Light background with the empty table using a semi-transparent overlay. The mapping dialog uses a two-column layout with the preview panel on a muted background. Source column badges use secondary styling. The combobox supports searching existing fields and creating new ones inline. Save and exit buttons appear in the dialog header.
This is a specialized data import pattern common in ETL tools, CRM imports, and spreadsheet integrations. The ability to create new fields on the fly adds flexibility. Higher complexity due to the dynamic field creation and mapping state management.
Dependencies
| Package | Type |
|---|---|
| @tanstack/react-table | NPM |
| lucide-react | NPM |
| react | NPM |
badge @shadcn | Registry |
button @shadcn | Registry |
command @shadcn | Registry |
dialog @shadcn | Registry |
popover @shadcn | Registry |
table @shadcn | Registry |