react-csv-downloader

React CSV Downloader

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
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.

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"
        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

Changelog

[2.2.0] - 2020-10-26

Added

• Support for React v17 #215