json-to-csv-export icon indicating copy to clipboard operation
json-to-csv-export copied to clipboard

How to ignore header line.

Open mnosuk opened this issue 1 year ago • 3 comments

Hi folk. we are using "json-to-csv-export": "^2.1.1"

here is an example of json.

[
    {
        "A": "TEST",
        "B": "sdd",
        "C": "",
        "D": "",
        "E": "",
        "F": "",
        "G": "",
        "H": "",
        "I": "",
        "J": ""
    },
    {
        "A": "",
        "B": "",
        "C": "",
        "D": "",
        "E": "",
        "F": "",
        "G": "",
        "H": "",
        "I": "",
        "J": ""
    },
    {
        "A": "",
        "B": "",
        "C": "",
        "D": "",
        "E": "",
        "F": "",
        "G": "",
        "H": "",
        "I": "",
        "J": ""
    },
    {
        "A": "",
        "B": "",
        "C": "",
        "D": "",
        "E": "",
        "F": "",
        "G": "",
        "H": "",
        "I": "",
        "J": ""
    },
    {
        "A": "",
        "B": "",
        "C": "",
        "D": "",
        "E": "",
        "F": "",
        "G": "",
        "H": "",
        "I": "",
        "J": ""
    },
    {
        "A": "",
        "B": "",
        "C": "",
        "D": "",
        "E": "",
        "F": "",
        "G": "",
        "H": "",
        "I": "",
        "J": ""
    },
    {
        "A": "",
        "B": "",
        "C": "",
        "D": "",
        "E": "",
        "F": "",
        "G": "",
        "H": "",
        "I": "",
        "J": ""
    },
    {
        "A": "",
        "B": "",
        "C": "",
        "D": "",
        "E": "",
        "F": "",
        "G": "",
        "H": "",
        "I": "",
        "J": ""
    },
    {
        "A": "",
        "B": "",
        "C": "",
        "D": "",
        "E": "",
        "F": "",
        "G": "",
        "H": "",
        "I": "",
        "J": ""
    },
    {
        "A": "",
        "B": "",
        "C": "",
        "D": "",
        "E": "",
        "F": "",
        "G": "",
        "H": "",
        "I": "",
        "J": ""
    }
]


csvDownload({
            data: e,
            filename: "Grid_Data",
            delimiter: ",",
            headers: []
        })

the expected behavior is, I want data to start at first row like this. image

but actual behavior is image

I also tried with undefined header (and also remove it out), the result is image

Any misconfiguration? please advice.

mnosuk avatar Nov 18 '24 13:11 mnosuk

Hey @mnosuk! Having no headers is not supported by this package. In most cases it's a bad practice to exclude headers, so there is nothing to simplify that process here.

You probably have a very valid reason to exclude them, so in this case, I would provide empty labels to the headers prop. This will achieve what you're aiming to do.

() => {
  const mockData = [
    {
      id: 1,
      firstName: "Sarajane",
      lastName: "Wheatman",
      email: "[email protected]",
      language: "Zulu",
      ip: "40.98.252.240",
    },
    {
      id: 2,
      firstName: "Linell",
      lastName: "Humpherston",
      email: "[email protected]",
      language: "Czech",
      ip: "82.225.151.150",
    },
  ];

  const headers = [
    { key: "id", label: "" },
    { key: "firstName", label: "" },
    { key: "lastName", label: "" },
    { key: "email", label: "" },
    { key: "language", label: "" },
    { key: "ip", label: "" },
  ];

  return (
    <button onClick={() => jsonToCsvExport({ data: mockData, headers })}>
      Download Data
    </button>
  );
};

coston avatar Nov 18 '24 19:11 coston

Hi. @coston using const headers = [ { key: "id", label: "" }, { key: "firstName", label: "" }, { key: "lastName", label: "" }, { key: "email", label: "" }, { key: "language", label: "" }, { key: "ip", label: "" }, ];

will be the same result as

headers = [];

we still get the empty first line that I actually want to remove that line.

is it possible to add for changes?

mnosuk avatar Nov 20 '24 05:11 mnosuk

Ahh, @mnosuk, sorry for overlooking that detail. It would be nothing to add something like an omitHeaders option to do what you are looking for.

jsonToCsvExport({ data, omitHeaders: true })}

Would you like to contribute this feature?

coston avatar Nov 20 '24 14:11 coston