custom picklist in lwc lightning datatable

Question

I'm working with an example from: https://live.playg.app/play/picklist-in-lightning-datatable

I need to be able to dynamically set the Rating options that are hard-coded below ({ label: 'Hot', value: 'Hot' } . . .)

this.columns = [
    { label: 'Name', fieldName: 'Name', editable: true },
    { label: 'Account Number', fieldName: 'AccountNumber', editable: true },
    { label: 'Phone', fieldName: 'phone', type: 'phone', editable: true },
    {
        label: 'Rating', fieldName: 'Rating', type: 'picklist', typeAttributes: {
            placeholder: 'Choose rating', options: [
                { label: 'Hot', value: 'Hot' },
                { label: 'Warm', value: 'Warm' },
                { label: 'Cold', value: 'Cold' },
            ] // list of all picklist options
            , value: { fieldName: 'Rating' } // default value for picklist
            , context: { fieldName: 'Id' } // binding account Id with context variable to be returned back
        }
    }
];

Seems like it should be pretty simple but I have not made it work yet. I've tried to shoehorn this into it with no luck:

this.options= [{label: 'TEST1', value: 'a5l350000'},
                            {label: 'TEST2', value: 'a5l35222'}];

and then putting this.options in the columns json instead of the hard-coded part that is in there.

Any help appreciated.

Answer 1

You can do something like below:

this.columns = [
    { label: 'Name', fieldName: 'Name', editable: true },
    { label: 'Account Number', fieldName: 'AccountNumber', editable: true },
    { label: 'Phone', fieldName: 'phone', type: 'phone', editable: true },
    {
        label: 'Rating', fieldName: 'Rating', type: 'picklist', typeAttributes: {
            placeholder: 'Choose rating', options:this.getPLValues// list of all picklist options
            , value: { fieldName: 'Rating' } // default value for picklist
            , context: { fieldName: 'Id' } // binding account Id with context variable to be returned back
        }
    }
];

...
...
    getPLValues() {
        var plValues = [];
        plValues.push({ label: 'Complete', value: 'Complete' });
        plValues.push({ label: 'Rejected', value: 'Rejected' });
        plValues.push({ label: 'Waived', value: 'Waived' });

        return plValues;
//this gets called only once though, not once per row. That is where I am stuck. 
    }