Nerdy People Matriculate

    TypeScript icon, indicating that this package has built-in type declarations

    2.8.0 • Public • Published

    React CSV Downloader

    Renovate badge CircleCI Status Dependency Status devDependency Status

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


    npm install --save react-csv-downloader


    Use with children component

    import CsvDownloader from 'react-csv-downloader';

    Use without children component

    <CsvDownloader text="Download" />


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


    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


    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 instrution sep to help microsoft excel and open office to recognize the sepator character.

    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 (
            text="DOWNLOAD" />
    // 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.


    MIT License


    npm i react-csv-downloader

    DownloadsWeekly Downloads






    Unpacked Size

    92.9 kB

    Total Files


    Last publish


    • dolezel