function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Juan GarcíaJuan García 

Not visible columns of lightning datatable

Hi Devs,

I have some problems with a component that is going to be using a <lightning:datatable /> object.
There are data not visible, and the ddbb this values are filled. This values not load in the table.
Name is ok, the table can be editabled, and the sort works, but values not load (the fields are number, 16 with 2decimals). If I click on the column, show the value, but if I dont click, the value not is shown)
Thanks

Component:
<aura:component controller="TCK_DesglCoste_ByOpp_Ctr"
                implements="force:hasRecordId,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,lightning:actionOverride,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:appHostable"
                access="global" >
    
    <!-- handlers-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="force:refreshView" action="{!c.doInit}" />
    
    <!-- attributes -->
    <aura:attribute name="columnsDesglose" type="List"/>
    <aura:attribute name="desgloseCosteList" type="Desglose_Coste__c[]"/>
    <aura:attribute name="sortedBy" type="String" default="Name"/>
    <aura:attribute name="sortedDirection" type="String" default="asc"/>
    
    <div class="slds-page-header">
        <div class="slds-grid">
            <div class="slds-col slds-has-flexi-truncate">
                <div class="slds-media slds-no-space slds-grow">
                    <div class="slds-media__figure">
                        <lightning:icon iconName="custom:custom105" size="large" alternativeText="Indicates approval"/>
                    </div>
                    <div class="slds-media__body">
                        <p class="slds-text-title_caps slds-line-height_reset">Object</p>
                        <h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="My Contacts">My object</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <lightning:datatable
                         aura:id="desgloseCosteDataTable"
                         columns="{! v.columnsDesglose }"
                         data="{! v.desgloseCosteList }"
                         keyField="Id"
                         hideCheckboxColumn="true"
                         onsort="{!c.updateColumnSorting}"
                         sortedBy="{!v.sortedBy}"  
                         sortedDirection="{!v.sortedDirection}"
                         onsave ="{!c.onSave}"
                         onrowaction="{! c.handleRowAction }"
                         />
    
</aura:component>
Controller, helper and CTR
Controler:
({
    doInit : function(cmp, event, helper) {
        cmp.set('v.columnsDesglose', [
            {label: 'Name', fieldName: 'Name', type: 'text', sortable: true, editable:'true'},
            {label: 'Month 1', fieldName: 'Mes_1__c', type: 'double', sortable: true, editable:'true'},
            {label: 'Month 2', fieldName: 'Mes_2__c', type: 'double', sortable: true, editable:'true'},
            {label: 'Month 3', fieldName: 'Mes_3__c', type: 'double', sortable: true, editable:'true'},
            {label: 'Month 4', fieldName: 'Mes_4__c', type: 'double', sortable: true, editable:'true'},
            {label: 'Month 5', fieldName: 'Mes_5__c', type: 'double', sortable: true, editable:'true'},
        ]);
            
            helper.loadDesglose(cmp, helper);
            
            },
            
    updateColumnSorting : function (cmp, event, helper) {
            var fieldName = event.getParam('fieldName');
            var sortDirection = event.getParam('sortDirection');
            cmp.set("v.sortedBy", fieldName);
            cmp.set("v.sortedDirection", sortDirection);
            helper.sortData(cmp, fieldName, sortDirection);
            },
            
    onSave : function (component, event, helper) {
            helper.saveDataTable(component, event, helper);
            },
            
})

__________
helper:
({
    loadDesglose : function(cmp, helper) {
        var action = cmp.get("c.getAllDesgloseCoste");
        action.setParams({opportunityId: cmp.get('v.recordId')});   
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set("v.desgloseCosteList", response.getReturnValue());
                helper.sortData(cmp, cmp.get("v.sortedBy"), cmp.get("v.sortedDirection"));
            }
        });
        $A.enqueueAction(action);
    },
    
    sortData: function (cmp, fieldName, sortDirection) {
        var data = cmp.get("v.desgloseCosteList");
        var reverse = sortDirection !== 'asc';
        data.sort(this.sortBy(fieldName, reverse))
        cmp.set("v.desgloseCosteList", data);
    },
    
    sortBy: function (field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x[field])} :
        function(x) {return x[field]};
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
        }
    },
    
    saveDataTable : function(component, event, helper) {
        var editedRecords =  component.find("desgloseCosteDataTable").get("v.draftValues");
        var totalRecordEdited = editedRecords.length;
        var action = component.get("c.updateDesgloseCoste");
        action.setParams({
            'editedDesglCosteList' : 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+" Registros actualizados"
                    });
                    helper.reloadDataTable();
                } else{ //if update got failed
                    helper.showToast({
                        "title": "Error!!",
                        "type": "error",
                        "message": "Error en la actualización"
                    });
                }
            }
        });
        $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();
        }
    },
    
})


__________
CTR:
    @AuraEnabled
    public static list<Desglose_Coste__c> getAllDesgloseCoste(Id opportunityId){
        return [SELECT Name, Mes_1__c, Mes_2__c, Mes_3__c, Mes_4__c, Mes_5__c, Mes_6__c, Mes_7__c, Mes_8__c, Mes_9__c, Mes_10__c, Mes_11__c, Mes_12__c,
                Opportunity__c, Opportunity__r.Name, LastModifiedById
                FROM Desglose_Coste__c
                WHERE Opportunity__c =:opportunityId];
    }
    
    @AuraEnabled
    public static boolean updateDesgloseCoste(List<Desglose_Coste__c> editedDesglCosteList){
        try{
            system.debug('Total de registros: ' + editedDesglCosteList);
            update editedDesglCosteList;
            return true;
        } catch(Exception e){
            return false;
        }
    }



 
Best Answer chosen by Juan García
Juan GarcíaJuan García
I fixed, the problem was in the type of decimal numbers. The correct is: type: 'number'

All Answers

Juan GarcíaJuan García
This is the table
User-added image

If I click on a filled value (but not loaded in the table), this value is shown.
User-added image
Juan GarcíaJuan García
I fixed, the problem was in the type of decimal numbers. The correct is: type: 'number'
This was selected as the best answer