2

I am facing an issue with the actions(Show Details, Delete). The Action dropdown is hidden inside the table instead of showing all actions. PFB screenshot. Did anyone face this issue?

enter image description here Below screenshot is taken from standard Account Recent view. Its showing all Actions (Edit, Delete, Change Owner) enter image description here

Component:

<aura:component>
<aura:attribute name="mydata" type="Object"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:handler name="init" value="{!this}" action="{! c.init }"/>
<lightning:datatable data="{! v.mydata }"
                     columns="{! v.mycolumns }"
                     keyField="Id"
                     hideCheckboxColumn="true"
                     onrowaction="{! c.handleRowAction }"
                     showRowNumberColumn="true"/>

Controller:

({
init: function (cmp, event, helper) {

    var actions = [
        { label: 'Show details', name: 'show_details' },
        { label: 'Delete', name: 'delete' }
    ];

    cmp.set('v.mycolumns', [
            {type:  'action', typeAttributes: { rowActions: actions } },
            {label: 'Opportunity name', fieldName: 'opportunityName', type: 'text'},
            {label: 'Confidence', fieldName: 'confidence', type: 'percent', cellAttributes:
                { iconName: { fieldName: 'trendIcon' }, iconPosition: 'right' }},
            {label: 'Amount', fieldName: 'amount', type: 'currency', typeAttributes: { currencyCode: 'EUR'}},
            {label: 'Contact Email', fieldName: 'contact', type: 'email'},
            {label: 'Contact Phone', fieldName: 'phone', type: 'phone'}
    ]);
    cmp.set('v.mydata', [{
            id: 'a',
            opportunityName: 'Cloudhub',
            confidence: 0.2,
            amount: 25000,
            contact: 'jrogers@cloudhub.com',
            phone: '2352235235',
            trendIcon: 'utility:down'
    },
    {
            id: 'b',
            opportunityName: 'Quip',
            confidence: 0.78,
            amount: 740000,
            contact: 'quipy@quip.com',
            phone: '2352235235',
            trendIcon: 'utility:up'
    }]);
},
getSelectedName: function (component, event, helper) {
    var selectedRows = event.getParam('selectedRows');
    // Display that fieldName of the selected rows
    for (var i = 0; i < selectedRows.length; i++){
        alert("You selected: " + selectedRows[i].Name);
    }
},
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':
            var rows = cmp.get('v.data');
            var rowIndex = rows.indexOf(row);
            rows.splice(rowIndex, 1);
            cmp.set('v.data', rows);
            break;
    }
}

})

  • from your screenshot I can see the first action: Show Details - only the second one is missing right? – Itai Shmida Jul 12 '18 at 12:51
  • exactly. It also depends on no. of records of the table if table height (rows) is more than Action dropdown height then it is showing all actions otherwise based on the height of the table, showing the action. In my case there are only 2 actions, 1 visible and other not. – singh_indupal Jul 12 '18 at 12:54
3

There is already an answer here, this is what you need to do:

Add this code:

.THIS .slds-scrollable_x { overflow: visible; }
.THIS .slds-scrollable_y { overflow: visible; }

to your style component bundle:

enter image description here

| improve this answer | |

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.