Custom edit template for custom type lightning datatable not rendering value in combobox but is right below it

Viewed 261

I have extended the lightning-datatable in order to implement a working picklist editable datatable. I have created the template and the editTemplate as you can see below. The value is working fine in the template and outside the combobox in the editTemplate but not rendering in the combobox. What am I missing?

comboBox showing placeholder but not value. value showing below

Parent component referencing datatable

<c-cc_custom-lightning-datatable
   class="slds-scrollable projectDatatable"
   key-field="Id" 
   data={modalData.projectWork} 
   columns={modalData.projectColumns}
   onrowaction={handleRowAction}
   onsave={onSaveHandler}
   draft-values={draftValues}
   hide-checkbox-column
   ></c-cc_custom-lightning-datatable>

cc_customLightningDatatable.js

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

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

editTemplate

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

template

<template>
    {typeAttributes.value}
</template>
0 Answers
Related