1

The action menu in my <lightning:datatable is not appearing.

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 }" class="action-test" 
        columns="{! v.mycolumns }" 
        keyField="Id" hideCheckboxColumn="true" onrowaction="{! c.handleRowAction }"/> 

</aura:component

JsController

({
    doInit : function(component, event, helper) {                       
        helper.getDataHelper(component, event);
    },
    handleRowAction: function (cmp, event, helper) {
        var action = event.getParam('action');
        var row = event.getParam('row');

        switch (action.name) {
            case 'show_details':
                alert('Showing Details: ' + JSON.stringify(row));
                break;
            case 'delete':
                helper.removeBook(cmp, row)
                break;
        }
    }
})

Helper Js

({
    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){
            var state = response.getState();
            if(state === '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);   
    }
})

Controller Class

public class LightningDataTableController {
    /*
    Method Name : getAccRecords
    Purpose     : To get the wrapper of Columns and Headers
    */
    @AuraEnabled
    public static DataTableResponse getAccRecords(String strObjectName, String strFieldSetName){                
        DataTableResponse response ;
        try
        {
        //Get the fields from FieldSet
        Schema.SObjectType SObjectTypeObj = Schema.getGlobalDescribe().get(strObjectName);
        Schema.DescribeSObjectResult DescribeSObjectResultObj = SObjectTypeObj.getDescribe();            
        Schema.FieldSet fieldSetObj = DescribeSObjectResultObj.FieldSets.getMap().get(strFieldSetName);

        //To hold the table hearders 
        List<DataTableColumns> lstDataColumns = new List<DataTableColumns>();

        //Field to be queried - fetched from fieldset
        List<String> lstFieldsToQuery = new List<String>();

        //The final wrapper response to return to component
         response = new DataTableResponse();

        for( Schema.FieldSetMember eachFieldSetMember : fieldSetObj.getFields() ){
            String dataType = String.valueOf(eachFieldSetMember.getType()).toLowerCase();
            //This way we can set the type of a column
            //We do not get the exact type from schema object which matches to lightning:datatable component structure
            if(dataType == 'datetime'){
                dataType = 'date';
            }
            //Create a wrapper instance and store label, fieldname and type.
            DataTableColumns datacolumns = new DataTableColumns( String.valueOf(eachFieldSetMember.getLabel()) , 
                                                                String.valueOf(eachFieldSetMember.getFieldPath()), 
                                                                String.valueOf(eachFieldSetMember.getType()).toLowerCase() );
            lstDataColumns.add(datacolumns);
            lstFieldsToQuery.add(String.valueOf(eachFieldSetMember.getFieldPath()));
        }

        //Form an SOQL to fetch the data - Set the wrapper instance and return as response
        if(! lstDataColumns.isEmpty()){            
            response.lstDataTableColumns = lstDataColumns;
            String query = 'SELECT ' + String.join(lstFieldsToQuery, ',') + ' FROM Account';
            System.debug(query);
            response.lstDataTableData = Database.query(query);
        }

        System.debug('----------- Response : '+response);
        return response;
        }
        catch(Exception e)
        {
            System.debug('--**--------- Response : '+response);
            System.debug('--------- response error : '+e.getMessage());
            return null;
        }

    }

    //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;            
        }
    }

    //Wrapper calss to hold response - This response is used in the lightning:datatable component
    public class DataTableResponse {
        @AuraEnabled
        public List<DataTableColumns> lstDataTableColumns {get;set;}
        @AuraEnabled
        public List<sObject> lstDataTableData {get;set;}                

        public DataTableResponse(){
            lstDataTableColumns = new List<DataTableColumns>();
            lstDataTableData = new List<sObject>();
        }
    }
}

This is how my Page looks right now

enter image description here

The last column containing drop down menus for delete/edit action for the row is not visible unlike how it is shown in documentation enter image description here

FYI Right now I am viewing the component in aura application only for testing it first Is there is something I am missing?

  • 1
    Where are you setting the value of v.mycolumns ? – Robs Jun 23 '18 at 13:50
  • I have added Js and controller code. Please check it now – Monalisa Das Jun 23 '18 at 14:13
3

As Robs mentions in his comment, you need to setup the actions in the columns data e.g.:

    var columns = [];

    // Data column definitions added here

    // Add the actions column
    var actions = [
        {label: 'Edit', name: 'EDIT'},
        {label: 'Delete', name: 'DELETE'}
    ];
    columns.push({type: 'action', typeAttributes: { rowActions: actions } });

    component.set("v.mycolumns", columns);

It looks like you may have not added the action column in your code.

  • @MonalisaDas No problem. There are quite a lot of parts to get setup in these tables. – Keith C Jun 23 '18 at 14:25

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.