Skip to content
master
Switch branches/tags
Code

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}/>

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 null true Downloaded datas
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, import react-csv-downloader/dist/lib/csv function and use it directly.

License

MIT License