The delete record button does not work. Visually triggered, the page is updated, but the contact is in place.
<aura:attribute name="recordError" type="String" access="private"/>
   <force:recordData aura:id="recordHandler"
        recordId="{!v.recordId}"
        fields="Id"
        targetError="{!v.recordError}"
        recordUpdated="{!c.handleRecordUpdated}" />

 <div class="slds-grid slds-grid--align-end">
        <button class="slds-button slds-button--brand" onclick="{!c.handleDeleteRecord}">Del</button>
                                    </div>

<!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}</div>
    </aura:if>


controller
handleDeleteRecord: function(component, event, helper) {
        component.find("recordHandler").deleteRecord($A.getCallback(function(deleteResult) {
            // NOTE: If you want a specific behavior(an action or UI behavior) when this action is successful
            // then handle that in a callback (generic logic when record is changed should be handled in recordUpdated event handler)
            if (deleteResult.state === "SUCCESS" || deleteResult.state === "DRAFT") {
                // record is deleted
                console.log("Record is deleted.");
            } else if (deleteResult.state === "INCOMPLETE") {
                console.log("User is offline, device doesn't support drafts.");
           } else if (deleteResult.state === "ERROR") {
                console.log('Problem deleting record, error: ' + JSON.stringify(deleteResult.error));
            } else {
               console.log('Unknown problem, state: ' + deleteResult.state + ', error: ' + JSON.stringify(deleteResult.error));
           }
        }));
    },
 
    /**
     * Control the component behavior here when record is changed (via any component)
     */
    handleRecordUpdated: function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "CHANGED") {
           
            // record is loaded in the cache
        } else if(eventParams.changeType === "REMOVED") {
            // record is deleted, show a toast UI message
            var resultsToast = $A.get("e.force:showToast");
            resultsToast.setParams({
                "title": "Del",
                "message": "The record was deleted."
           });
            resultsToast.fire();
        } else if(eventParams.changeType === "ERROR") {
            // there’s an error while loading, saving, or deleting the record
      
 

You need to reduce the indentation in the rows and the size of the table itself

Lightning datatable does not reflect Account.Name, Owner.Name, Created By. Name. what is the error?
doInit : function(component, event, helper) {
        component.set('v.mycolumns', [                 
            {label: 'Account Name', fieldName: 'Name', type: 'text',sortable: true},
            {label: 'Email', fieldName: 'Email', type: 'Email', sortable: true},
            {label: 'Contact Level', fieldName: 'Contact_Level__c', type: 'picklist',sortable: true},
            {label: 'Account', fieldName: 'Account.Name', type: 'text',sortable: true},
            {label: 'Owner', fieldName: 'Owner.Name', type: 'text',sortable: true},
            {label: 'Created By', fieldName: 'CreatedBy.Name', type: 'text', sortable: true},
            {label: 'Created Date', fieldName: 'CreatedDate', type: 'data',sortable: true},
            {label:'Action',type:  'button',typeAttributes:
             {iconName: 'utility:view',label: 'Del',name: 'Del', disabled: false,value: 'viewBtn'}
            }
        ]);