LWC Custom Datatable Column type – Picklist

lightning-datatablelightning-web-components

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:

enter image description here

enter image description here

enter image description here

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:

enter image description here

UPDATE:

enter image description here

Best Answer

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.

Related Topic