{"id":13469142,"url":"https://github.com/tableflowhq/csv-import","last_synced_at":"2026-01-05T23:08:35.713Z","repository":{"id":65670640,"uuid":"595391507","full_name":"tableflowhq/csv-import","owner":"tableflowhq","description":"The open-source CSV importer, maintained by @tableflowhq","archived":false,"fork":false,"pushed_at":"2024-10-17T21:11:55.000Z","size":21909,"stargazers_count":1731,"open_issues_count":29,"forks_count":114,"subscribers_count":17,"default_branch":"main","last_synced_at":"2025-05-13T16:14:50.212Z","etag":null,"topics":["csv","excel","file-sharing","file-upload","import","importer","react","typescript","upload","uploader"],"latest_commit_sha":null,"homepage":"https://tableflow.com","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/tableflowhq.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":"2023-01-31T01:20:17.000Z","updated_at":"2025-05-03T16:35:39.000Z","dependencies_parsed_at":"2024-01-19T22:23:13.021Z","dependency_job_id":"f893f40e-df17-4bfb-88bd-df36c94043b4","html_url":"https://github.com/tableflowhq/csv-import","commit_stats":{"total_commits":1062,"total_committers":20,"mean_commits":53.1,"dds":0.5376647834274952,"last_synced_commit":"0b03fe7ce87ba02822acf1851119267af5a0a789"},"previous_names":["tableflowhq/inquery","inqueryio/inquery","tableflowhq/tableflow"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tableflowhq%2Fcsv-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tableflowhq%2Fcsv-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tableflowhq%2Fcsv-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tableflowhq%2Fcsv-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tableflowhq","download_url":"https://codeload.github.com/tableflowhq/csv-import/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253996597,"owners_count":21996728,"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":["csv","excel","file-sharing","file-upload","import","importer","react","typescript","upload","uploader"],"created_at":"2024-07-31T15:01:27.759Z","updated_at":"2026-01-05T23:08:35.685Z","avatar_url":"https://github.com/tableflowhq.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"https://tableflow-assets-cdn.s3.amazonaws.com/csv-import.jpg\" width=\"600\" alt=\"CSV Import\"\u003e\n\n\u003cem\u003eOpen-source CSV, TSV, and XLS/XLSX file importer for React and JavaScript\u003c/em\u003e\n\n\u003c/div\u003e\n\n## How It Works\n\n1. Embed the CSV Importer in your app with the [React](https://www.npmjs.com/package/csv-import-react)\n   or [JavaScript](https://www.npmjs.com/package/csv-import-js) SDK\n2. Define the columns your users can import (via the `template` parameter)\n3. Your users import their files in your app\n4. Retrieve the imported data from the `onComplete` event\n\n![Importer Modal](https://tableflow-assets-cdn.s3.amazonaws.com/importer-modal-20230613b.png)\n\n## Get Started\n\n### 1. Install SDK\n\nUse NPM or Yarn to install the SDK for [React](https://www.npmjs.com/package/csv-import-react)\nor [JavaScript](https://www.npmjs.com/package/csv-import-js).\n\n**NPM**\n\n```bash\nnpm install csv-import-react\n# or\nnpm install csv-import-js\n```\n\n**Yarn**\n\n```bash\nyarn add csv-import-react\n# or\nyarn add csv-import-js\n```\n\n### 2. Add the importer to your application\n\n#### Using React\n\n```javascript\nimport { CSVImporter } from \"csv-import-react\";\nimport { useState } from \"react\";\n\nfunction MyComponent() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={() =\u003e setIsOpen(true)}\u003eOpen CSV Importer\u003c/button\u003e\n\n      \u003cCSVImporter\n        modalIsOpen={isOpen}\n        modalOnCloseTriggered={() =\u003e setIsOpen(false)}\n        darkMode={true}\n        onComplete={(data) =\u003e console.log(data)}\n        template={{\n          columns: [\n            {\n              name: \"First Name\",\n              key: \"first_name\",\n              required: true,\n              description: \"The first name of the user\",\n              suggested_mappings: [\"First\", \"Name\"],\n            },\n            {\n              name: \"Age\",\n            },\n          ],\n        }}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n#### Using JavaScript\n\n```html\n\u003chead\u003e\n  \u003cscript src=\"https://unpkg.com/csv-import-js@latest/index.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cbutton id=\"uploadButton\"\u003eOpen CSV Importer\u003c/button\u003e\n  \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n  \u003cscript\u003e\n    const importer = CSVImporter.createCSVImporter({\n      domElement: document.getElementById(\"app\"),\n      modalOnCloseTriggered: () =\u003e importer?.closeModal(),\n      onComplete: (data) =\u003e console.log(data),\n      darkMode: true,\n      template: {\n        columns: [\n          {\n            name: \"First Name\",\n            key: \"first_name\",\n            required: true,\n            description: \"The first name of the user\",\n            suggested_mappings: [\"First\", \"Name\"],\n          },\n          {\n            name: \"Age\",\n          },\n        ],\n      },\n    });\n\n    const uploadButton = document.getElementById(\"uploadButton\");\n    uploadButton.addEventListener(\"click\", () =\u003e {\n      importer?.showModal();\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n## SDK Reference\n\n### isModal (_boolean_, default: `true`)\n\nWhen set to `true` (default value), the importer will behave as a modal with its open state controlled by `modalIsOpen`. When set to `false`, the importer will be embedded directly in your page.\n\n### modalIsOpen (_boolean_, default: `false`)\n\nOnly used when `isModal` is `true`: Controls the importer modal being open or closed.\n\\\n**React SDK Only**: For the JavaScript SDK, use `.showModal()` and `.closeModal()` to operate the modal.\n\n### modalOnCloseTriggered (_function_)\n\nOnly used when `isModal` is `true`: A function called when the user clicks the close button or clicks outside of (when used with `modalCloseOnOutsideClick`) the importer. `useState` can be used to control the importer modal opening and closing.\n\n```javascript\nconst [isOpen, setIsOpen] = useState(false);\n```\n\n```jsx\n\u003cbutton onClick={() =\u003e setIsOpen(true)}\u003eOpen CSV Importer\u003c/button\u003e\n\u003cCSVImporter\n  modalIsOpen={isOpen}\n  modalOnCloseTriggered={() =\u003e setIsOpen(false)}\n  ...\n/\u003e\n```\n\n### modalCloseOnOutsideClick (_boolean_, default: `false`)\n\nOnly used when `isModal` is `true`: Clicking outside the modal will call the `modalOnCloseTriggered` function.\n\n### template (_object_)\n\nConfigure the columns used for the import.\n\n```jsx\ntemplate={{\n  columns: [\n    {\n      name: \"First Name\",\n      key: \"first_name\",\n      required: true,\n      description: \"The first name of the user\",\n      suggested_mappings: [\"First\", \"Name\"],\n    },\n    {\n      name: \"Age\",\n    },\n    {\n      name: \"Category\",\n      // `multiple` allows multiple source columns to be mapped to a single destination column\n      multiple: true,\n      // `combiner` is the function used to combine the values from multiple source columns; defaults to joining with a space\n      combiner: (values: string[]) =\u003e values.join(' | '),\n    }\n  ],\n}}\n```\n\n### onComplete (_function_)\n\nCallback function that fires when a user completes an import. It returns `data`, an object that contains the row data, column definitions, and other information about the import.\n\n```jsx\nonComplete={(data) =\u003e console.log(data)}\n```\n\nExample `data`:\n\n```json\n{\n  \"num_rows\": 2,\n  \"num_columns\": 3,\n  \"columns\": [\n    {\n      \"key\": \"age\",\n      \"name\": \"Age\"\n    },\n    {\n      \"key\": \"email\",\n      \"name\": \"Email\"\n    },\n    {\n      \"key\": \"first_name\",\n      \"name\": \"First Name\"\n    }\n  ],\n  \"rows\": [\n    {\n      \"index\": 0,\n      \"values\": {\n        \"age\": 23,\n        \"email\": \"maria@example.com\",\n        \"first_name\": \"Maria\"\n      }\n    },\n    {\n      \"index\": 1,\n      \"values\": {\n        \"age\": 32,\n        \"email\": \"robert@example.com\",\n        \"first_name\": \"Robert\"\n      }\n    }\n  ]\n}\n```\n\n### darkMode (_boolean_, default: `false`)\n\nToggle between dark mode (`true`) and light mode (`false`).\n\n### primaryColor (_string_)\n\nSpecifies the primary color for the importer in hex format. Use `customStyles` to customize the UI in more detail.\n\n```jsx\nprimaryColor = \"#7A5EF8\";\n```\n\n### customStyles (_object_)\n\nApply custom styles to the importer with an object containing CSS properties and values. Note that custom style properties will override `primaryColor` and any default styles from `darkMode`.\nAvailable options:\n\n```jsx\ncustomStyles={{\n  \"font-family\": \"cursive\",\n  \"font-size\": \"15px\",\n  \"base-spacing\": \"2rem\",\n  \"border-radius\": \"8px\",\n  \"color-primary\": \"salmon\",\n  \"color-primary-hover\": \"crimson\",\n  \"color-secondary\": \"indianRed\",\n  \"color-secondary-hover\": \"crimson\",\n  \"color-tertiary\": \"indianRed\",\n  \"color-tertiary-hover\": \"crimson\",\n  \"color-border\": \"lightCoral\",\n  \"color-text\": \"brown\",\n  \"color-text-soft\": \"rgba(165, 42, 42, .5)\",\n  \"color-text-on-primary\": \"#fff\",\n  \"color-text-on-secondary\": \"#ffffff\",\n  \"color-background\": \"bisque\",\n  \"color-background-modal\": \"blanchedAlmond\",\n  \"color-input-background\": \"blanchedAlmond\",\n  \"color-input-background-soft\": \"white\",\n  \"color-background-menu-hover\": \"bisque\",\n  \"color-importer-link\": \"indigo\",\n  \"color-progress-bar\": \"darkGreen\"\n}}\n```\n\n## Internationalization\n\n### Predefined languages\n\n- Out-of-the-box support for various languages.\n- Common languages are available through the language prop (i.e., `language=\"fr\"` for French).\n- Available predefined languages:\n  - en\n  - es\n  - fr\n\n### Customizable language\n\n- Language keys can be exported and overridden.\n- Labels and messages can be customized to any text.\n- Translations key examples can be found in `src/i18n/es.ts`\n\n```javascript\n// Set up custom translations\nconst customTranslations = {\n  jp: {\n    Upload: \"アップロード\",\n    \"Browse files\": \"ファイルを参照\",\n  },\n  pt: {\n    Upload: \"Carregar\",\n    \"Browse files\": \"Procurar arquivos\",\n  },\n};\n\nreturn (\n  \u003cCSVImporter language=\"jp\" customTranslations={customTranslations} ...props /\u003e\n)\n\n```\n\n### showDownloadTemplateButton (_boolean_, default: `true`)\n\nWhen set to `false`, hide the Download Template button on the first screen of the importer.\n\n### skipHeaderRowSelection (_boolean_, default: `false`)\n\nWhen set to `true`, the importer will not display and skip the Header Row Selection step and always choose the first row in the file as the header.\n\n## Contributing\n\n### Setting Up the Project\n\nTo set up the project locally, follow these steps:\n\n1. **Clone the repository**\n\n```bash\ngit clone https://github.com/tableflowhq/csv-import.git\ncd csv-import\n```\n\n2. **Install dependencies**\n\n```bash\nyarn install\n```\n\n3. **Build the project**\n\n```bash\nyarn build\n```\n\n### Running Storybook\n\nTo run Storybook locally, follow these steps:\n\n1. **Start Storybook**\n\n```bash\nyarn storybook\n```\n\n2. **Open Storybook in your browser:**\n   Storybook should automatically open in your default browser. If it doesn't, navigate to [http://localhost:6006](http://localhost:6006).\n\n### Modifying the project and testing with the demo app\n\nThe project includes a demo app that you can use to test your changes. The demo app has its own `README.md` file with detailed instructions on how to set it up and run it.\n\n1. Make your changes in the codebase.\n2. Follow the instructions in the demo app's `README.md` to set up and run the demo app. This will help you verify that your changes work as expected in a real application.\n3. Commit your changes and push them to your forked repository.\n4. Create a pull request to the main repository.\n\n## Get In Touch\n\nLet us know your feedback or feature requests! Submit a GitHub\nissue [here](https://github.com/tableflowhq/csv-import/issues/new).\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftableflowhq%2Fcsv-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftableflowhq%2Fcsv-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftableflowhq%2Fcsv-import/lists"}