3

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;
        };
    },
2
  • 1
    Is (1) a question or a comment? For (2), did you include the time zone? And for (3), could we see your sorting algorithm and how you're loading the data? I really think we'd be able to help you better with more information.
    – sfdcfox
    Jun 15, 2018 at 21:21
  • please share your code to help the 3rd question with the sorting Jun 17, 2018 at 6:53

2 Answers 2

1

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

1
  • 2
    how did you made expand and collapse in <lightning:datatable/> ? can you share us the code cause I am trying to achieve the same design of yours.
    – Ragul
    Dec 4, 2019 at 19:01
0

I had the same problem, when I wanted show number field in the table. As a workaround I converted into text in Js controller, and used it in the table, and it worked!.

//ContentSize is the number field.

var records = a.getReturnValue();
for (var i = 0; i < records.length; i++) {
    var row = records[i];
    row.ContentDocumentSize = row.ContentDocument.ContentSize.toString();

}

assign the records to data that you are using in datatable.

component.set('v.data',records);

//while setting the columns for datatable

cmp.set('v.columns', [
    { label: 'Size', fieldName: 'ContentDocumentSize', type: 'text' }
]);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .