CsvImport

An Import button that opens a four-step dialog: upload a .csv file, map its columns to the resource's fields, preview the rows as the schema returns them, and create them in batches of batchSize with create on the data provider. fields and requiredFields override the schema's keys, mapping replaces the automatic header match, and transform reshapes a row before the schema sees it. It creates into the ambient resource, so inside <List> it needs no resource. children renders inside the import context, where useCsvImport() reads the wizard's state.

Installation

pnpm dlx shadcn@latest add @chelone/csv-import

An Import button that opens a four-step dialog: upload a .csv file, map its columns to the resource's fields, preview the rows as the schema returns them, and create them in batches of batchSize with create on the data provider. fields and requiredFields override the schema's keys, mapping replaces the automatic header match, and transform reshapes a row before the schema sees it. It creates into the ambient resource, so inside <List> it needs no resource. children renders inside the import context, where useCsvImport() reads the wizard's state.

Loading preview…

Import

import { CsvImport } from "@chelone/react/csv-import";

See the data import guide for papaparse, the four steps, the report and the Vue sheet.

Props

Prop	Type	Default	Description
batchSize	number	—	Rows created at once. Default 100.
children	ReactNode	—	Rendered inside the context, so a child can call `useCsvImport()`.
fields	string[]	—	Overrides the schema's keys. Without either, the CSV headers are the fields.
icon	ReactNode	—	The Import button's icon.
label	string	—	The Import button's text.
mapping	Record<string, string>	—	A starting field to header mapping. When non-empty it replaces the auto-match.
onComplete	(report: CsvImportReport) => void	—
onError	(error: Error) => void	—
requiredFields	string[]	—	Overrides the schema's non-optional keys.
resource	string	—	The resource to create into. Defaults to the ambient resource.
schema	StandardSchemaV1	—	A Standard Schema (zod, valibot, ...). Its keys are the fields; its non-optional keys are required.
transform	CsvTransform	—	Reshapes a mapped row before the schema sees it.