I am trying to use the below custom datatable where we can add picklist


In this all the css has been added to static resource and it is used in customDataTable.js where we can see the picklist clearly in datatable

enter image description here

I removed the static resource and added the css as customDataTable.css file

    width : 90%;
    margin: 0 auto;

.picklist-container .slds-dropdown,
.lookup-container .slds-dropdown{
    position: relative !important;
    z-index: 99 !important;
    max-height: 120px;
    overflow: scroll;

    margin-bottom: 17px;

th.slds-has-focus, td.slds-has-focus{
    box-shadow: none !important;

.slds-table_edit thead th:first-child{
    width: 60px;


import LightningDatatable from 'lightning/datatable';
//import the template so that it can be reused
import DatatablePicklistTemplate from './picklist-template.html';

export default class CustomDataTable extends LightningDatatable {
    static customTypes = {
        picklist: {
            template: DatatablePicklistTemplate,
            typeAttributes: [ 'label', 'placeholder', 'options', 'value', 'context' ],




    <c-datatable-picklist label={typeAttributes.label} value={typeAttributes.value}
        placeholder={typeAttributes.placeholder} options={typeAttributes.options} context={typeAttributes.context}>

c-datatable-picklist HTML

    <div class="picklist-container">
        <lightning-combobox name=" picklist" label={label} value={value} placeholder={placeholder} options={options} onchange={handleChange}>

After that my picklist looks like this

enter image description here

Its basically not opening if i click on that, its getting inside the line

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.