when I try this snippet in the live demo at https://json-to-csv-export.coston.io/ :

  <button onClick={() => csvDownload({ delimiter: ',', data: [{ foo: '"hello"', bar: '"there"' }] })}>
    Download Data
  </button>

I receive this .csv file:

foo,bar
"\"hello\"","\"there\""

I expected to receive this .csv file:

foo,bar
""hello"",""there""

or this one:

foo,bar
'"hello"','"there"'

I believe this is due to using JSON.stringify to encode fields for output, which encloses each field in double-quotes and escapes double-quotes in the data itself with a backslash (which I don't think is correct according to RFC-4180).

`<q-btn
outline
class="q-ma-sm"
color="primary"
label="Export to CSV"
@click="csvDownload(usersPermissionsFlat)"
:data="result.data"
filename="users.csv"
/>

import csvDownload from 'json-to-csv-export'

return {
csvDownload
}`

Error comes up saying reading undefined "reduce" at Proxy.csvDownload2 (index.js:14:41)

not sure how to solve the issue.

Hello, I just wanted to share my way to declare headers and data which I believe is easier in most cases, especially when there is a lot of columns. Just in case it helps anyone or you are open to add something similar baked in the lib.

Basically, I declare my data like this:

const columns: CsvColumn<Person>[] = [
    {
      title: 'First Name',
      getContent: (p) => p.firstName,
    },
    {
      title: 'Last Name'
      getContent: (p) => p.lastName,
    }
  ]

This is possible thanks to this small helper:

import type csvDownload from 'json-to-csv-export'

type CsvDownloadProps = Parameters<typeof csvDownload>[0]

export type CsvColumn<T> = {
  title: string
  getContent: (value: T) => string | null | number | undefined
}

export const getCsvDownloadProps = <T>({
  columns,
  data,
  ...props
}: Omit<CsvDownloadProps, 'data' | 'headers'> & {
  columns: CsvColumn<T>[]
  data: T[]
}): CsvDownloadProps => {
  return {
    ...props,
    headers: columns.map((c) => c.title),
    data: data.map((d) => columns.map((c) => c.getContent(d) ?? '')),
  }
}

When exporting to CSV it generates first row with columns indexes.
Please add the ability to hide it.
Thanks

This is the PR with suggested change.
#36

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Hey! How about Idea to rewrite code in TS? I can do it (already done actually)

In the following case:

csvDownload({
  headers: ["first_column", "second_column"],
  data: [{ second_column: 2, first_column: 1 }],
  delimiter: ",",
});

...the output will actually be this, which is incorrect:

first_column,second_column
2,1

I haven't looked at the source code, but I imagine what's happening is that if data is an object, the library just serializes the object without regard for headers. But ideally it should read properties from each row object in the order of headers.

It's easy enough to fix in my own code, like this:

const headers = ["first_column", "second_column"]
const data = [{ second_column: 2, first_column: 1 }]
csvDownload({
  headers,
  data: data.map(row => headers.map(columnId => row[columnId])),
  delimiter: ",",
});

But ideally your library could do that so we don't have to :)

When adding a delimitter as follows:

const dataToConvert = {
    data: result,
    filename: `${props.name}.csv`,
    delimiter: ';',
    headers: Object.keys(result[0])
  }

The delimitter should be added at the top of the file to help with opening it.

Thanks for the great tool!
I found an issue - The CSV file should be saved as UTF-8 otherwise Excel and other encoding-sensitive applications may show gibberish instead of Hebrew characters.

You can see the Title column:

If I open the file with Notepad or import it to excel using Excel Data tools - all good.
I think the solution is to add UTF-8 BOM to CSV export, maybe this could help:
https://stackoverflow.com/questions/17879198/adding-utf-8-bom-to-string-blob/27975629#27975629

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Hi ;]
When i download a json with some zeros in it is seems as blank in the csv file.

example data:

[
    [
        "DATE",
        "UNITֹ SEEN",
        "ENGAGEMENT",
        "CONVERSION",
        "SUBSCRIBERS",
        "UNIT START",
        "EFFECTIVE CTR",
        "COMPLETION RATE",
        "ADDED TIME(min)"
    ],
    [
        "Jul 28, 2022",
        4762501,
        453675,
        0,
        3,
        362542,
        "7.61%",
        "6.85%",
        "0:0m"
    ],
]

I can make a pr for that

Thanks