Custom edit template for custom type Lightning datatable not rendering value in combobox

Question

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>

Marc Pla · Accepted Answer · 2023-12-03 03:35:36Z

You have to bind the value of your combobox to {editedValue} as explained in the documentation:

Make a Custom Data Type Editable

Use these attributes to pass values between the input component and the extended datatable component:

editedValue (String): The current value of the custom cell being edited.

columnLabel (String): The label value retrieved from the column definition.

required (Boolean): The requiredness value retrieved from the column definition. The default value is false. If the column definition sets required to true, the field shows a validation errorif a user interacts with the field and doesn’t enter a value.

typeAttributes (Object): The object containing the type attribute values for the cell. Access the values using thetypeAttributes.attributeName syntax.

Example:
<template>
  <div class="slds-p-around_x-small">
    <lightning-input
      type="number"
      value={editedValue}
      required={required}
      label={columnLabel}
      min={typeAttributes.min}
      data-inputable="true"
      class="slds-float_right"
    >
    </lightning-input>
  </div>
</template>

Collectives™ on Stack Overflow

Custom edit template for custom type Lightning datatable not rendering value in combobox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related