{"id":13561565,"url":"https://github.com/dolezel/react-csv-downloader","last_synced_at":"2025-04-03T17:31:13.291Z","repository":{"id":23191256,"uuid":"58194899","full_name":"dolezel/react-csv-downloader","owner":"dolezel","description":"React csv downloader","archived":false,"fork":false,"pushed_at":"2024-04-08T04:38:04.000Z","size":2063,"stargazers_count":110,"open_issues_count":6,"forks_count":32,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-08T05:33:38.665Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dolezel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2016-05-06T09:04:31.000Z","updated_at":"2024-04-15T05:19:01.842Z","dependencies_parsed_at":"2023-10-23T10:45:28.371Z","dependency_job_id":"bc9ab3e2-a307-4fcd-9cbc-e34106fae45d","html_url":"https://github.com/dolezel/react-csv-downloader","commit_stats":{"total_commits":355,"total_committers":15,"mean_commits":"23.666666666666668","dds":0.5464788732394366,"last_synced_commit":"a3c27d2d298545b55f9f810c7987b0365be611be"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dolezel%2Freact-csv-downloader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dolezel%2Freact-csv-downloader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dolezel%2Freact-csv-downloader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dolezel%2Freact-csv-downloader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dolezel","download_url":"https://codeload.github.com/dolezel/react-csv-downloader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247046890,"owners_count":20874735,"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":[],"created_at":"2024-08-01T13:00:58.375Z","updated_at":"2025-04-03T17:31:08.275Z","avatar_url":"https://github.com/dolezel.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# React CSV Downloader\n\n[![Renovate badge][renovate-badge]][renovate]\n[![CircleCI Status][build-badge]][build]\n[![Dependency Status][deps-badge]][deps]\n[![devDependency Status][dev-deps-badge]][dev-deps]\n\nA simple react component to allow download CSV file from js object\n\n## Installation\n\n```sh\nnpm install --save react-csv-downloader\n```\n\n## Usage\n\nUse with children component\n\n```jsx\nimport CsvDownloader from 'react-csv-downloader';\n\u003cCsvDownloader\u003e\n  \u003cbutton\u003eDownload\u003c/button\u003e\n\u003c/CsvDownloader\u003e;\n```\n\nUse without children component\n\n```jsx\n\u003cCsvDownloader text=\"Download\" /\u003e\n```\n\n### Datas\n\npass the downloaded datas as a component prop\n\n```jsx\nconst datas = [\n  {\n    cell1: 'row 1 - cell 1',\n    cell2: 'row 1 - cell 2',\n  },\n  {\n    cell1: 'row 2 - cell 1',\n    cell2: 'row 2 - cell 2',\n  },\n];\n\n\u003cCsvDownloader datas={datas} /\u003e;\n```\n\n### Datas (on demand with async function resolver)\n\npass a function to compute datas to be downloaded\n\n```jsx\nconst asyncFnComputeDate = () =\u003e {\n  // do whatever you need async\n  return Promise.resolve([\n    {\n      cell1: 'row 1 - cell 1',\n      cell2: 'row 1 - cell 2',\n    },\n    {\n      cell1: 'row 2 - cell 1',\n      cell2: 'row 2 - cell 2',\n    },\n  ]);\n};\n\n\u003cCsvDownloader datas={asyncFnComputeDate} /\u003e;\n```\n\n### Column\n\npass the columns definition as a component prop to change the cell display name. If column isn't passed the cell display name is automatically defined with datas keys\n\n```jsx\nconst columns = [\n  {\n    id: 'cell1',\n    displayName: 'Cell 1',\n  },\n  {\n    id: 'cell2',\n    displayName: 'Cell 2',\n  },\n];\n\n\u003cCsvDownloader columns={columns} /\u003e;\n```\n\nYou can also use the columns definition to set the columns display order\n\n## Props\n\n| Name           | Type                         | Default   | Required | Description                                                                                                                                 |\n| -------------- | ---------------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- |\n| columns        | array of object              | null      | false    | Columns definition                                                                                                                          |\n| datas          | array of object/Func/Promise | null      | true     | Downloaded datas or a Promise or a function that can resolve data on demand (async)                                                         |\n| filename       | string                       | null      | true     | You can pass the filename without extension. The extension is automatically added                                                           |\n| extension      | string                       | '.csv'    | false    | You can pass the file extension, note that it will affect filename                                                                          |\n| separator      | string                       | ','       | false    | Columns separator                                                                                                                           |\n| noHeader       | boolean                      | false     | false    | If `true` the header isn't added to the csv file                                                                                            |\n| prefix         | string or boolean            | false     | false    | Filename prefix. If `true` prefix becomes a timestamp                                                                                       |\n| suffix         | string or boolean            | false     | false    | Filename suffix/postfix. If `true` suffix becomes a timestamp                                                                               |\n| text           | string                       | null      | false    | Download button text. Used if no children component.                                                                                        |\n| wrapColumnChar | string                       | ''        | false    | Character to wrap every data and header value with.                                                                                         |\n| bom            | boolean                      | true      | false    | Activate or deactivate bom mode                                                                                                             |\n| newLineAtEnd   | boolean                      | false     | false    | Insert new line at end of file.                                                                                                             |\n| disabled       | boolean                      | false     | false    | If `true` the download process is blocked.                                                                                                  |\n| meta           | boolean                      | false     | false    | If `true` the downloaded file will contain meta instruction sep to help microsoft excel and open office to recognize the sepator character. |\n| handleError    | function                     | undefined | false    | Function to be invoked on error data                                                                                                        |\n| handleEmpty    | function                     | undefined | false    | Function to be invoked on empty result data     \n| title          | string                       | undefined | false    | You can pass a string to be added as a title at the top of the sheet\n\nAll other props are passed to button or wrapping component.\n\n## Full example\n\npass the downloaded datas as a component prop\n\n```jsx\nrender() {\n  const columns = [{\n    id: 'first',\n    displayName: 'First column'\n  }, {\n    id: 'second',\n    displayName: 'Second column'\n  }];\n\n  const datas = [{\n    first: 'foo',\n    second: 'bar'\n  }, {\n    first: 'foobar',\n    second: 'foobar'\n  }];\n\n  return (\n    \u003cdiv\u003e\n      \u003cCsvDownloader\n        filename=\"myfile\"\n        extension=\".csv\"\n        separator=\";\"\n        wrapColumnChar=\"'\"\n        columns={columns}\n        datas={datas}\n        text=\"DOWNLOAD\" /\u003e\n    \u003c/div\u003e\n  );\n}\n\n// content of myfile.csv\n// 'First column';'Second column'\n// 'foo';'bar'\n// 'foobar';'foobar'\n```\n\n## Get CSV contents\n\nIf you just need to get CSV contents, use `import { toCsv } from 'react-csv-downloader';` to import toCsv function and use it directly.\n\n## License\n\n[MIT License](http://opensource.org/licenses/MIT)\n\n[renovate-badge]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg\n[renovate]: https://renovatebot.com/\n[build-badge]: https://circleci.com/gh/dolezel/react-csv-downloader.svg?style=svg\n[build]: https://circleci.com/gh/dolezel/workflows/react-csv-downloader\n[deps-badge]: https://david-dm.org/dolezel/react-csv-downloader.svg\n[deps]: https://david-dm.org/dolezel/react-csv-downloader\n[dev-deps-badge]: https://david-dm.org/dolezel/react-csv-downloader/dev-status.svg\n[dev-deps]: https://david-dm.org/dolezel/react-csv-downloader#info=devDependencies\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdolezel%2Freact-csv-downloader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdolezel%2Freact-csv-downloader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdolezel%2Freact-csv-downloader/lists"}