0 votes
3 views
by

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

1 Answer

0 votes
by
 
Best answer

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.

Welcome to Memory Exceeded, where you can ask questions and receive answers from other members of the community.
...