onDownload throws error 'Cannot read property 'download' of undefined', when passing custom body in buildBody function

[gk108000]

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

1. 2. 3. 4.

Your Environment

Tech	Version
Material-UI
MUI-datatables
React
browser
etc

[gk108000]

Options::
downloadOptions: { filename: "inventory-details.csv", filterOptions: { useDisplayedColumnsOnly: true, useDisplayedRowsOnly: true } }, onDownload: (buildHead: any, buildBody: any, columns: any, data: any) => { console.log("Data:", data); const headerCol = [ { name: "serialNumber", label: "SERIAL NUMBER", download: true }, { name: "MODEL NAME", label: "MODEL NAME", download: true }, { name: "SW VERSION", label: "SW VERSION", download: true }, { name: "MAC ADDRESS", label: "MAC ADDRESS", download: true }, { name: "PRODUCT ID", label: "PRODUCT ID", download: true }, { name: "PRODUCT CATEGORY", label: "PRODUCT CATEGORY", download: true }, { name: "PRODUCT DESCRIPTION", label: "PRODUCT DESCRIPTION", download: true }, { name: "ROLE", label: "ROLE", download: true }, { name: "MASTER IP", label: "MASTER IP", download: true }, { name: "CLUSTER NAME", label: "CLUSTER NAME", download: true }, { name: "LICENSE DETAILS", label: "LICENSE DETAILS", download: true } ]; data = data.map((obj: any) => { const temp = [ obj.data[0], obj.data[1], obj.data[2], obj.data[3], obj.data[4]["id"], obj.data[4]["lineCategory"], obj.data[4]["description"], obj.data[5], obj.data[6] ? obj.data[6] : "NA", obj.data[7] ]; return { data: temp }; }); //console.log("Table Data:", data);

  return `${buildHead(headerCol)}${buildBody(data)}`.trim();
}

Data Provided:: Table Data example:data: Array(10) 0: "CP005XXXX" 1: "Aruba7005-US" 2: "8.5.0.2" 3: "20:XX:03:XX:55:XX to 20:XX:03:XX:55:XX" 4: "JW634A" 5: "Aruba WLAN" 6: "Aruba 7005 (US) 16 AP Branch Cntlr" 7: "MD" 8: "NA" 9: {acrLimit: "0", acrUsed: "0", apLimit: "0", apUsed: "1", licenseSummary: null, …} length: 7 proto: Array(0)

Column Data:

[gabrielliwerant]

There's likely an issue with the way you are mapping data in the function, but it's hard to tell. If you open a codesandbox that reproduces the issue, I will take a look.

[Somyadeep-Chowdhury]

Inside onDownload function, calling a callback method and tried to pass the data received. on file download, it is undefined. How to resolve it?

onDownload: (buildHead, buildBody, columns, data) => { if (this.state.isdownload) { this.callbackMethod((d) => { console.log(d); let val = ${buildHead(columns)}${buildBody(d)}.trim();` console.log(val) return val }); } }

[patorjk]

@Somyadeep-Chowdhury was this.callbackMethod undefined? I would be careful using "this" in JavaScript. Additionally, the onDownload method is expecting you to return a value, which you're not doing in your method above.

I would recommend creating a codesandbox showing the issue you're having.

[alielkhateeb]

@gabrielliwerant @patorjk I faced this too, and I think I know where the issue is, but I don't have an idea how to fix it, I can't think of a way 😆 I'll try to explain as much as I can

In buildBody function the filter is referring to columns (the original columns data). If I want to export and extra column then columns[index] will be undefined

For example: If my columns sent to the prop columns of MUIDataTable are ["Name", "Company"] Then I want to add another column upon exporting csv

buildHead([...columns, "newColumn"]) // This will create the head
buildBody([...data, data[0]]) // This should create the body with the extra column, but according to the original columns array, columns[2] does not exist (undefined)

As a workaround, for the time being, I add a fake excluded column in the columns definition when calling MUIDataTable and the error is gone 😆 so the real question is, how to use the modified columns for filtering download option rather than the original one?

I hope this is clear enough :) please let me know if you have any questions.