I have use case where i need to show the values in the picklist format in lightning-datatable for which i am extending the lightning-datatable component.The datatable shows a drop-down box but i am not able to click it open to select the options in it.
I have even the value inside the combo box but it is just that i cannot open my combo-box to show the options.
Below is my code to extend the lightning-datatable;
datatablePickList.html
<template>
<div class="picklist-container">
<lightning-combobox name="picklist" label={label} value={value} placeholder={placeholder} options={options}
onchange={handleChange}></lightning-combobox>
</div>
</template>
datatablePickList.js
import { LightningElement, api } from 'lwc';
export default class DatatablePickList extends LightningElement {
@api label;
@api placeholder;
@api options;
@api value;
@api context;
connectedCallback(){
console.log("Options is "+JSON.stringify(this.options));
console.log("Value is "+JSON.stringify(this.value));
}
handleChange(event) {
//show the selected value on UI
this.value = event.detail.value;
//fire event to send context and selected value to the data table
this.dispatchEvent(new CustomEvent('picklistchanged', {
composed: true,
bubbles: true,
cancelable: true,
detail: {
data: { context: this.context, value: this.value }
}
}));
}
}
extendedLightningDatatable.js
import LightningDatatable from 'lightning/datatable';
import customRichtextControl from './customRichtextControl.html';
import deleteRow from './deleteRow.html';
import DatatablePicklistTemplate from "./picklist-template.html";
export default class ExtendedLightningDatatable extends LightningDatatable {
static customTypes = {
customRichtext: {
template: customRichtextControl,
standardCellLayout: false
},
picklist: {
template: DatatablePicklistTemplate,
typeAttributes: ['label', 'placeholder', 'options', 'value'],
},
};
}
Component that uses the extendedLightningDatatable(template):
<template>
<div style="height: auto;">
<lightning-button label="+Add" onclick={addTableRow}></lightning-button>
<c-extended-lightning-datatable
key-field="Id"
data={records}
columns={columns}
onrowaction={handleRowAction}
onpicklistchanged={picklistChanged}
onvalueselect={handleSelection}
oncellchange={handleCellChange}
hide-checkbox-column="false"
show-row-number-column="true"
onsort={updateColumnSorting}
sorted-by={sortBy}
sorted-direction={sortDirection}
row-number-offset ="0"
draft-values={draftValues}
onsave={handleSave}
>
</c-extended-lightning-datatable>
</div>
<footer if:true={isLimitSet} class="slds-card__footer">
<a href="javascript:void(0);">
<span class="slds-align_absolute-center" onclick={handleViewAll}>View All</span>
</a>
</footer>
</template>
ExtendedLightningDatatable.html
<template>
</template>
Component that uses extendedLightningDatatable(LightningRelatedListDetail.html)
<template>
<div style="height: 100%;">
<lightning-button label="+Add" onclick={addTableRow}></lightning-button>
<c-extended-lightning-datatable
key-field="Id"
data={records}
columns={columns}
onrowaction={handleRowAction}
onpicklistchanged={picklistChanged}
onvalueselect={handleSelection}
oncellchange={handleCellChange}
hide-checkbox-column="false"
show-row-number-column="true"
onsort={updateColumnSorting}
sorted-by={sortBy}
sorted-direction={sortDirection}
row-number-offset ="0"
draft-values={draftValues}
onsave={handleSave}
>
</c-extended-lightning-datatable>
</div>
<footer if:true={isLimitSet} class="slds-card__footer">
<a href="javascript:void(0);">
<span class="slds-align_absolute-center" onclick={handleViewAll}>View All</span>
</a>
</footer>
</template>
LightningRelatedListHeader.html
<template>
<template if:true={isShowRelatedList}>
<lightning-card>
<article class="slds-card slds-card_boundary headerBottomBorder forceRelatedListCardDesktop">
<div class="slds-grid slds-page-header forceRelatedListCardHeader">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__figure">
<lightning-icon icon-name={objectIconName} size="small">
</lightning-icon>
</div>
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title={objectPluralLabel}>
<span>{objectPluralLabel} {recordCount}</span>
</a>
</h2>
</div>
<div class="slds-no-flex">
<lightning-button-icon variant="border-filled" icon-name="utility:refresh" alternative-text="Refresh" title="Refresh" onclick={handleRefresh}>
</lightning-button-icon>
<template if:false={isNewDisabled}>
<lightning-button
label="New"
onclick={createNewRecord}>
</lightning-button>
</template>
</div>
</header>
</div>
<div>
<c-lightning-related-list-detail child-object-api-name={childObjectApiName}
field-set-api-name={fieldSetApiName}
child-object-fields={childObjectFields} child-object-richtext-fields={childObjectrRichtextFields}
parent-field-api-name={parentFieldAPIName}
parent-record-id={recordId}
records-filter-logic={relatedListRecordsFilterLogic}
is-edit-disabled={isEditDisabled}
is-delete-disabled={isDeleteDisabled}
no-of-initial-records-load={noOfInitialRecordsLoad}
record-name={recordName}
>
</c-lightning-related-list-detail>
</div>
</article>
</lightning-card>
<!-- create Record Component-->
<template if:true={createRecordOpen}>
<template if:true={recordTypeSelector}>
<div >
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
<lightning-button-icon icon-name="utility:close" variant="bare-inverse" size="large" onclick={closeModal}></lightning-button-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">New {objLabelName}</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<div class="slds-radio_faux slds-radio__label">
<lightning-radio-group name="Record Type"
label="Record Type"
value={recordTypeId}
options={recordTypeOptions}
variant="label-inline"
type="radio"
onchange={handleRecTypeChange}>
</lightning-radio-group>
</div>
</div>
<footer class="slds-modal__footer">
<lightning-button label="Cancel" onclick={closeModal}></lightning-button>
<lightning-button label="Next" onclick={createRecordMain} variant="brand"></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</template>
<template if:true={mainRecord}>
<div>
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
<lightning-button-icon icon-name="utility:close" variant="bare-inverse" size="large" onclick={closeModal}></lightning-button-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-02" class="slds-text-heading_medium slds-hyphenate">New {recordName}</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-2">
<lightning-record-form
class="recordForm"
object-api-name={childObjectApiName}
record-type-id={recordTypeId}
layout-type="Compact"
columns="2"
density="comfy"
onerror={handleError}
onsuccess={handleSuccess}
oncancel={closeModal}
onsubmit={handleSubmit}>
</lightning-record-form>
</div>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</template>
</template>
</template>
</template>
Let me know how to solve this issue.
extendedLightningDatatable.html& the JS file of the component that consumesextendedLightningDatatable? Looking into your posted code at a high level, there doesn't seems to be any noticeable error.