Pro Components

Base Components

Field Map 2

Data import UI with empty table state, file browse trigger, and dialog to map source columns to target fields with combobox and preview.

Example

First NameLast NameEmailPhoneCountry

Drop a file here or browse to begin

Introduction

Field Map 2 is a column-to-field mapping flow for imports (e.g. CSV):
  • Empty state: Table with a “No data imported” message and an overlay with a “Browse files” button that opens the mapping dialog.
  • Mapping dialog: Source columns listed as badges on the left; each maps to a target field via a combobox. A preview panel shows sample values for the selected/focused column. Header includes Exit and Save.
Uses Button, Badge, Combobox, Dialog, and Table. Suited to ETL, CRM imports, or spreadsheet integrations where users map file columns to app fields.

Usage

import { FieldMapping1 } from "@/components/ui/field-mapping-1";

<FieldMapping1 />
Wire “Browse files” to your file input and parser, and feed source columns and target field options from your schema. Connect Save to your import API. You can also copy the component source from this page into your project using the Blake UI file layout.

On this page

ExampleIntroductionInstallationUsage