15

I was waiting for the new release of the lightning:datatable component to see if now with new version this component could be useful to really suit my needs.

One main feature is the row actions - it is really cool, but I want to show actions as specific columns and not as a dropdown menu.

So I thought that the button type would work, I am trying to use it, but cannot see text or icon for the action button, also I cannot find a way to get the clicked row data.

row action - works good:

enter image description here

button - does not work:

enter image description here The code that I am using is strait from the Developer Guide:

Markup

<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"/>
</aura:component>

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 } },
                {type:  'button', iconName: 'utility:edit', label: 'Edit', name: 'editRecord', title: 'editTitle', disabled: false, value: 'test'},
                {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'
        },
        {
                id: 'c',
                opportunityName: 'Quip2',
                confidence: 0.78,
                amount: 740000,
                contact: 'quipy@quip.com',
                phone: '2352235235',
                trendIcon: 'utility:up'
        },
        {
                id: 'd',
                opportunityName: 'Quip3',
                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;
        }
    }
})

The button is shown as ---- line, and handleRowAction method gets fired when I click on it, but I do not know how to get the row data.

Questions

  1. How to use the button column type and show icon / text on it?
  2. When the button is clicked - how to get the row data from the event?
  • I saw that your edit delete action menus drop down is not in the last column. I thought we can not customise the column sequence as it is in built look. Can you please share your code snippet? – Monalisa Das Jun 23 '18 at 12:59
20

To display the button on the rows, you need to put the attributes in the typeAttributes object just like with actions in the row above in your example.

{
  type:  'button',
  typeAttributes: 
  {
    iconName: 'utility:edit',
    label: 'Edit', 
    name: 'editRecord', 
    title: 'editTitle', 
    disabled: false, 
    value: 'test'
  }
}

Update

The above example shows just how to add the button to the column to display it. Manza rightly asks how to use the button to call a method.

First, you add a method to your controller to handle the button click. Something like this:

handleRowAction: function (cmp, event, helper) {
    var action = event.getParam('action');
    var row = event.getParam('row');
    switch (action.name) {
        case 'editRecord':
            helper.editRecord(row);
            break;
        // You might have other buttons as well, handle them in the same way
        case 'action2':
            helper.handleAction2(cmp, row, action);
            break;
        // etc.
    }
}

You retrieve the value of the name attribute you defined in your column using the event parameter. Based on this you can execute different logic as shown in the example above.

Then you add a onrowaction attribute to the lighting:datatable component:

<lightning:datatable
                columns="{! v.columns }"
                data="{! v.data }"
                onrowaction="{! c.handleRowAction }"
                />

This will trigger the handleRowAction method you defined in your controller when a button on a row is clicked.

Also note that if you have buttons in columns as well as row actions in the action column (the little drop down menu), these actions when clicked will also fire the same onrowaction method, so be sure to handle those in that method as well.

Please see the Data Table in Action example in the component documentation for further example code and documentation.

  • That is great, but how can you call a method from here, because that just add the button without any functionality – manza Jul 11 '18 at 5:47
  • 1
    @manza I've added some information to the answer to explain how to call a method from the button (or other row actions). – Folkert Jul 11 '18 at 7:25
  • And I also just realized that the question already has this section in it :D – Folkert Jul 11 '18 at 7:26
  • That is fantastic, it is a bit hard at the beginning, but now it has more sense :) thank you so much for the clarification – manza Jul 12 '18 at 5:25
0

What is wrong with your get selected rows? Your helper should be doing an alert with the rows that are selected? That is getting the row from the event which was your Question #2 - Right?

 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);
        }
  • this parameter selectedRows is for the checkboxes of the rows, it is not what I am after - I want the action buttons to work, I don't want the checkboxes. – Itai Shmida Jan 21 '18 at 7:36

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