function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Shyamala VaradharajanShyamala Varadharajan 

Dynamic picklist in LWC Datatable

I have a use case like in first column I need to dispaly some valuein first column which is a text value , according to that i need to make next column as dynamic which is picklist field  and according to the second column the third column need to be dynamic which is picklist field. For Example,
Column A (Text)Column B (Picklist)Column c (Picklist)
AB
C
D (If user select D)		B
C
BA
C
D (If user select A)		C
D
CA
B
D(If user select B)		A
D
DA
B
C(If user select C)		A
B


Is this possible to do in lwc datatable. If yes can anyone help me how to acheive this. Thanks in advance.
Best Answer chosen by Shyamala Varadharajan
Karthik jKarthik j
Hey Shyamala,

Hope you are doing good.
Achieving this using lightning data table will include some complexities, The simplest way to achive this is by using the HTML table.

It looks something like this.

User-added image

I am attching the code for your reference, Let me know If this solution fullfills your requirement. Also please mark this answer as BEST to help the other community members. Thank you.

HTML
  
<template>
    <lightning-card title="Dynamic Picklist Value Selection">
        <table>
            <thead>
                <tr>
                    <th>Picklist 1</th>
                    <th>Picklist 2</th>
                    <th>Picklist 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <lightning-combobox variant="label:hidden" options={picklist1Options} onchange={handlePicklist1Change} style="width:150px; height:40px"></lightning-combobox>
                    </td>
                    <td>
                        <lightning-combobox variant="label:hidden" options={picklist2Options} onchange={handlePicklist2Change} style="width:150px; height:40px"></lightning-combobox>
                    </td>
                    <td>
                        <lightning-combobox variant="label:hidden" options={picklist3Options} onchange={handlePicklist3Change} style="width:150px; height:40px"></lightning-combobox>
                    </td>
                </tr>
            </tbody>
        </table>
    </lightning-card>
</template>

JS
  
import { LightningElement } from 'lwc';

export default class DynamicPicklist extends LightningElement {

    picklist1Options=[
        {label:'A',value:'A'},
        {label:'B',value:'B'},
        {label:'C',value:'C'},
        {label:'D',value:'D'}];
    picklist2Options =[];
    picklist3Options =[];
    selected1Option;
    handlePicklist1Change(event){
       this.selected1Option = event.detail.value;
       this.picklist2Options =[];
       for(let data of this.picklist1Options){
          if(data.value != event.detail.value){
            this.picklist2Options.push(data); 
          }
       }
    }
    handlePicklist2Change(event){
        this.picklist3Options =[];
        for(let data of this.picklist2Options){
            if(data.value != event.detail.value){
              this.picklist3Options.push(data); 
            }
         } 
     }
    handlePicklist3Change(event){
        
    }

}



 

All Answers

VinayVinay (Salesforce Developers) 
Hi Shyamala,

Check below reference example to get picklist values dynamically in lwc and that can help you.

https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/#:~:text=To%20fetch%20the%20picklist%20values,we%20need%20to%20call%20fields.

Please mark as Best Answer if above information was helpful.

Thanks,
Karthik jKarthik j
Hey Shyamala,

Hope you are doing good.
Achieving this using lightning data table will include some complexities, The simplest way to achive this is by using the HTML table.

It looks something like this.

User-added image

I am attching the code for your reference, Let me know If this solution fullfills your requirement. Also please mark this answer as BEST to help the other community members. Thank you.

HTML
  
<template>
    <lightning-card title="Dynamic Picklist Value Selection">
        <table>
            <thead>
                <tr>
                    <th>Picklist 1</th>
                    <th>Picklist 2</th>
                    <th>Picklist 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <lightning-combobox variant="label:hidden" options={picklist1Options} onchange={handlePicklist1Change} style="width:150px; height:40px"></lightning-combobox>
                    </td>
                    <td>
                        <lightning-combobox variant="label:hidden" options={picklist2Options} onchange={handlePicklist2Change} style="width:150px; height:40px"></lightning-combobox>
                    </td>
                    <td>
                        <lightning-combobox variant="label:hidden" options={picklist3Options} onchange={handlePicklist3Change} style="width:150px; height:40px"></lightning-combobox>
                    </td>
                </tr>
            </tbody>
        </table>
    </lightning-card>
</template>

JS
  
import { LightningElement } from 'lwc';

export default class DynamicPicklist extends LightningElement {

    picklist1Options=[
        {label:'A',value:'A'},
        {label:'B',value:'B'},
        {label:'C',value:'C'},
        {label:'D',value:'D'}];
    picklist2Options =[];
    picklist3Options =[];
    selected1Option;
    handlePicklist1Change(event){
       this.selected1Option = event.detail.value;
       this.picklist2Options =[];
       for(let data of this.picklist1Options){
          if(data.value != event.detail.value){
            this.picklist2Options.push(data); 
          }
       }
    }
    handlePicklist2Change(event){
        this.picklist3Options =[];
        for(let data of this.picklist2Options){
            if(data.value != event.detail.value){
              this.picklist3Options.push(data); 
            }
         } 
     }
    handlePicklist3Change(event){
        
    }

}



 
This was selected as the best answer
Shyamala VaradharajanShyamala Varadharajan
Hi Karthik,

Thank you so much for your response this helps me a lot. I need one more clarfication. In my table the first column is a outputText field (I retrieve this value through API and not storing in SFDC)which will show the list like I added above, so according to that field i need to display the picklist field.Is that possible?
Karthik jKarthik j
Hey Shyamala, Good evening

Yes that is definitely possible. Could you please give me more understanding about the outputText field which you are displying in the first column. 
Are you trying to display all the values one by one in first column? In this example A,B,C,D in 4 seperate rows of the first column and in consecutive columns you want to display the picklists by leaving the selected options.  
Shyamala VaradharajanShyamala Varadharajan
Hey Karthik,

Yes Im making an API call where it returns A,B,C and D as a list . So I'm trying to create a table where it will have 4 columns. In Column A I'm trying to display each value one by one as a row.
RowsColumn A (output field)Column B (Picklist)Column c (Picklist)
Row 1A B
C
D (If user select D)		B
C
Row 2BA
C
D (If user select A)		C
D
Row 3CA
B
D(If user select B)		A
D
Row 4DA
B
C(If user select C)		A
B


Thanks you in advance
Shyamala VaradharajanShyamala Varadharajan
Hey Karthik,
My Screen need to be like this,
User-added image