3

I am facing some issue with table rendering using lightning:datatable.

If i use hideCheckboxColumn = true, table is rendering properly - No issue

<lightning:datatable data="{! v.mydata }" 
    columns="{! v.mycolumns }" 
    keyField="Id"
    hideCheckboxColumn="true"/>

enter image description here

If i remove this attribute, table is not rendering properly with checkboxes.

<lightning:datatable data="{! v.mydata }" 
    columns="{! v.mycolumns }" 
    keyField="Id"/>

enter image description here

I am aware there are couple of tags minColumnWidth and maxColumnWidth to set the width of columns. It does not seems to be working here. Am i missing something ?

Component:

<aura:component implements="flexipage:availableForAllPageTypes" controller="LightningDataTableController">
    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>

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

    <lightning:datatable data="{! v.mydata }" 
        columns="{! v.mycolumns }" 
        keyField="Id"/>

</aura:component>

Controller:

({
    doInit : function(component, event, helper) {                       
        helper.getDataHelper(component, event);
    },
})

Helper:

({
    getDataHelper : function(component, event) {
        var action = component.get("c.getAccRecords");
        //Set the Object parameters and Field Set name
        action.setParams({
            strObjectName : 'Account',
            strFieldSetName : 'DataTableFieldSet'
        });
        action.setCallback(this, function(response){
            if(response.getState() === 'SUCCESS'){
                component.set("v.mycolumns", response.getReturnValue().lstDataTableColumns);
                component.set("v.mydata", response.getReturnValue().lstDataTableData);    
            }else if (state === 'ERROR'){
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " +
                                    errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }else{
                console.log('Something went wrong, Please check with your admin');
            }
        });
        $A.enqueueAction(action);   
    }
})

Wrapper Class to hold columns :

//Wrapper class to hold Columns with headers
    public class DataTableColumns {
        @AuraEnabled
        public String label {get;set;}
        @AuraEnabled       
        public String fieldName {get;set;}
        @AuraEnabled
        public String type {get;set;}

        //Create and set three variables label, fieldname and type as required by the lightning:datatable
        public DataTableColumns(String label, String fieldName, String type){
            this.label = label;
            this.fieldName = fieldName;
            this.type = type;            
        }
    }
  • Can you share the component's markup and the JS controller code? – Bob Lopez Jan 3 '18 at 17:08
  • Done. @BobLopez – brahmaji tammana Jan 3 '18 at 17:21
  • Have you made sure your data structure for response.getReturnValue().lstDataTableColumns and response.getReturnValue().lstDataTableData looks correct? Examples: the properties for the columns are being populated correctly, data table data has the correct number of fields as the columns and are properly mapped to the columns, etc. – Bob Lopez Jan 3 '18 at 17:59
  • Also, what is the container for this component? – Bob Lopez Jan 3 '18 at 18:33
  • If that structure is problem, It should not work when i remove 'hideCheckboxColumn' attribute. Isn't it ? – brahmaji tammana Jan 4 '18 at 3:41
0

Other than minColumnWidth and maxColumnWidth attributes, You can add initial column width to each column which should be between minColumnWidth and maxColumnWidth values.Try including this property in columns attribute.

For reference: Refer 'Working with Column Data' Section

Hope this helps.

0

You've probably solved this @brahmaji but I manged to get around this exact same issue by setting the hideCheckboxColumn attribute based on the pageMode attribute, in the rerender() function of my custom renderer file.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.