Import Excel
i have groups and contacts resources. groups can get many contacts. i wish to add a button on each groups row to import contacts from csv file
3 Replies
Hi @negro_237. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You can achieve this by using the
useImport
hook provided by refine. This 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.
Here is a basic usage example of the useImport
hook:
In this example, IContactFile
is the interface for the data in your CSV file. You should replace groupId
, contactName
, and contactEmail
with the actual column names in your CSV file.
You can also use the <ImportButton>
component from refine's Ant Design integration package for a ready-to-use import button:
In this case, you would place the ImportButton
in each row of your groups table. You might need to customize the useImport
hook to associate the imported contacts with the correct group.
For more information, refer to the useImport
hook documentation (https://refine.dev/docs/api-reference/core/hooks/import-export/useImport/) and the CSV Import guide (https://refine.dev/docs/advanced-tutorials/import-export/csv-import/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@928314674762645514> kapa.ai is still learning and improving, please let us know how it did by reacting below
frail-apricot•13mo ago
Hey @negro_237,
You can check out the documentation for
useImport
here https://refine.dev/docs/api-reference/core/hooks/import-export/useImport/
We also have an example for import that you can check out here https://refine.dev/docs/examples/import-export/
useImport has a prop mapData
which allows you to map/transform the imported data to match your API
Hope this helps 🙏