I'm defining a custom column for a Lightning dataTable component to hold a Lightning combobox like this:
{ label: 'Down Payment Type', fieldName: 'DownPaymentType__c', type: 'picklistColumn', editable: true, typeAttributes: { placeholder: 'Choose Type', options: downPaymentTypeOptions, variant: 'label-hidden', value: {fieldName: 'DownPaymentType__c'} } } I'm defining the options in the same file, prior to the class definition, like this (with the intention of loading them dynamically once this is working):
const downPaymentTypeOptions = [ {label: 'Cash', value: 'Cash'}, {label: 'Trade', value: 'Trade'}, {label: 'Both', value: 'Both'}, {label: 'None', value: ''} ]; I have a custom component extending dataTable which accepts the column object above. It looks like this:
export default class CashTradeTable extends LightningDatatable { static customTypes = { picklistColumn: { template: customText, editTemplate: customPicklist, standardCellLayout: true, typeAttributes: ['name', 'label', 'placeholder', 'options', 'value', 'context', 'variant'] } }; } Here's the edit template (customPicklist):
<template> <lightning-combobox name="picklist" data-inputable="true" label={typeAttributes.label} value={editedValue} placeholder={typeAttributes.placeholder} options={typeAttributes.options} variant={typeAttributes.variant}> </lightning-combobox> </template> However, while properties like placeholder and variant work properly, options does not. I've also realized that value isn't transferring to the edit template either, regardless of whether I assign typeAttributes.value or editedValue.
Note that only the editTemplate values aren't being updated. If I substitute the edit template for the standard template it's working--the options are populated. I need the options to populate in the edit template.
I've tried using a getter in the class with no improvement. I have checked the value of the columns object in the main component and the options value is correct.
The thing looks like this initially:
And like this in edit mode:
I've also verified that it's not a truncation/obscured view thing; I can see that the dropdown element is empty. Why aren't the values populating?
Related resources:
