Adding new table rows isn't working - Salesforce Lightning Components

asinclair

Hi all, I'm having difficulties adding new rows to my table within Lightning Components.

Below is a snippet showcasing the definition of my table within the Lightning Component:

<aura:if isTrue="{!v.showDatatable}">
    <div class="table-container">
        <table id="contact_table" class="slds-table slds-table_bordered slds-table_cell-buffer">
            <thead>
                <tr>
                    <th>Email</th>
                    <th>First Name</th>
                    <th>Surname</th>
                </tr>
            </thead>

            <!-- tbdoy is empty when page first loads -->
            <tbody>
            </tbody>
        </table>
    </div>
</aura:if>

And below is my DataTable initialization and attempting to insert dummy data.

helper.getGoogleContacts(component, authCode)
.then(function(contactArray) {

    // Initialize the data table.
    var table = $('#contact_table').DataTable();

    try {
        // Log DataTable to validate everything is included.
        console.log('Version: ' + $.fn.DataTable.version);
        console.log(table);

        // Attempt to insert dummy rows.
        table.row.add(
            ['test@gmail.com', 'Test first name', 'Test last name']
        ).draw();
    } catch(error) {
        console.log(error);
    }
    
    component.set("v.showDatatable", true);
})
.catch(function(err) {
    component.set("v.errorMessage", err);
    component.set("v.showError", true);
})
.finally(function() {
    component.set("v.showSpinner", false);
});

So after attempting to add a row of dummy data, nothing gets updated within my table. I've validated that jQuery and DataTable are properly included.

I appreciate any advice. Thanks!

kthorngren

I'm not familiar with Lightning Components but did take your basic Datatables code and put into a test case here:
http://live.datatables.net/fidihizo/1/edit

It works. The problem you have seems to be outside of Datatables. Maybe you can describe more about what happens.

Do you get any errors?

What are the results of your console.log outputs?

Kevin