Contact Import with an Error Report

ProNew

The CSV column mapper set up for contacts (name, email, phone, company), with email and phone checks, duplicates inside the file flagged, and after the import a summary with a download of the skipped rows and the reason for each. Use this when a bulk import will reject some rows and people need to fix them.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

People import a contact list from a spreadsheet and some rows will be invalid.

Do not use it when: For importing very large files (hundreds of thousands of rows) do the work on the server and use this only to map columns.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onImport`	`(rows) => void \| Promise<void>`	Receives the valid, unique rows: `{ name, email, phone, company }`.

csvCell(value) and problemsToCsv(problems) are exported.

Accessibility

The flow, step headings and focus moves come from CSV Column Mapper. The result is a labelled region with a polite status sentence, a list of the first 20 reasons with line numbers, and a real button that downloads the full report.
Reasons say what to fix ("bob" is not an email address.) and cite the line in the original file, so the person can correct the spreadsheet and import again.
Nothing is imported silently: the counts of imported and skipped rows are always stated.

Testing

The pattern ships with a Testing Library test (csv-contact-import.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

People import a contact list from a spreadsheet and some rows will be invalid.

Do not use it when: For importing very large files (hundreds of thousands of rows) do the work on the server and use this only to map columns.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onImport`	`(rows) => void \| Promise<void>`	Receives the valid, unique rows: `{ name, email, phone, company }`.

csvCell(value) and problemsToCsv(problems) are exported.

Accessibility

The flow, step headings and focus moves come from CSV Column Mapper. The result is a labelled region with a polite status sentence, a list of the first 20 reasons with line numbers, and a real button that downloads the full report.
Reasons say what to fix ("bob" is not an email address.) and cite the line in the original file, so the person can correct the spreadsheet and import again.
Nothing is imported silently: the counts of imported and skipped rows are always stated.

Testing

The pattern ships with a Testing Library test (csv-contact-import.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.