React CSV Downloader

Renovate badge CircleCI Status Dependency Status devDependency Status

A simple react component to allow download CSV file from js object

Installation

npm install --save react-csv-downloader

Usage

Use with children component

import CsvDownloader from 'react-csv-downloader';
<CsvDownloader>
  <button>Download</button>
</CsvDownloader>;

Use without children component

<CsvDownloader text="Download" />

Datas

pass the downloaded datas as a component prop

const datas = [
  {
    cell1: 'row 1 - cell 1',
    cell2: 'row 1 - cell 2',
  },
  {
    cell1: 'row 2 - cell 1',
    cell2: 'row 2 - cell 2',
  },
];

<CsvDownloader datas={datas} />;

Datas (on demand with async function resolver)

pass a function to compute datas to be downloaded

const asyncFnComputeDate = () => {
  // do whatever you need async
  return Promise.resolve([
    {
      cell1: 'row 1 - cell 1',
      cell2: 'row 1 - cell 2',
    },
    {
      cell1: 'row 2 - cell 1',
      cell2: 'row 2 - cell 2',
    },
  ]);
};

<CsvDownloader datas={asyncFnComputeDate} />;

Column

pass 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

const columns = [
  {
    id: 'cell1',
    displayName: 'Cell 1',
  },
  {
    id: 'cell2',
    displayName: 'Cell 2',
  },
];

<CsvDownloader columns={columns} />;

You can also use the columns definition to set the columns display order

Props

Name Type Default Required Description
columns array of object null false Columns definition
datas array of object/Func/Promise null true Downloaded datas or a Promise or a function that can resolve data on demand (async)
filename string null true You can pass the filename without extension. The extension is automatically added
extension string '.csv' false You can pass the file extension, note that it will affect filename
separator string ',' false Columns separator
noHeader boolean false false If true the header isn't added to the csv file
prefix string or boolean false false Filename prefix. If true prefix becomes a timestamp
suffix string or boolean false false Filename suffix/postfix. If true suffix becomes a timestamp
text string null false Download button text. Used if no children component.
wrapColumnChar string '' false Character to wrap every data and header value with.
bom boolean true false Activate or deactivate bom mode
newLineAtEnd boolean false false Insert new line at end of file.
disabled boolean false false If true the download process is blocked.

All other props are passed to button or wrapping component.

Full example

pass the downloaded datas as a component prop

render() {
  const columns = [{
    id: 'first',
    displayName: 'First column'
  }, {
    id: 'second',
    displayName: 'Second column'
  }];

  const datas = [{
    first: 'foo',
    second: 'bar'
  }, {
    first: 'foobar',
    second: 'foobar'
  }];

  return (
    <div>
      <CsvDownloader
        filename="myfile"
        extension=".csv"
        separator=";"
        wrapColumnChar="'"
        columns={columns}
        datas={datas}
        text="DOWNLOAD" />
    </div>
  );
}

// content of myfile.csv
// 'First column';'Second column'
// 'foo';'bar'
// 'foobar';'foobar'

Get CSV contents

If you just need to get CSV contents, use import { toCsv } from 'react-csv-downloader'; to import toCsv function and use it directly.

License

MIT License

Last updated

v2.6.0

Install

npm install react-csv-downloader
yarn add react-csv-downloader

BUNDLE SIZE

Not Available

DOWNLOAD TIME

Not Available

CDNs

extras

Contributors

  • dolezel