fair-rose•11mo ago

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

kapa.ai•11mo ago

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:

import { useImport } from "@refinedev/core";  

interface IContactFile {  
  groupId: string;  
  contactName: string;  
  contactEmail: string;  
}  

export const GroupList: React.FC = () => {  
  const { inputProps } = useImport<IContactFile>();  

  return <input {...inputProps} />;  
};

import { useImport } from "@refinedev/core";  

interface IContactFile {  
  groupId: string;  
  contactName: string;  
  contactEmail: string;  
}  

export const GroupList: React.FC = () => {  
  const { inputProps } = useImport<IContactFile>();  

  return <input {...inputProps} />;  
};

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:

import { ImportButton, useImport } from "@refinedev/antd";  

export const GroupList: React.FC = () => {  
  const importProps = useImport<IContactFile>();  

  return <ImportButton {...importProps}>Import</ImportButton>;  
};

import { ImportButton, useImport } from "@refinedev/antd";  

export const GroupList: React.FC = () => {  
  const importProps = useImport<IContactFile>();  

  return <ImportButton {...importProps}>Import</ImportButton>;  
};

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: ----------------------

kapa.ai•11mo ago

<@928314674762645514> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•11mo 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 🙏