[SalesForce] Help with working with lightning:dataTable

I've been experimenting with lightning:dataTable and have some issues — not sure if they're bugs or simply user error. I've spotted lots of issues with setting up the columns. I have a table with 3 columns: name, date, amount.
dataTable screenshot

  1. The columns default to equal size, which results in an amount column 1/3 the with of my browser (or the container I put it in), with the AMOUNT title flush left, and the column of amount figures flush right. Looks bad. I tried using the initialWidth… after some trial and error discovered you have use an integer initialWidth:100 not a string initialWidth:"100". No real question here, just took me a while to figure out and thought others might save some time by reading.

  2. The payment date is wrong — it's deducting a day. I did a console.log to check the input data, which is correct, so I believe it's only in the displaying of the data that the day gets deducted. Weird. If I use type:'date-local' in the column definition, it displays the correct date, but not in the formatting I need.

@sfdcfox has me thinking about timezone… I think that's the answer. When I SOQL the data, it includes a date (no time) so the controller returns a date at midnight GMT… which is one day ahead of date-local in Pacific time.

  1. I've set up the columns to be sortable, and wired it up. It works, except… it sorts the Amount column as if it's a string. So $15.00 comes before $2.00. I'm using the "built-in" sorting (javascript, not apex), with the code provided in the docs. (Though they fail to mention you need to set up aura:attributes for sortedBy and sortedDirection in your component.) Also loading the initial data just as shown in the docs, which works fine.

It's frustrating that inline editing doesn't support date type. I suppose it will be coming the future when they set up the date picker for it.

Any idea what could be going on with the date or the amount sorting?

UPDATE: not sure what I did, but it's working now. Here's the code in case anybody's interested…

COMPONENT

<aura:component controller="PaymentController" implements="force:hasRecordId">
    <aura:attribute name="Contact" type="Object"/>
    <aura:attribute name="Payments" type="List"/>
    <aura:attribute name="payColumns" type="List"/>
    <aura:attribute name="sortedBy" type="String" />
    <aura:attribute name="sortedDirection" type="String" />
    <!-- handlers-->
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>

    <div style="max-width: 700px; margin-left: 80px" >

            <lightning:datatable
                keyField="id"
                data="{! v.Payments }"
                columns="{! v.payColumns }"
                maxColumnWidth="600"
                hideCheckboxColumn="true"
                onsort="{!c.updateColumnSorting}"
                sortedBy="{!v.sortedBy}"
                sortedDirection="{!v.sortedDirection}"
                onrowaction="{! c.handleRowAction }"
            />        
        </div>
</aura:component>   

CONTROLLER

    init: function (cmp, event, helper) {
        cmp.set('v.payColumns', [
            {label: 'Project', initialWidth:280, fieldName: 'ProjectName', type: 'text', sortable:true},
            {label: 'Amount', initialWidth:120, fieldName: 'Amount__c', sortable:true, type: 'currency',cellAttributes: { alignment: 'center' }, typeAttributes: {currencyCode: 'USD'}},
            {label: 'Payment Date', fieldName: 'Payment_Date__c',  type: 'date-local', sortable:true},
            {label: '', type: 'button', initialWidth: 50, typeAttributes:
                { label: { fieldName: 'actionLabel'},variant:"base", title: 'Edit', name: 'edit_payment', iconName: 'action:edit'}},
            {label: '', type: 'button', initialWidth: 50, typeAttributes:
                { label: { fieldName: 'actionLabel'},variant:"base", title: 'Delete', name: 'delete_payment', iconName: 'action:delete'}}
        ]);
    },

// Client-side controller called by the onsort event handler
    updateColumnSorting: function (cmp, event, helper) {
        var fieldName = event.getParam('fieldName');
        var sortDirection = event.getParam('sortDirection');
        // assign the latest attribute with the sorted column fieldName and sorted direction
        cmp.set("v.sortedBy", fieldName);
        cmp.set("v.sortedDirection", sortDirection);
        helper.sortData(cmp, fieldName, sortDirection);
    },

    handleRowAction: function (cmp, event, helper) 
    {
        var action = event.getParam('action');
        var row = event.getParam('row');
        cmp.set("v.paymentId", row.Id);
        cmp.set("v.ContactId", row.Contact__c );
        // console.log("paymentId: " + cmp.get("v.paymentId"));
        // console.log('action: ' + action.name + ' | ' + 'row: ' + JSON.stringify(row));
        switch (action.name) {
            case 'delete_payment':
                cmp.set("v.projectName", row.ProjectName);
                cmp.set("v.deleteActive", true);
                break;
            case 'edit_payment': 
                cmp.set("v.editActive", true);
                break;
        };
    },

Best Answer

Must have been user error... not sure what I did, but it works now. See code above in the question. And a screenshot. The code I showed is only for the nested table. enter image description here

Related Topic