Pro Components

Base Components

Field Map 1

User table with row selection and merge dialog to combine duplicate records by choosing field values per source into a unified entry.

Example

NameCompanyRoleEmail
OliviaOlivia
A

Acme Inc

UX Designerolivia.brooks@acme.com
NathanNathan Park
Backend Engineer
MMaya Torres
Creative Directormaya@pixelworks.io
LiamLiam Chen
S

Streamline

Patel
C

CloudNest

Product Manager
EEmma
V

Vendora

Frontend Developeremma.wright@vendora.com

Introduction

Field Map 1 is a duplicate-record merge flow:
  • Table: Users with avatars, name, company, role, email, and row checkboxes. Select two or more rows to enable the Merge button.
  • Merge dialog: Selected records shown as source cards; for each field (name, company, role, email) choose which record’s value to keep via radio buttons. A merged preview updates as you select.
Uses Button, Checkbox, Avatar, Badge, Radio Group, Dialog, and Table. Suited to CRM-style deduplication where users pick the best value per field from duplicates.

Usage

import { FieldMerging1 } from "@/components/ui/field-merging-1";

<FieldMerging1 />
Replace the sample user data with your API and wire the “Merge records” action to your backend. You can also copy the component source from this page into your project using the Blake UI file layout.

On this page

ExampleIntroductionInstallationUsage