How to get column label from datatable using LWC?

Question

I want to export data fom lightning datatable into Excel file

JS :

exportData(){
    let rowEnd = '\n';
    let csvString = '';
    let rowData = new Set();
    // getting keys from data
    this.cases.forEach(function (record) {
        Object.keys(record).forEach(function (key) {
            rowData.add(key);

        });
    });
    // Array.from() method returns an Array object from any object with a length property or an iterable object.
    rowData = Array.from(rowData);
    rowData.splice(0,2);
    console.log('rowData0000',rowData);
    // splitting using ','
    csvString += rowData.join(',');
    csvString += rowEnd;

    // main for loop to get the data based on key value
    for(let i=0; i < this.cases.length; i++){
        let colValue = 0;
        for(let key in rowData) {
            if(rowData.hasOwnProperty(key)) {
                let rowKey = rowData[key];

                // add , after every value except the first.
                if(colValue > 0){
                    csvString += ',';
                }
                // If the column is undefined, it as blank in the CSV file.
                let value = this.cases[i][rowKey] === undefined ? '' : this.cases[i][rowKey];
                csvString += '"'+ value +'"';
                colValue++;
            }
        }
        csvString += rowEnd;
    }


    let downloadElement = document.createElement('a');

    // This  encodeURI encodes special characters, except: , / ? : @ & = + $ # (Use encodeURIComponent() to encode these characters).
    downloadElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvString);
    downloadElement.target = '_self';
    downloadElement.download = 'SalesforceExport.csv';
    document.body.appendChild(downloadElement);
    downloadElement.click(); 
}


 @track columns = [
        {label: 'NUMERO DE LA REQUETE', fieldName: 'CaseNumberURL',type: 'url',typeAttributes: {label: { fieldName: 'CaseNumber' }, target: '_blank'},sortable: true},
        {label: 'OBJET',fieldName: 'Subject',type: 'text',sortable: true},
        {label: 'STATUS',fieldName: 'Status',type: 'Picklist',sortable: true},
        {label: 'INTERACTION CLIENT',fieldName: 'Interaction_client__c',type: 'Picklist',sortable: true},
        {label: 'DATE D\'OUVERTURE',fieldName: 'Date_ouverture__c',type: 'Date',sortable: true},
        {label: 'NOM DU CONTACT',fieldName: 'ContactIdURL',type: 'url',typeAttributes: {label: { fieldName: 'ContactId' }, target: '_blank'},sortable: true},
        {label: 'PRIORITE',fieldName: 'Priority',type: 'Picklist',sortable: true},
        {label: 'Type',fieldName: 'Type',type: 'Picklist',sortable: true},
        {label: 'PRODUIT',fieldName: 'Produit__c',type: 'Picklist',sortable: true},
        {label: 'ENVIRONNEMENT',fieldName: 'Environnement__c',type: 'Picklist',sortable: true},
        {label: 'SITE CONCERNE',fieldName: 'SiteForPortal__c',type: 'Formula',sortable: true},
        {label: 'DEVELOPPEMENT',fieldName: 'Developpement__c',type: 'Formula',sortable: true},
        {label: 'CORRECTIONS & REPORTS',fieldName: 'CorrectionsReports__c',type: 'Formula',sortable: true},
        {label: 'NOM COMPLET DU PROPRIETAIRE',fieldName: 'Nom_du_groupement__c',type: 'Formula',sortable: true},
        {label: 'DATE/HEURE DE FERMETURE',fieldName: 'Date_fermeture__c',type: 'Date',sortable: true}
        ];

The column show the Api name of column but i want to display it's label

is they any way to better change the look of file? as you see the columns aren't showing correctly ..

Answer 1

I believe you should go through the columns first.

// add columns
const columnsLabels = this.columns.map(column => column.label);

csvString += columnsLabels.join(',');
csvString += rowEnd;

// add row data
this.cases.forEach(record => {
   const rowData = this.columns.map(column => record[column.fieldName]);
   csvString += rowData.join(',');
   csvString += this.rowEnd;
})