Custom LWC datatable with custom datatype - lightning Combo box

Question

I need help in getting the values in the parent component from the template which is called in child. In below code, onchange event is giving me the Id for the picklist value but not the cell id. how can I achieve this?

Ask is: I want the key-field or the name along with the picklist value when it is selected?

Parent component

  <template if:true={zipcodeList}>
                    <div class="slds-m-right_none slds-m-top_none slds-align_absolute-center" style="overflow: visible;width: 1400px;">
                        
                        <c-custom-types style="width:614px;"
                                key-field="Id"
                                data={zipsList}
                                columns={columns}
                                onrowselection={getSelectedRowName}
                                onchange={handleChange}
                                show-row-number-column>
                        </c-custom-types >
                    </div>
                </template>

Parent.js

   connectedCallback() {   
        this.fetchMarkets().then(() => {
            this.arrOfZipcode = this.zipcodeswm.split(',');
            this.zipsList = this.getzipsList();
        });
       
    }
    
    getzipsList() {
        let arrOfZipcode = this.zipcodeswm.split(',');
        const transformedArray = arrOfZipcode.map(value => {
            return { Name: value, Id: value };
        });
        this.zipcodeList = transformedArray;
        const c = transformedArray.map(record => {
            return {
                ...record,
                'picklistOptions': this.LstOfMarkets
            };
        });
        return c;
    }
    fetchMarkets() {  
        return getMarkets().then((result) => {
            this.LstOfMarkets = Object.entries(result).map(([key, value]) => {
                return {
                    label: value,
                    value: key
                };
            });
        
            for (const key in result) {
                if (result.hasOwnProperty(key)) {
                    const value = result[key]; 
                    this.marketMap.set(key, value); // key=id and value= name
                }
            }
        }).catch((error) => {
            this.error = error;
            this.cases = undefined;
        });
    }



    // this is triggered when a row selected
    getSelectedRowName(event) {
       const conf = event.detail.config;
        const selectedRows = event.detail.selectedRows;
        
    }
   
    handleChange(event) {
        console.log('event.detail- handleCellChange', event.detail.value);
// HERE THIS EVENT HAS ONLY VALUE BUT THERE IS NO CELL INFO
    }

    ```
 customTypes LWC Component

customPicklist.html

    <div class="slds-m-right_none slds-m-top_none slds-align_absolute-center" style="overflow: visible;">
     <lightning-combobox
            name="picklist"
            label={typeAttributes.label}
            value={typeAttributes.value} -- ** how to get the value from here to parent for which row this value belong to**
            placeholder={typeAttributes.placeholder}
            options={typeAttributes.options}
            >
        </lightning-combobox>
    </div>
</template>

customTypes.html

<template></template>

customTypes.js

   import customPicklist from './customPicklist.html';
   export default class CustomTypes extends LightningDatatable {
    //global var
    static customTypes= {
        marketPicklist: {
            template: customPicklist,
            standardCellLayout: true,
            typeAttributes: ['label', 'placeholder', 'options', 'value', 'context', 'variant','name']
        }
    }

   }

Answer 1

In customPicklist.html, add a custom event when the combobox value changes

In customPicklist.js, dispatch the custom event.

In c-custom-types.html, handle the custom event onpicklistchange={handlePicklistChange}

In c-custom-types.js, handle the custom event.

handlePicklistChange(event) { const selectedValue = event.detail.value; // row logic } }