Import lens

A React component in Beamline's Data & tables category.

A messy import made fixable by kind: rows stream through the checks once with live counts; problems gather into groups that say what is wrong in words with the rows they hold, biggest first; a group's fix (previewed on three of its values) clears all its rows at once, an ambiguous date is chosen once and never guessed, and a cell fixed by hand offers the same fix for every similar row with the count it clears. Every fix is listed with Undo; only the rows to fix are shown by default; nothing is imported until the host's Import.

Use it for

A customer's first import (contacts, members, products, patients) after the columns are mapped: the rows that fail checks, grouped by what is wrong, fixed a kind at a time.
The host owns the fields' checks and fixes and the import; the part runs the checks, groups, previews and undoes.

Not for

Mapping columns to fields → import-mapping.
Editing records that are already in the app → data-grid or living-table.

Anatomy

header: the file's label; the counts (N rows · N ready · N to fix, or Every row is ready); a bar of ready, to fix and not yet checked
groups: one per field and kind of problem, biggest first: the field, what is wrong in words, how many rows; its fixes as buttons, each with three of its values previewed (12/03/2025 → 2025-03-12), or No fix to offer
history: each applied fix with its count and Undo
rows: Only rows to fix / All rows; a table whose cells are fields, a problem cell marked and named; Same fix for N more rows under a cell fixed by hand; Show N more
Import N ready rows

States

checking (the stream)
rows to fix
every row ready
a fix applied (undoable)
an offer after a hand fix
importing
imported
no fix to offer

Keyboard

Every fix, Undo, the show switch and Show more are buttons; each cell is a field named by its row and field (and its problem); Enter or leaving the field applies it, Escape puts the value back
What a fix did is said once (a polite status): N fixed, N to fix

Motion

The rows stream through the checks once on arrival (the bar fills, the counts climb), then nothing runs. The to-fix count rolls on each fix. Reduced motion skips the stream.

Props

Prop	Type	Default	Description
`label` (required)	`string`	—	"contacts.csv · 1,284 rows".
`fields` (required)	`ImportField[]`	—
`value`	`ImportRow[]`	—	Controlled rows (as edited); omit to use defaultValue.
`defaultValue` (required)	`ImportRow[]`	—	Initial selection when uncontrolled; omitted by default.
`onValueChange`	`((rows: ImportRow[]) => void)`	—	Reports the selected value after a change; no callback by default.
`onImport`	`((rows: ImportRow[]) => void \| Promise<unknown>)`	—	Import the rows that pass every check.
`page`	`number`	—	Rows the grid shows at a time. Default 12.
`className`	`string`	—	Classes on the documented visual root; no override by default.
`classNames`	`Partial<Record<"root" \| "group" \| "rows" \| "counts" \| "groups", string>>`	—	Classes for the named visual parts; no overrides by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`defaultPreview`	`string`	—	A fix shown in the rows at rest, before anyone points at it (its id, as in the field's check): the cells it would change show their new values and the counts say what is left after it. Nothing is applied until it is pressed.

Built from

Import

import { ImportLens } from "@beamline/import-lens";

Get it

Import lens is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Import lensComplete system · $49

A messy import made fixable by kind.

A member list with four kinds of mess

1,284 members from the gym's old tool stream through the checks: 253 rows to fix in four groups. Reading the dates as day/month is previewed in the rows as it opens (253 to fix, 41 after it); press it and 212 rows turn ready at once; add +44 to 34 phones; fix one gmial.com in the rows and the same fix is offered for the other two.

0 × 0full

A clean file

When every row passes, the part says so and offers the import; nothing is counted as zero.