I want my lightning component to display the Brand records which is in related list of the Sports Player Object. My component is displaying the header of the table but not the records and from the lightning component, I want the user to be able to delete a record.
Help will be appreciated.

Thanks in Advance!

Apex Class:

public class SportsApexClass {

     @AuraEnabled
    public static List<Brand__c> getBrandDetails(string recordId) 
    {
        List<Sports_Players__c> SportsPlayersList  =[SELECT id, Name, Last_Name__c, Email__c, Age__c, Speciality__c, Has_the_player_played_internationally__c from Sports_Players__c where id =: recordId ];
        Set<Id> setToQuery = new Set<Id>();
        for(Sports_Players__c bl:SportsPlayersList ){
            setToQuery.add(bl.Id);
        }
        system.debug(SportsPlayersList);
         List<Brand__c> BrandList =[SELECT id, Name, Status__c, Contract_Start_Date__c,Contract_Tenure__c,Contract_Amount__c,Contract_Currency__c,Contract_End_Date__c from Brand__c WHERE id IN : setToQuery];
        
        return BrandList;
        
    }       
}

Component:

<aura:component controller="SportsApexClass"  implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes" access="global">
    
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute type="Brand__c" name="BrandList"/>
    <aura:attribute name="mycolumns" type="List[]"/>
    <aura:attribute name="data" type="List[]"/>
    <aura:attribute name="recordError" type="String" access="private"/>

    
        <aura:handler name="init" value="{!this}" action="{!c.brandlist}"/>

        <lightning:layoutItem padding="horizontal-small">
        <div class="page-section page-header">
            <h1 class="slds-text-heading--label">Brand Endrosment for players</h1>
        </div>
    </lightning:layoutItem>
    
     <force:recordData aura:id="recordHandler"
        recordId="{!v.recordId}"
        fields="Id"
        targetError="{!v.recordError}"
        recordUpdated="{!c.handleRecordUpdated}" />
    
    <div class="slds-box">
        <div class="slds-grid">
            <div class="slds-col">
                <lightning:datatable data="{! v.data }"
                                     columns="{! v.mycolumns }"
                                     keyField="id"
                                     hideCheckboxColumn="true"/>
                
            </div>
        </div>
    </div>
     
  <div class="Delete Record">
        <lightning:card iconName="action:delete" title="Delete Record">
            <div class="slds-p-horizontal--small">
                <lightning:button label="Delete Record" variant="destructive" onclick="{!c.handleDeleteRecord}"/>
            </div>
        </lightning:card>
    </div>
        
    
    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}</div>
     </aura:if>  

    
</aura:component>

Controller:

({
    brandlist : function(component, event, helper) {
        var rid = component.get("v.recordId");
        
        helper.fetchBrandHelper(component, event, helper);
        debugger;
        helper.BrandHelper(component, event, helper);
    },
    handleDeleteRecord: function(component, event, helper) {
        component.find("recordHandler").deleteRecord($A.getCallback(function(deleteResult) {
        }
                                                                   ))},
    
     handleRecordUpdated: function(component, event, helper) {
        var eventParams = event.getParams();
}
                                                                    
                                                                   
})

Helper:

({
    fetchBrandHelper : function(component, event, helper) {
        debugger; 
        component.set('v.mycolumns', [
            {label: 'Brand Name', fieldName: 'Name'},
            {label: 'Status', fieldName: 'Status__c'},
            {label: 'Contract Start Date', fieldName: 'Contract_Start_Date__c'},
            {label: 'Contract Tenure', fieldName: 'Contract_Tenure__c', type: 'number', cellAttributes: { alignment: 'left' }},
            {label: 'Contract Amount', fieldName: 'Contract_Amount__c', type: 'number', cellAttributes: { alignment: 'left' }},
            {label: 'Contract Currency', fieldName: 'Contract_Currency__c', type: 'currency'},
            {label: 'Contract End Date', fieldName: 'Contract_End_Date__c'},
            
            
        ]);
    },
            BrandHelper : function(component, event, helper) {
            var action=component.get('c.getBrandDetails');
             var rec = component.get("v.recordId");
        action.setParams({
            "recordId": rec
        });
            action.setParams({
            });
            action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
            component.set("v.data", response.rec());
            
            }
            });
            $A.enqueueAction(action);
            }
            
            })