{"id":17700527,"url":"https://github.com/benwinding/react-admin-import-csv","last_synced_at":"2025-04-04T23:09:51.746Z","repository":{"id":37402179,"uuid":"250793647","full_name":"benwinding/react-admin-import-csv","owner":"benwinding","description":"A csv file import button for react-admin","archived":false,"fork":false,"pushed_at":"2024-02-01T04:49:11.000Z","size":30517,"stargazers_count":135,"open_issues_count":5,"forks_count":46,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-10T23:34:08.352Z","etag":null,"topics":["bulkimport","csv","react","react-admin"],"latest_commit_sha":null,"homepage":"https://benwinding.github.io/react-admin-import-csv","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benwinding.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-28T12:49:39.000Z","updated_at":"2024-09-07T17:35:51.000Z","dependencies_parsed_at":"2024-06-18T16:46:29.862Z","dependency_job_id":"bb865480-efcc-4671-9a26-204f1d85059f","html_url":"https://github.com/benwinding/react-admin-import-csv","commit_stats":{"total_commits":175,"total_committers":26,"mean_commits":6.730769230769231,"dds":"0.39428571428571424","last_synced_commit":"1ddfaf35bb4a1a61c796d8adf5c6b3a7548bfdca"},"previous_names":[],"tags_count":66,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Freact-admin-import-csv","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Freact-admin-import-csv/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Freact-admin-import-csv/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Freact-admin-import-csv/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benwinding","download_url":"https://codeload.github.com/benwinding/react-admin-import-csv/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247261612,"owners_count":20910108,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bulkimport","csv","react","react-admin"],"created_at":"2024-10-24T17:42:27.882Z","updated_at":"2025-04-04T23:09:51.725Z","avatar_url":"https://github.com/benwinding.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-admin-import-csv\n\n\u003c!-- [START badges] --\u003e\n\n[![NPM Version](https://img.shields.io/npm/v/react-admin-import-csv.svg)](https://www.npmjs.com/package/react-admin-import-csv)\n[![Downloads/week](https://img.shields.io/npm/dm/react-admin-import-csv.svg)](https://www.npmjs.com/package/react-admin-import-csv)\n[![License](https://img.shields.io/npm/l/react-admin-import-csv.svg)](https://github.com/benwinding/react-admin-import-csv/blob/master/LICENSE)\n[![Github Issues](https://img.shields.io/github/issues/benwinding/react-admin-import-csv.svg)](https://github.com/benwinding/react-admin-import-csv)\n![Build and Publish](https://github.com/benwinding/react-admin-import-csv/workflows/Build%20and%20Publish/badge.svg)\n[![Code Coverage](https://raw.githubusercontent.com/benwinding/react-admin-import-csv/master/coverage/badge-lines.svg?sanitize=true)](./coverage/coverage-summary.json)\n\n\u003c!-- [END badges] --\u003e\n\nCSV import button for the [react-admin](https://github.com/marmelab/react-admin) framework.\n\n![image](https://user-images.githubusercontent.com/11782590/93659721-83622e00-fa87-11ea-90c4-650aecf60a6a.gif)\n\n## Usage\n\nSimply import the button into a toolbar, like so:\n\n### Basic Import Action Only\n\n```js\nimport {\n  Datagrid,\n  List,\n  TextField,\n  RichTextField,\n  TopToolbar,\n} from \"react-admin\";\nimport { ImportButton } from \"react-admin-import-csv\";\nimport { CreateButton } from \"ra-ui-materialui\";\n\nconst ListActions = (props) =\u003e {\n  const { className, basePath } = props;\n  return (\n    \u003cTopToolbar className={className}\u003e\n      \u003cCreateButton basePath={basePath} /\u003e\n      \u003cImportButton {...props} /\u003e\n    \u003c/TopToolbar\u003e\n  );\n};\nexport const PostList = (props) =\u003e (\n  \u003cList {...props} filters={\u003cPostFilter /\u003e} actions={\u003cListActions /\u003e}\u003e\n    \u003cDatagrid\u003e\n      \u003cTextField source=\"title\" /\u003e\n      \u003cRichTextField source=\"body\" /\u003e\n      ...\n    \u003c/Datagrid\u003e\n  \u003c/List\u003e\n);\n```\n\n### Export/Import Actions\n\n```js\nimport {\n  Datagrid,\n  List,\n  TextField,\n  RichTextField,\n  TopToolbar,\n} from \"react-admin\";\nimport { ImportButton } from \"react-admin-import-csv\";\nimport { CreateButton, ExportButton } from \"ra-ui-materialui\";\n\nconst ListActions = (props) =\u003e {\n  const {\n    className,\n    basePath,\n    total,\n    resource,\n    currentSort,\n    filterValues,\n    exporter,\n  } = props;\n  return (\n    \u003cTopToolbar className={className}\u003e\n      \u003cCreateButton basePath={basePath} /\u003e\n      \u003cExportButton\n        disabled={total === 0}\n        resource={resource}\n        sort={currentSort}\n        filter={filterValues}\n        exporter={exporter}\n      /\u003e\n      \u003cImportButton {...props} /\u003e\n    \u003c/TopToolbar\u003e\n  );\n};\nexport const PostList = (props) =\u003e (\n  \u003cList {...props} filters={\u003cPostFilter /\u003e} actions={\u003cListActions /\u003e}\u003e\n    \u003cDatagrid\u003e\n      \u003cTextField source=\"title\" /\u003e\n      \u003cRichTextField source=\"body\" /\u003e\n      ...\n    \u003c/Datagrid\u003e\n  \u003c/List\u003e\n);\n```\n\n## Configuration Options\n\n```typescript\n// All configuration options are optional\nconst config: ImportConfig = {\n  // Enable logging\n  logging?: boolean;\n  // Disable the attempt to use \"createMany\", will instead just use \"create\" calls\n  disableCreateMany?: boolean,\n  // Disable the attempt to use \"updateMany\", will instead just use \"update\" calls\n  disableUpdateMany?: boolean,\n  // Disable the attempt to use \"getMany\", will instead just use \"getSingle\" calls\n  disableGetMany?: boolean,\n  // Disable \"import new\" button\n  disableImportNew?: boolean;\n  // Disable \"import overwrite\" button\n  disableImportOverwrite?: boolean;\n  // A function to translate the CSV rows on import\n  preCommitCallback?: (action: \"create\" | \"overwrite\", values: any[]) =\u003e Promise\u003cany[]\u003e;\n  // A function to handle row errors after import\n  postCommitCallback?: (error: any) =\u003e void;\n  // Transform rows before anything is sent to dataprovider\n  transformRows?: (csvRows: any[]) =\u003e Promise\u003cany[]\u003e;\n  // Async function to Validate a row, reject the promise if it's not valid\n  validateRow?: (csvRowItem: any) =\u003e Promise\u003cvoid\u003e;\n  // Any option from the \"papaparse\" library\n  parseConfig?: {\n    // For all options see: https://www.papaparse.com/docs#config\n  }\n}\n\u003cImportButton {...props} {...config}/\u003e\n```\n\n## Handle `id` fields which might be numbers\n\nUse the `paparse` configuration option [`dynamicTyping`](https://www.papaparse.com/docs)\n\n```js\nconst importOptions = {\n  parseConfig?: {\n    // For all options see: https://www.papaparse.com/docs#config\n    dynamicTyping: true\n  }\n}\n```\n\n## Reducing Requests (`.createMany()` and `.updateMany()`)\n\nYour dataprovider will need to implement the `.createMany()` method in order to reduce requests to your backend. If it doesn't exist, it will fallback to calling `.create()` on all items, as shown below (same goes for `.update()`):\n\n| Name              | Special Method     | Fallback Method |\n| ----------------- | ------------------ | --------------- |\n| Creating from CSV | .createMany()      | .create()       |\n| Updating from CSV | .updateManyArray() | .update()       |\n| Checking which exist | .getMany() | .getSingle()       |\n\n*Note: You can disable this feature setting `disableCreateMany: true` or `disableUpdateMany: true` in the configuration.*\n### Interfaces\n\nThe dataprovider should accept these param interfaces for the bulk create/update methods.\n\n```typescript\nexport interface UpdateManyArrayParams {\n  ids: Identifier[];\n  data: any[];\n}\nexport interface CreateManyParams {\n  data: any[];\n}\n```\n\n### Example Implementation\n\nHere's a quick example of how to implement `.createMany()` and `.updateMany()` in your dataprovider:\n\n``` js\n// Must be react-admin 3.x\nconst dataProviderWrapped = {\n  ...dataProvider, // \u003c- Your data provider\n  createMany: async (resource, params) =\u003e {\n    const items = params.data;\n    // Handle create many here\n  },\n  updateMany: async (resource, params) =\u003e {\n    const items = params.data;\n    const idsToUpdate = params.ids;\n    // Handle update many here\n  }\n}\n\n// Pass into to other parts of the system as normal\nreturn (\n  \u003cAdmin dataProvider={dataProviderWrapped}\n```\n\n## Translation `i18n`\n\nThis package uses `react-admin`'s global i18n translation. Below is an example on how to set it up with this package.\n\nCurrent supported languages (submit a PR if you'd like to add a language):\n\n- English (en)\n- Spanish (es)\n- Chinese (zh)\n- German (de)\n- French (fr)\n- Brazilian Portuguese (ptBR)\n- Russian (ru)\n- Dutch (nl)\n\n**Example (i18nProvider)**\n\n```jsx\nimport { resolveBrowserLocale, useLocale } from \"react-admin\";\nimport polyglotI18nProvider from \"ra-i18n-polyglot\";\nimport englishMessages from \"ra-language-english\";\n// This package's translations\nimport * as domainMessages from \"react-admin-import-csv/lib/i18n\";\n\n// Select locale based on react-admin OR browser\nconst locale = useLocale() || resolveBrowserLocale();\n// Create messages object\nconst messages = {\n  // Delete languages you don't need\n  en: { ...englishMessages, ...domainMessages.en },\n  zh: { ...chineseMessages, ...domainMessages.zh },\n  es: { ...spanishMessages, ...domainMessages.es },\n};\n// Create polyglot provider\nconst i18nProvider = polyglotI18nProvider(\n  (locale) =\u003e (messages[locale] ? messages[locale] : messages.en),\n  locale\n);\n\n// declare prop in Admin component\n\u003cAdmin dataProvider={dataProvider} i18nProvider={i18nProvider}\u003e\n```\n\n[More information on this setup here](https://marmelab.com/react-admin/Translation.html)\n\n# Development\n\nIf you'd like to develop on `react-admin-import-csv` do the following.\n\n## Local install\n\n- `git clone https://github.com/benwinding/react-admin-import-csv/`\n- `cd react-admin-import-csv`\n- `yarn`\n\n## Tests\n\n- `yarn test # in root folder`\n\n## Run demo\n\nOpen another terminal\n\n- `yarn build-watch`\n\nOpen another terminal and goto the `demo` folder\n\n- `yarn start`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenwinding%2Freact-admin-import-csv","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenwinding%2Freact-admin-import-csv","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenwinding%2Freact-admin-import-csv/lists"}