CSV Import - Export
Importing and exporting data are essential tasks for managing information in data extensive applications. With CSV export and import, we can speed up the process of data entry and data migration.
Refine provides useImport and useExport hooks for both bulk importing and exporting data, making it easy to move large datasets between your application and external sources.
Import
useImport hook allows you to import data from a CSV file. For each row in the file, it calls the create or createMany method of your data provider according to your configuration.
Internally, it uses Papa Parse to parse the file contents.
Sandpack component is temporarily disabled for compatibility reasons.
You can use the following CSV file to test the import feature.
name,material,description,price,category
"Test Product 1","Test Material 1","Test Description 1","100","{""id"":1}"
"Test Product 2","Test Material 2","Test Description 2","200","{""id"":2}"
"Test Product 3","Test Material 3","Test Description 3","300","{""id"":3}"
Refine also provides <ImportButton />. It's compatible with useImport hook to easily handle the import process.
Export
useExport hook allows you to export data as a CSV file. It calls the getList method of your data provider and downloads the data as a CSV file.
Internally, it uses Papa Parse to create the CSV file.
🚨 The download feature for
CSVfiles does not function within an iframe (live-previews). You can copy the code and run it in your own project to see it in action.
Sandpack component is temporarily disabled for compatibility reasons.
Refine also provides <ExportButton />. It's compatible with useExport hook to easily handle the export process.