Salesforce LWC custom lightning-datatable with picklist

Question

Within a component of a child component that I'm trying to develop, a list containing records to be modified in a datatable is passed to me by a parent component.

However, one field of this datatable is of the picklist type and since the combobox type is not present in the lightning datatable, I created a custom component.

So, this is the code with which I structure the component:

import { LightningElement,api,track } from 'lwc';

export default class AssetReturn extends LightningElement {
    
    @api assetNonTaggedList; //a list that is passed to me as input that contains the records 

    saveDraftValues;
    draftValues = [];

//maps that I use to update records
_nonTaggedMap = new Map();

renderedCallback(){
    for(var index = 0; index<JSON.parse(JSON.stringify(this.assetNonTaggedList)).length; index++){
        this._nonTaggedMap.set(this.assetNonTaggedList[index].Id,this.assetNonTaggedList[index]);
    }
}

saveDraftValue;
    draftValues = [];

//selectedList
    nonTaggedSelectedList = [];

nonTaggedAssetColumns = [
    { label: 'Description', fieldName: 'Description' },
    { label: 'Equipment Number', fieldName: 'EQUNR__c' },
    { label: 'Validity Start Date', fieldName: 'AB__c'},
    { label: 'Validity End Date', fieldName: 'BIS__c', type: 'date', editable: true, 
        typeAttributes: {
            day: 'numeric',
            month: 'numeric',
            year: 'numeric'
        }
    },
    { label: 'Assignment Start Date', fieldName: 'ASSIGNMENT_START_DATE__c' }, 
    {
        label: 'Blacklist',
        fieldName: 'Blacklist__c',
        wrapText: true,
        type: 'blacklistPicklist',
        typeAttributes: {
            options: [
                { label: 'No', value: 'No' },
                { label: 'Si', value: 'Si' }
            ],
            value: {fieldName: 'Blacklist__c'},
            placeholder: 'blacklist',
            editable: true
        }
    },
    
];

  getSelectedRec() {
        this.nonTaggedSelectedList = this.template.querySelector('c-asset-return-custom-type-global[data-my-id=nonTaggedAssetsId]').getSelectedRows();
        console.log("non tagged selected list "+JSON.stringify(this.nonTaggedSelectedList));
    }


handleInlineEditNonTagged(event){
    this.saveDraftValues = event.detail.draftValues;
    const recordInputs = this.saveDraftValues.slice().map(draft => {
        const fields = Object.assign({}, draft);
        return { fields };
    });
    console.log("recordInputs",recordInputs);
    
    const rowIndex = recordInputs[0].fields.nonTaggedAssetsId.substring(4, recordInputs[0].fields.nonTaggedAssetsId.length);
    let tempRow = JSON.parse(JSON.stringify(this.assetNonTaggedList[rowIndex]));
    tempRow.BIS__c = recordInputs[0].fields.BIS__c.substring(0,10);
    this._nonTaggedMap.set(this.assetNonTaggedList[rowIndex].Id,tempRow);
}

handleSave(){
        this.getSelectedRec();
            var assetNonTaggedToPush = [];
            for(var index = 0; index <JSON.parse(JSON.stringify(this.nonTaggedSelectedList)).length; index++ ){
                assetNonTaggedToPush.push(this._nonTaggedMap.get(JSON.parse(JSON.stringify(this.nonTaggedSelectedList[index].Id))))
            }
        }
        this.saveDraftValues = [];
    }
}

and the html is this :

<template>
    <lightning-quick-action-panel>
        <h1 class="slds-align_absolute-center slds-m-around_medium slds-text-body_small"><b>Title</b></h1>
        <c-asset-return-custom-type-global key-field="nonTaggedAssetsId" data-my-id="nonTaggedAssetsId" data={assetNonTaggedList} columns={nonTaggedAssetColumns}
            oncellchange={handleInlineEditNonTagged}
            draft-values={draftValues} suppress-bottom-bar> 
        </c-asset-return-custom-type-global>
    </lightning-quick-action-panel>
1
<footer class="slds-modal__footer">
        <lightning-button variant="Brand" label="save" onclick={handleSave}></lightning-button>
    </footer>

</template>

instead, the component of the custom datatable is this : lwc html:

<template>
   
</template>

lwc js which extends datatable:

import LightningDatatable from 'lightning/datatable';
import customPicklist from './customPicklist.html';

export default class AssetReturnCustomTypeGlobal extends LightningDatatable {
    static customTypes = {
        blacklistPicklist: {
            template: customPicklist,
            standardCellLayout: true,
            typeAttributes: ['label', 'value', 'placeholder', 'options'],
        }
    }

template customPicklist :

<template>
     <lightning-combobox
        name="picklist"
        label={typeAttributes.label}
        value={typeAttributes.value}
        placeholder={typeAttributes.placeholder}
        options={typeAttributes.options}
      >
    </lightning-combobox>
</template>

I wonder if there is an easy way to take the modified value from the combo-box and update _nonTaggedMap with the correct value.

i tried to use oncellchange like i did for the date field, but it doesn't trigger.

I also tried calling an event directly from the picklist but it seems like it doesn't recognize the method at onchange.

Salesforce LWC custom lightning-datatable with picklist

0 Answers0