Hello. I'm an admin just trying to adapt examples I've found on blogs into something for my use case. I am trying to create a data table that can be edited. It's almost working but there is one problem. The columns that I have tagged to be 'editable' do not display any data until they have been clicked on. Here is a screenshot to demonstrate. Hoping someone out there has run into this before. Thanks!!
 

Component:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="leadGen_Inv_LEXController" >
	
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="recordId" type="String"/>
    <!-- This attribute will hold the update records from data table-->
    <aura:attribute name="updatedRecord" type="Object[]" />

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

    <!-- You must define keyField as 'Id' to save the record back in Salesforce
	'onsave' attribute will executed when user clicks on save button -->
    <lightning:card title="Account Editable Datatable">
        <lightning:datatable
                             aura:id="iliDataTable"
                             columns="{! v.columns }"
                             data="{! v.data }"
                             keyField="Id"
                             onsave ="{!c.onSave}"
                             hideCheckboxColumn="true"
                             onrowaction="{! c.handleRowAction }" />
    </lightning:card>
</aura:component>

js controller

({
    /*
     * This function defined column header
     * and calls getAccounts helper method for column data
     * editable:'true' will make the column editable
     * */
doInit : function(component, event, helper) {        
        component.set('v.columns', [
            {label: 'Name', fieldName: 'Name', type: 'String'},
            {label: 'Description', fieldName: 'Line_Item_Description__c', editable:'true', type: 'String'},
            {label: 'Quantity', fieldName: 'Quantity__c', editable:'true', type: 'Integer'},
            {label: 'Sales Price', fieldName: 'Sub_Total__c', editable:'true', type: 'Integer'}
        ]);        
        helper.getILIs(component, helper);
    },

    /*
     * This function is calling saveDataTable helper function
     * to save modified records
     * */
    onSave : function (component, event, helper) {
        helper.saveDataTable(component, event, helper);
    }
})

js helper

({
    getILIs : function(component, event, helper) {
        var invoiceId = component.get("v.recordId");
        var action = component.get("c.getILIs");
        action.setParams({ "invoiceId" : invoiceId });
        action.setCallback(this,function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.data", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },

    /*
     * This function gets called when user clicks on Save button
     * user can get all modified records
     * and pass them back to server side controller
     * */
    saveDataTable : function(component, event, helper) {
        var editedRecords =  component.find("iliDataTable").get("v.draftValues");
        var totalRecordEdited = editedRecords.length;
        var action = component.get("c.updateILIs");
        action.setParams({
            'editedILIList' : editedRecords
        });
        action.setCallback(this,function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                //if update is successful
                if(response.getReturnValue() === true){
                    helper.showToast({
                        "title": "Record Update",
                        "type": "success",
                        "message": totalRecordEdited+" Account Records Updated"
                    });
                    helper.reloadDataTable();
                } else{ //if update got failed
                    helper.showToast({
                        "title": "Error!!",
                        "type": "error",
                        "message": "Error in update"
                    });
                }
            }
        });
        $A.enqueueAction(action);
    },

    /*
     * Show toast with provided params
     * */
    showToast : function(params){
        var toastEvent = $A.get("e.force:showToast");
        if(toastEvent){
            toastEvent.setParams(params);
            toastEvent.fire();
        } else{
            alert(params.message);
        }
    },

    /*
     * reload data table
     * */
    reloadDataTable : function(){
    var refreshEvent = $A.get("e.force:refreshView");
        if(refreshEvent){
            refreshEvent.fire();
        }
    },
})

apex controller

public class leadGen_Inv_LEXController {
@AuraEnabled
    public static List<Invoice_Line_Item__c> getILIs(Id invoiceId){
        return [SELECT
               		Id 
               		,Name
                	,Line_Item_Description__c
                	,Quantity__c
                	,Sub_Total__c
               FROM Invoice_Line_Item__c 
               where Invoicing__c = :invoiceId];
    }

    @AuraEnabled
    public static boolean updateILIs(List<Invoice_Line_Item__c> editedILIList){
        try{
            update editedILIList;
            return true;
        } catch(Exception e){
            return false;
        }
    }
}