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: '[email protected]',
            phone: '2352235235',
            trendIcon: 'utility:down'
    },
    {
            id: 'b',
            opportunityName: 'Quip',
            confidence: 0.78,
            amount: 740000,
            contact: '[email protected]',
            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;
    }
}

})

Improve this question
2
  • from your screenshot I can see the first action: Show Details - only the second one is missing right?
    – Itai Shmida
    Commented Jul 12, 2018 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
    Commented Jul 12, 2018 at 12:54

1 Answer 1

Reset to default
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

You must log in to answer this question.

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