I have create an LWC datatable component to handle related record and Edit the records once displayed. I have one picklist field and i need to render as picklist during inline edit.
I have implemented LWC data Custom Type to handle picklist as its supported by datatable. But when i click inline edit the picklist options are not visible.
---Child Component Code---
<template>
<span class="slds-truncate" title={value}>{value}</span>
</template-->
picklistColumn.html:
<template>
<lightning-combobox name="picklist" data-inputable="true" label={typeAttributes.label} value={editedValue}
placeholder={typeAttributes.placeholder} options={typeAttributes.options} variant='label-hidden'
dropdown-alignment="auto">
</lightning-combobox>
</template>
datatablePicklist.html
<template>
</template>
datatablePicklist.js
import { LightningElement, api, wire, track } from 'lwc';
import LightningDatatable from 'lightning/datatable';
import picklistColumn from './picklistColumn.html';
import pickliststatic from './pickliststatic.html'
export default class datatablePicklist extends LightningDatatable {
static customTypes = {
picklistColumn: {
template: pickliststatic,
editTemplate: picklistColumn,
standardCellLayout: true,
typeAttributes: ['label', 'placeholder', 'options', 'value', 'context', 'variant','name']
}
};
}
Parent Component: HTML
<lightning-card key={table.id} title={table.name} variant="Narrow" icon-name="standard:folder"
class="cardSpinner">
<div class="slds-var-p-around_small">
<c-aptsdatatable-picklist key={table.id} key-field="Id" data={table.data} columns={table.columns}
onvalueselect={handleSelection} draft-values={table.draftValues} oncellchange={handleCellChange}
onrowaction={handleRowAction} type-attributes={typeAttributes} onsave={handleSave}
oncancel={handleCancel} data-table-id={table.id}
hide-checkbox-column>
</c-aptsdatatable-picklist>
</div>
</lightning-card>
Parent.JS Data and Column value are coming for Apex
connectedCallback() {
loadStyle(this, modal);
console.log('Id: ' + this.RecordId);
getdata({ recordId: this.RecordId })
.then((response) => {
if (response) {
console.log(response);
this.tables = response.map((table) => ({
id: table.id,
tableId: table.id,
name: table.name,
data: table.dataList ? table.dataList.map((record) => ({
...record,
deleteRow: 'Delete',
isNew: false,
})) : [],
columns: table.columns.map((column) => {
if (column.type === 'picklistColumn') {
return {
...column,
type: 'picklistColumn',
typeAttributes: {
editable: true,
fieldName: column.fieldName,
placeholder: 'Select an option',
options: column.picklistOptions.map((option) => ({
label: option,
value: option,
})),
},
};
} else {
return {
...column,
editable: true,
};
}
}).concat({
label: 'Actions',
type: 'button',
typeAttributes: {
label: 'Delete',
name: 'delete',
iconName: 'utility:delete',
variant: 'destructive',
},
cellAttributes: {
class: 'slds-cell-edit-delete-action',
},
}),
draftValues: [],
}));
// Set the tableId property
if (this.tables.length > 0) {
this.tableId = this.tables[0].id;
}
console.log('tables' + this.tables);
console.log('Agr' + JSON.stringify(this.tables));
}
})
.catch((error) => {
console.error('Error retrieving data', error);
})
.finally(() => {
this.isLoading = false;
});
}
Any Idea what I am missing or issue?
