1

I am creating a LWC data table and I would like that when the user click on "Edit Table" The fields in the table will get the inline edit true

import { LightningElement, wire, api } from 'lwc';
import LWCtable from '@salesforce/apex/PicklistHelper.LWCtable';
import { updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';

// datatable columns



export default class InlineEditingTable extends LightningElement {
    recordData;
    saveDraftValues = [];
    @api selectedMarket;
    editValue = true;
    columns = [
        {
            label: 'Name',
            fieldName: 'Name',
            type: 'text',
        }, {
            label: 'Lead Source',
            fieldName: 'LeadSource',
            type: 'text',
            editable: editValue,
        }, {
            label: 'Number of Keys',
            fieldName: 'Number_of_Keys__c',
            type: 'Number',
            editable: editValue,
        }, {
            label: 'Status',
            fieldName: 'Status',
            type: 'Picklist',
            editable: editValue,
        }
    ];
    


    @wire(LWCtable, {MarketId: '$selectedMarket'})
    retrieveOutreachData({error, data}){
        if(data){
            this.recordData = data
            console.log('data', data)
            }
        }
       


    handleSave(event) {
        this.saveDraftValues = event.detail.draftValues;
        const recordInputs = this.saveDraftValues.slice().map(draft => {
            const fields = Object.assign({}, draft);
            return { fields };
        });

    

        // Updateing the records using the UiRecordAPi
        const promises = recordInputs.map(recordInput => updateRecord(recordInput));
        Promise.all(promises).then(res => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Records Updated Successfully!!',
                    variant: 'success'
                })
            );
            this.saveDraftValues = [];
            return this.refresh();
        }).catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error',
                    message: 'An Error Occured!!',
                    variant: 'error'
                })
            );
        }).finally(() => {
            this.saveDraftValues = [];
        });
    }

    // This function is used to refresh the table once data updated
    async refresh() {
        await refreshApex(this.recordData);
    }
}

Here is my code; however everytime I launch the component I get that my editValue variable is not defined I am not sure what to do to make it work ..

thx you very much

2

You need to use this keyword.

For eg : this.editValue should work. The only time you can skip this keyword is when you have variables declared inside local scope.

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.