Shadcn UI Field Mapping Block
FieldMerging1 is a duplicate record merging interface with a user table and merge dialog. The table displays users with avatars, names, companies, roles, and emails with row selection checkboxes. Selecting two or more rows enables the merge button. The merge dialog shows selected user cards side-by-side with radio buttons for each field, and a preview card showing the merged result.
Light background with the table using TanStack Table for selection state. The merge dialog uses a two-panel layout with source cards on a muted background and the merged preview on white. User cards show avatars and field values with radio buttons for selection. The preview updates in real-time as fields are selected.
This is a specialized CRM pattern for deduplicating contact records. The field-by-field selection allows users to cherry-pick the best data from each duplicate. Higher complexity due to the multi-record selection and real-time merge preview functionality.
Dependencies
| Package | Type |
|---|---|
| @tanstack/react-table | NPM |
| lucide-react | NPM |
| react | NPM |
badge @shadcn | Registry |
button @shadcn | Registry |
checkbox @shadcn | Registry |
dialog @shadcn | Registry |
label @shadcn | Registry |
radio-group @shadcn | Registry |
table @shadcn | Registry |