Last row is missing in exported CSV when using react-csv - reactjs

Question

I am exporting an array of objects to react-csv from a table in my UI but the last row is missing in the downloaded CSV file.
I select some rows in the table which contain the records as shown below (there are 3 selected in this example):
I confirmed that the data is attached in the CSVLink tag data property
I confirmed that the data is there via a console.log before I click the export button in the UI.
But the resulting CSV download is missing the last selected item. This happens no matter how many items are selected. The last one is always missing even though the array is correctly built and attached to the CSVLink data property.
Am I missing something here? How can I fix this issue? I cannot find any similar issues on the interweb.

Answer 1

The react-csv package has several open issues with download filenames and
updating state correctly. This resulted in the last item that was updated in my state to not be registered when the download was initiated. You can see one of the issues here (there are more that are specific to state with downloads): https://github.com/react-csv/react-csv/pull/137
I couldn't find any solution using the package so I abandoned it and wrote my own version that fully works. You can find it as a Gist here if anyone needs it: https://gist.github.com/cburkhardtBB/14ba0e3a37c2cef83eaea79e8c93092d
Here is the example code just in case someone runs into a similar issue with either a missing row using CSVLink or not being able to get the CSVDownload filename to work.
import { zipObject } from 'lodash';
export const CSVExport = csvData => {
const { items, headers, filename } = csvData;
// use headers if available, if not, use the key names for headers
// create same type with zipped object
const headerKeys = Object.keys(items[0]);
const rowHeader = headers || zipObject(headerKeys, headerKeys);
const rows = [rowHeader, ...items];
const csv = convertRowsToCSV(rows);
const csvFileName = filename + '.csv' || 'export.csv';
initiateDownload(csv, csvFileName);
};
const convertRowsToCSV = rowData => {
return rowData.map(data => Object.values(data).join(',')).join('\r\n');
};
// same solution others use for downloading
const initiateDownload = (csvData, csvFileName) => {
const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, csvFileName); // IE 10+
} else {
const link = document.createElement('a');
if (link.download !== undefined) {
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', csvFileName);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
};
// example headers object
const headers = {
serviceStartDate: 'Service Start Date',
serviceStartTime: 'Service Start Time',
serviceEndTime: 'Service End Time',
client: 'Client',
service: 'Service',
quantity: 'Quantity',
}
// example items array
const items= [
{
"serviceStartDate": "08 Feb 2020",
"serviceStartTime": "6:30 PM",
"serviceEndTime": "7:30 PM",
"client": "TestClient1",
"service": "Programming",
"quantity": 1,
},
{
"serviceStartDate": "08 Feb 2020",
"serviceStartTime": "9:30 PM",
"serviceEndTime": "11 PM",
"client": "TestClient2",
"service": "Consultation",
"quantity": 1.5,
},
{
"serviceStartDate": "09 Feb 2020",
"serviceStartTime": "1:30 AM",
"serviceEndTime": "2 AM",
"client": "TestClient3",
"service": "Refactoring",
"quantity": 0.5,
}
]
// example filename (need to import moment.js to do below)
// like this => import moment from 'moment';
const csvDownloadDate = moment(new Date()).format('DD-MMM-YYYY'); // today
const filename = `${csvDownloadDate}-Services`;
// package up all data into object
const csvData = {
items,
headers,
filename,
}
// also works with no headers now
// const csvData = {
// items,
// filename,
// }
// call function from another file after importing CSVExport
CSVExport(csvData);