LWC Custom Datatable Column type - Picklist

Question

I have created a custom Datatable to custom the Datatable to use Combobox, it works fine, but when I select the picklist value, it is showing the value instead of the label on UI.

CustomDatatable:

    import LightningDatatable from 'lightning/datatable';
    import picklistColumn from './picklistColumn.html';
    import pickliststatic from './pickliststatic.html'
    
    
    export default class LWCCustomDatatableType extends LightningDatatable {
        static customTypes = {
            picklistColumn: {
                template: pickliststatic,
                editTemplate: picklistColumn,
                standardCellLayout: true,
                typeAttributes: [
                    'label',
                    'placeholder',
                    'options',
                    'value',
                    'context',
                    'variant',
                    'name'
                ]
            }
        };
    }

picklistColumn.html:

    <template>
            <lightning-combobox 
                    name="picklist" 
                    data-inputable="true" 
                    label={typeAttributes.label} 
                    value={typeAttributes.value} 
                    placeholder={typeAttributes.placeholder} 
                    options={typeAttributes.options} 
                    variant='label-hidden'
                 dropdown-alignment="auto">
            </lightning-combobox>
    </template>

pickliststatic.html

    <template>
        <span class="slds-truncate" title={value}>{value}</span>   
    </template>

DatatableDemo:

    <c-custom-datatable 
       key-field="Id" data={data} 
       columns={columns}                                    
       onvalueselect={handleSelection}
       draft-values={draftValues}
       oncellchange={handleCellChange} 
       onsave={handleSave} 
       oncancel={handleCancel}                                    
       hide-checkbox-column>
    </c-custom-datatable>

DatatableDemo.js

    const columns = [
        { label: 'Name', fieldName: 'Name' },
        {
            label: 'Learning Community', fieldName: 'lcName', type: 'picklistColumn', editable: true,
            typeAttributes: {
                placeholder: 'Choose Type',
                options: { fieldName: 'lcListOptions' },
                value: { fieldName: 'Learning_Community__c' },
                label: { fieldName: 'lcName' },
                context: { fieldName: 'Id' } 
            }
        }
    ]

    getRecords({ sObjectName: 'Engagement__c', condition: queryFilter, fieldList: this.engfieldList })
                    .then((data) => {
    
                        this.data = JSON.parse(JSON.stringify(data));
    
                        console.log(this.lcs);
    
                        this.data.forEach(ele => {
                            
                            ele.lcListOptions = this.lcs;
                            ele.lcName = ele?.Learning_Community__r?.Name;
                            
    
                        })   
                        
    
                        console.log(JSON.stringify(this.data));
    
                    })
                    .catch((error) => {
                        this.error = error;
                    });

Output:

Issue:

After selecting the picklist value, you can see that it is showing "Id" instead of label. Looks like I am missing something very silly.

Second try with Label instead of value in pickliststatic:

UPDATE:

Answer 1

It looks like you need a separate component file that is referenced from your templates. I'm not 100% sure of this, but all the examples I have seen have a template file like this (in a child folder of the custom datatable):

<template>
  <c-custom-datatable-component value={value} custom-value={typeAttributes.value}>
  </c-custom-datatable-component>
</template>

Then in a separate component, the actual markup is defined:

<template>
  <span class="slds-truncate" title={value}>{value}</span>   
</template>

With Javascript:

import { LightningElement, api } from 'lwc';

export default class customDatatableComponent extends LightningElement {
  @api value;
  @api customValue; 
}

I'm not sure if your shortcut version is supported, but given what's happening ... I'd say perhaps not. All the rest of your code looks fine to me.

Answer 2

Added a separate component, and referenced it in the picklistColumn component, and I am firing the event whenever the user changes the value, and finally handling the event in the parent component and updating the array.

picklistColumn.html

<template>       
        <c-picklist-cmp label={typeAttributes.label} value={typeAttributes.value}
        placeholder={typeAttributes.placeholder} options={typeAttributes.options} context={typeAttributes.context}>
    </c-picklist-cmp>
</template>

PicklistCmp:

html:

<template>
    <div class="picklist-container slds-p-around_x-small">
        <lightning-combobox name="picklist" label={label} value={value} placeholder={placeholder} options={options}
            onchange={handleChange} variant='label-hidden'></lightning-combobox>
            
    </div>
 
</template>

JS:

 handleChange(event) {
            //show the selected value on UI
            this.value = event.detail.value;
    
            //fire event to send context and selected value to the data table
            this.dispatchEvent(new CustomEvent('picklistchanged', {
                composed: true,
                bubbles: true,
                cancelable: true,
                detail: {
                    data: { context: this.context, value: this.value }
                }
            }));
        }

Answer 3

It looks like your picklistStatic component is displaying the value rather than the label.

<template>
  <span class="slds-truncate" title={value}>{value}</span>   
</template>

I believe it should be

<template>
  <span class="slds-truncate" title={value}>{label}</span>   
</template>