react-csv-downloader

!Renovate badgerenovate-badgerenovate !CircleCI Statusbuild-badgebuild !Dependency Statusdeps-badgedeps !devDependency Statusdev-deps-badgedev-deps
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. | | 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. | | handleError | function | undefined | false | Function to be invoked on error data | | handleEmpty | function | undefined | false | Function to be invoked on empty result data
| title | string | undefined | false | You can pass a string to be added as a title at the top of the sheet
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