1

I'm using lightning:datatable as such:

 <aura:attribute name="resources" type="Object"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
<lightning:datatable data="{! v.resources }"
                     columns="{! v.mycolumns }"
                     keyField="Id"
                     onrowaction="{! c.javascriptClickGoesHere}" // Is this what I need to do?
                     hideCheckboxColumn="true"
                     />

where I have set a button for each row:

{type: "button", typeAttributes: { iconName: 'utility:add', label: '', name: 'selectRecord', title: 'selectTitle', disabled: false, value: 'test',

I need to somehow use an onclick on each button (as I'm interested in getting the record ID for the button on the row clicked)

With regular lightning:button, I'd have something like onclick="{!c.onClick}" and in the controller

onClick: function(component, event, helper) {
    var resource = component.get("v.resource");
    var event = component.getEvent("ResourceSelected");

    event.setParams({
        resourceId: resource.Id, 
    });
    event.fire();
},

How can I achieve the same effect with the button in datatables? onrowaction?

  • 1
    I thinbk I had the same requirement and this post has a good answer – Itai Shmida Apr 24 '18 at 12:13
1

This is an example with LWC lightning-datatable using button as a column and retriving the information with onrowaction, but, the same should be applied to Aura Component lightning:datatable

onrowaction will return the action trigger in the row, it means, from An action field type, from a button or button-icon.

Javascript event:

  • event.detail.action.name => Returns the value of the name set in typeAttributes.
  • event.detail.row => Returns an Object with the values of the row
  • event.detail.row.columnFieldName => Returns the value in an specific column

Paste this example in LWC Playground and check out the Console:

HTML

<template>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}
                onrowaction={viewRecord}/>>
        </lightning-datatable>
    </div>    
</template>

Basic.js

import { LightningElement } from 'lwc';
import fetchDataHelper from './fetchDataHelper';

const columns = [
    { label: 'Label', fieldName: 'name' },
    { label: 'Website', fieldName: 'website', type: 'url' },
    { label: 'Phone', fieldName: 'phone', type: 'phone' },
    { label: 'Balance', fieldName: 'amount', type: 'button',
        typeAttributes: {
            label: { fieldName: 'amount' },
            name: 'amount'
        },
    },
    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
];

export default class BasicDatatable extends LightningElement {
    data = [];
    columns = columns;

    viewRecord(event){
        console.log(event.detail.action.name);
        console.log(event.detail.row.name);
    }

    // eslint-disable-next-line @lwc/lwc/no-async-await
    async connectedCallback() {
        const data = await fetchDataHelper({ amountOfRecords: 100 });
        this.data = data;
    }
}

fetchDataHelper.js

const recordMetadata = {
    name: 'name',
    email: 'email',
    website: 'url',
    amount: 'currency',
    phone: 'phoneNumber',
    closeAt: 'dateInFuture',
};

export default function fetchDataHelper({ amountOfRecords }) {
    return fetch('https://data-faker.herokuapp.com/collection', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json; charset=utf-8',
        },
        body: JSON.stringify({
            amountOfRecords,
            recordMetadata,
        }),
    }).then(response => response.json());
}
| improve this answer | |
-1

From the Document under the section: Creating Static Row-Level, you can add:

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

In the controller:

handleRowAction: function (cmp, event, helper) {
        var action = event.getParam('action');
        var row = event.getParam('row');
        switch (action.name) {
            case 'selectRecord':
                var rowID = row.Id;
                // Do whatever you want with rowID
                break;
       }
}
| improve this answer | |
  • That doesn't really work. The whole 'action' and 'row' is implying I need to add stuff like var actions = [ { label: 'selectRecord', name: 'selectRecord' }, ]; I don't want another dropdown menu. I'd need the onClick, or handleRowAction to be tied to the button type attribute – erikvm Apr 24 '18 at 11:14
  • typeAttributes does the same action that you desired. Have you tried? – Thamilan Apr 24 '18 at 12:25
  • Not really sure how I add another typeAttributes to my button. Should I have two different typeAttributes? – erikvm Apr 24 '18 at 12:29
  • Any ideas? Still can't get it to work.. – erikvm Apr 25 '18 at 7:35

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.