reportComponent.cmp

<aura:component controller="LightningReportsController"
    implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">

    <!-- Handle component initialization in a client-side controller -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
     
    <!-- Handle loading events by displaying a spinner -->
    <aura:attribute name="loaded" type="Boolean" default="false" />
    <aura:attribute name="reportId" type="String" default="" />
    <aura:attribute name="csvString" type="String" default="" />
    <aura:attribute name="idField" type="String" default="" />
    <aura:attribute name="selectedReport" type="String" default="" />
    <aura:attribute name="reportName" type="String" default="" />
    <!-- Handle loading a report which was clicked on -->
    <aura:handler event="c:reportLoadEvent" action="{!c.loadReport}" />

    <!-- load all the reports for search -->
    <aura:attribute name="reportList" type="Report[]" />

    <!-- load all the reports for search -->
    <aura:attribute name="reportFolders" type="String[]" />

    <!-- Dynamically load the report rows -->
    <aura:attribute name="reportResponse" type="Object" />

    <!-- Dynamically load the report rows -->
    <aura:attribute name="detailColumns" type="Object[]" />


    <lightning:layout horizontalAlign="center" multipleRows="true" pullToBoundary="small">
        <lightning:layoutItem size="12">
            <lightning:card title="{!v.reportName}">
                <aura:iteration var="field" items="{!v.detailColumns}">
                    <lightning:badge label="{!field}" />
                 </aura:iteration>
                <aura:set attribute="actions">
        
                 </aura:set>
      
            </lightning:card>
        </lightning:layoutItem>
    </lightning:layout>


  
</aura:component>

reportComponent.cmp-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <description>DESCRIPTION</description>
</AuraDefinitionBundle>

reportComponent.css

.THIS {

}
.THIS.exampleHolder{
    position: relative;
    display: inline-block;
    margin-left: 15px;
    width: 95%;
    height: 95%;
    vertical-align: middle;
    white-space: nowrap;
}

reportComponent.design

<design:component>
  <design:attribute
    name="selectedReport"
    datasource="apex://ReportPickListValues"
  />  
  <design:attribute
  name="idField"
  label="ID Field to Match"
/>
</design:component>

reportComponentController.js

({
    doInit: function (component, event, helper) {
        //        component.set('v.loaded', !component.get('v.loaded'));
        helper.getReportResponse(component, event, helper);


    },
    loadReport: function (component, event, helper) {

    },
    showSpinner: function (component, event, helper) {

    },
    hideSpinner: function (component, event, helper) {

    },
    handleRefresh: function (component, event, helper) {
        component.set('v.loaded', !component.get('v.loaded'));
        helper.getReportResponse(component, event, helper);
    },
    handleGoogleSheets: function (component, event, helper) {
        helper.sendToGoogleSheets(component, event, helper);
    }
})

reportComponentHelper.js

({
    getReportResponse: function (component, event, helper) {
        var action = component.get("c.getReportMetaData");
        action.setParams({ reportId: component.get("v.reportId") });
        action.setCallback(this, function (a) {
            var reportResponseObj = JSON.parse(a.getReturnValue());

            console.log('callback  -' + a.getReturnValue());
            if (reportResponseObj !== null && reportResponseObj !== undefined) {
                console.log('%creportComponentHelper.js line:7 reportResponseObj', 'color: #007acc;', reportResponseObj);
                 let theBadges = [];
                reportResponseObj.detailColumns.forEach(element => {
                    let theString = element;
                    theBadges.push( theString.substring(theString.indexOf('.') + 1) );
              
                });
                component.set("v.detailColumns",theBadges);
                console.log('%creportComponentHelper.js line:13 component.get(v.detailColumn', 'color: #007acc;', component.get('v.detailColumns'));
           //     component.set("v.reportName", reportResponseObj.reportName);
            //    component.set("v.sumResp", reportResponseObj.sumResp);
             //   component.set("v.reportResponse", reportResponseObj);
              //  component.set('v.loaded', !component.get('v.loaded'));
            } else {
                component.set('v.loaded', !component.get('v.loaded'));

            }



        });
        $A.enqueueAction(action);
    },
    sendToGoogleSheets: function (component, event, helper) {
        var action = component.get("c.sendToGoogleSheets");
        let headers = [];
        let rows = [];
        action.setParams({ reportId: component.get("v.reportId") });
        action.setCallback(this, function (a) {
            var reportResponseObj = a.getReturnValue();
            console.log('%creportComponentHelper.js line:7 reportResponseObj', 'color: #007acc;', reportResponseObj);
            headers = JSON.parse(reportResponseObj.headers);
            rows = JSON.parse(reportResponseObj.rows);
            console.log('%creportComponentHelper.js line:33 headers', 'color: #007acc;', headers);
            console.log('%creportComponentHelper.js line:34 rows', 'color: #007acc;', rows);
            let theWholeTable = [];
            let theRow = [];
            rows.forEach(row => {
                theRow = [];
                for (let index = 0; index < headers.length; index++) {
                    const element = row[index];
                    theRow.push(element);

                }

                theWholeTable.push(theRow);
            });
            theWholeTable.unshift(headers);
            let csvstringData = theWholeTable.map(row => row.map(item => (typeof item === 'string' && item.indexOf(',') >= 0) ? `"${item}"` : String(item)).join(',')).join('\n');

            console.log(' ::: ' + csvstringData);
            component.set('v.csvString', csvstringData);


        });
        $A.enqueueAction(action);
    }
})

ReportPickListValues.cls

global class ReportPickListValues extends VisualEditor.DynamicPickList{
    
    global override VisualEditor.DataRow getDefaultValue(){
        VisualEditor.DataRow defaultValue = new VisualEditor.DataRow('select report','select report');
        return defaultValue;
    }
    global override VisualEditor.DynamicPickListRows getValues() {

        Report[] theReports = [SELECT Name From Report];

        VisualEditor.DynamicPickListRows myValues = new VisualEditor.DynamicPickListRows();
        VisualEditor.DataRow defValue = new VisualEditor.DataRow('select report','select report');
        myValues.addRow(defValue);
        for(Report rep : theReports){

            VisualEditor.DataRow p1 = new VisualEditor.DataRow(rep.Name, String.valueOf(rep.Id));
            myValues.addRow(p1);
          //system.debug(p1);
        }
        return myValues;
    }

}