CSV Import Column Mapper — HTML CSS JS Snippet

Each target field carries a hints array of lowercase substrings, and the guesser takes the first CSV header whose lowercased name includes any hint — email_address matches "email", full_name matches "full", signup_plan matches "plan". It is deliberately the simplest thing that works, and it works surprisingly often because real-world header vocabulary is conventional. Three upgrades in increasing order of effort: normalise headers before matching (strip spaces, underscores, punctuation — so "E-Mail (work)" becomes "emailwork" and matches); score all candidates instead of taking the first hit (exact match > startsWith > includes, pick the best, and refuse to guess below a threshold so wild files show honestly unmapped selects rather than wrong green ones); and content-based fallback — when no header matches, sample the first rows of unmatched columns and test them against field validators (a column whose values look like emails probably is the email column, whatever its header says). That last technique is most of what commercial import tools' "AI matching" does for common fields.

Because users verify mappings by recognising their own data, not by reasoning about header semantics. A user squinting at "full_name → Name" is doing abstract schema translation; the same user seeing "e.g. Ada Lovelace, Grace Hopper" confirms instantly — and, critically, a WRONG mapping becomes self-evident ("e.g. pro, enterprise" under the Email field is unmissable) in a way the header comparison never is. This is the single feature usability studies of import flows flag most consistently. Two samples is the deliberate sweet spot: one value can be coincidentally plausible in the wrong column (a company named "Turing" looks like a surname), while three or more overflow the row on narrow screens; two values catch the coincidence case while staying scannable. Skip empty cells when picking samples in production (the demo's || '—' placeholder handles the display side), and always sample data rows, never the header row.

Both, with different jobs. Client-side validation (this snippet's review step) exists for feedback latency: users see bad cells and skip counts instantly, iterate on their file, and arrive at the server with realistic expectations — it is UX, not enforcement. The server must re-validate everything regardless, because the client saw at most a preview and can be bypassed trivially. For the import itself, send the mapping dictionary plus a file reference — POST { fileId, mapping } — and let the server re-read its stored copy of the upload applying the column indexes: client-side re-mapping and re-uploading of row data caps out quickly (a 50MB CSV re-serialised in the browser is a tab crash) and invites truncation bugs. The dry-run pattern completes the architecture: on entering review, call the same server import in validate-only mode and merge its findings (duplicates against existing records, permission failures — things the client cannot know) into the summary line, so the preview's promises match the import's reality.

React: the mapping dictionary becomes the single source of truth — const [mapping, setMapping] = useState(initialGuesses) — with selects controlled (value={mapping[f.key]}, onChange updating the dict), samples and gating derived inline or via useMemo, and the review rows computed with useMemo(() => buildRows(mapping, csv), [mapping, csv]); the guessed-tint state is a one-shot: keep a touched set and style green only for untouched auto-matched fields. Step state is one useState<1|2|3>. Angular mirrors it with a signals record, computed() for gating and review rows, and a select bound via [ngModel] or reactive forms per field. Tailwind: mapping rows are grid grid-cols-[1fr_20px_1.2fr] items-center gap-2.5 bg-slate-900 border border-slate-700 rounded-xl px-3.5 py-3; selects are w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-2 text-sm with data-[guessed]:border-emerald-400/50 data-[missing]:border-red-400; the review table uses the standard th classes text-[10.5px] uppercase tracking-wider text-slate-400 bg-slate-900 with bad cells as text-red-400 after:content-['_⚠'] and bad rows shadow-[inset_2px_0_0] shadow-red-400 on the first cell.