Passing parameter in getRowActions

Question

JS Noob here. I am currently following lwc datatable documentation to create a datatable with actions. The constructor has an argument as 'data' which I want to pass in getRowActions method.

The 'data' param is passed from child class.

How do I access 'data' param in getRowActions method? Also, When I try to access any instance variable in getRowAction using this.variableName, I get reference error.

import { LightningElement, track } from 'lwc';

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

const columns = [

];

export default class DatatableExample extends from LightningElement {
    @track data = [];
    @track columns = [];

    constructor(data) {
        super();
        this.columns = [
            // Other column data here
            { type: 'action', typeAttributes: { rowActions: this.getRowActions } },
        ]
    }

    getRowActions(row, doneCallback) {
        const actions = [];
            if (row['isActive']) {
                actions.push({
                    'label': 'Deactivate',
                    'iconName': 'utility:block_visitor',
                    'name': 'deactivate'
                });
            } else {
                actions.push({
                    'label': 'Activate',
                    'iconName': 'utility:adduser',
                    'name': 'activate'
                });
            }
            // simulate a trip to the server
            setTimeout(() => {
                doneCallback(actions);
            }), 200);
    }
}

Answer 1

To make sure you have access to class variables, bind this to the function:

{ type: 'action', typeAttributes: { rowActions: this.getRowActions.bind(this) } },

Answer 2

Adding more details in addition @sfdcfox answer

You are facing that problem because of lexical scoping. You can use binding (as suggested by @sfdcfox) RowActions: this.getRowActions.bind(this) } OR you can simple use arrow function in method:

getRowActions = (row, doneCallback) => {

---

NOTE: For automatically fetching records, (no need of implementing sort/data etc)

You can use this component.

You can just implement the table as below:

JS:

import { LightningElement, track } from 'lwc';

export default class PocTable extends LightningElement {
    config = {
        objectName: "Account",
        tableConfig: {
            columns: [
                { api: 'Name', label: 'Name', fieldName: 'Name', sortable: true },
                { api: 'CreatedDate', label: 'Created On', fieldName: 'CreatedDate', type: 'date', sortable: true },
                { api: 'CreatedBy.Name', label: 'Created By', fieldName: 'CreatedByName', sortable: true }
            ]
        }
    };
}

and in HTML just pass config:

<template>
    <c-datatable config={config}>
    </c-datatable>
</template>

Notice the api property needed for this. you do not have to implement your own logic for fetching records from database.

Refer to lightning datatable (AURA or LWC) can automatically fetch records from database?

---