Picklist in LWC Datatable Inline Edit

data table save and cancel button at the bottom of datatable is not getting open when we change the value in combo box

HI,
I want to use picklist for multiple columns.
Can you suggest how I can set picklistOptions for different columns.

Hi Rijwan
Can you tell me How to add upload file button in data table & how to add three picklist in single data table. Out of these three picklist one picklist is dependent picklist.

Hi Rijwan,

I asked for a call. But you did not join. Please let me know what is the best time to do so. I need your help.

Hi Rijwan,
Can we connect today at 5pm for quick call? Unable to fetch picklist fields with different values. Please assist.

Thank you!

Sai Mohan

hi Rijwan,

I am getting below message intermittently ….can you help me please?

message
:
“An error occurred while trying to update the record. Please try again.”
output
:
errors
:
Array(1)
0
:
{constituentField: null, duplicateRecordError: null, errorCode: ‘UNABLE_TO_LOCK_ROW’, field: null, fieldLabel: null, …}

Thank you

Thank you for your help.
The reference code seems to work as expected.
I hope this information helps many people.
There is a package called List Editor that can do something very similar.
(https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3u00000PFXi6EAH&tab=r)
However, List Editor has two disadvantages: I would appreciate it if you could point me to some code that can solve it someday.
・When batch editing with the pencil mark on the upper right, numeric keypad input is not accepted for currency type.
・When batch editing with the pencil mark on the upper right, after searching for the reference item, you can not select the item without clicking with the mouse.

Hi Rijwan,

Is it possible to manage multi select picklist in LWC Datatable?

Hi, me again. We had a discussion last week and you helped me add a second picklist. Is there a way to make it a dependent picklist in the datatable?

Thanks,
Joscelyn

Thanks for the blog. I m trying the snippet code I m facing issues related to save button there is a slight change in my design. I used the component in flow and flow binds the tabledata. after click save I m unable to refresh the tabledata. Can you suggest any other alternative how to refresh the table data. In my case wire refresh method may not work as table data passed as api property from flow.

Hello Rizwan, I would like to thank you, it worked perfectly for my needs mainly because with this logic, I can mark multiple rows and replicate them instantly as if it were a standard column. I’m new and I ended up learning more because I didn’t know what dynamic and reactive variables were and I learned it by trying to find out the reason for the comment on line 48. I really liked your work.
Thank you again!

Hi, Thank you for the code. But the picklist always hides and i have to scroll to see the values.
Is there any way to display the picklist above the lwc?

Hi Rijwan,
How to fetch different two picklist fields with different values ?

Ex : Field A has values Yes, No
Field B has values Right, Wrong

On UI , its rendering Yes, No for both picklist fields. What did I miss here ? Could you please advise ?

HI Rijwan ,
This code works fine for me for one column picklist fields.
How to make this work for 10 columns ?
Please advice

Hi Rijwan,

Thank you very much for sharing the code. I tried to implement this in my opportunity object related list opportunity products. I have created a button that opens the lightning data table. Somehow, even after trying several times I couldn’t change my type from text to picklist field.
Also, I have width as controlling field for length picklist field.

Please find my main component js code below,

import { LightningElement, wire, api, track } from ‘lwc’;
import { NavigationMixin } from ‘lightning/navigation’;
import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;
import { refreshApex } from ‘@salesforce/apex’;
import getOpportunityProducts from ‘@salesforce/apex/OpportunityProductController.getOpportunityProducts’;
import updateOpportunityProducts from ‘@salesforce/apex/OpportunityProductController.updateOpportunityProduct’;
import deleteOpportunityProduct from ‘@salesforce/apex/OpportunityProductController.deleteOpportunityProduct’;
import OPPORTUNITYLINEITEM_OBJECT from ‘@salesforce/schema/OpportunityLineItem’;
import { getPicklistValues, getObjectInfo } from ‘lightning/uiObjectInfoApi’;
import UNIT_OF_MEASURE_FIELD from ‘@salesforce/schema/OpportunityLineItem.Unit_of_Measure__c’;
import WIDTH_FIELD from ‘@salesforce/schema/OpportunityLineItem.Width__c’;
import LENGTH_FIELD from ‘@salesforce/schema/OpportunityLineItem.Length__c’;

export default class OppProductEdit extends NavigationMixin(LightningElement) {
@api recordId;
@track opportunityProducts = [];
@track draftValues = [];
wiredOpportunityProductsResult;
unitOfMeasureOptions;
widthOptions;
lengthOptions;

columns = [
{ label: ‘Product ID’, fieldName: ‘Product2Id’, type: ‘text’ },
{ label: ‘Quantity’, fieldName: ‘Quantity’, type: ‘number’, editable: true },
{ label: ‘Unit of Measure’, fieldName: ‘Unit_of_Measure__c’, type: ‘picklist’,
typeAttributes: { placeholder: ‘Choose…’, options: { fieldName: ‘unitOfMeasureOptions’ },
value: { fieldName: ‘Unit_of_Measure__c’ }, context: { fieldName: ‘Id’ } }, editable: true },
{ label: ‘Unit Price’, fieldName: ‘UnitPrice’, type: ‘currency’, editable: true },
{ label: ‘Description’, fieldName: ‘Description’, type: ‘text’, editable: true },
{ label: ‘Width’, fieldName: ‘Width__c’, type: ‘picklist’,
typeAttributes: { placeholder: ‘Choose…’, options: { fieldName: ‘widthOptions’ },
value: { fieldName: ‘Width__c’ }, context: { fieldName: ‘Id’ } }, editable: true },
{ label: ‘Length’, fieldName: ‘Length__c’, type: ‘picklist’, typeAttributes: { placeholder: ‘Choose…’, options: { fieldName: ‘lengthOptions’ }, value: { fieldName: ‘Length__c’ }, context: { fieldName: ‘Id’ } }, editable: true },
{ label: ‘Product Code’, fieldName: ‘ProductCode’, type: ‘text’ },
{ label: ‘Total Price’, fieldName: ‘TotalPrice’, type: ‘currency’ },
{
type: ‘button-icon’,
typeAttributes: {
iconName: ‘utility:delete’,
name: ‘delete’,
title: ‘Delete’,
variant: ‘bare’,
alternativeText: ‘Delete’
}
}
];

@wire(getObjectInfo, { objectApiName: OPPORTUNITYLINEITEM_OBJECT })
objectInfo;

//Fetch picklist options
@wire(getPicklistValues, { recordTypeId: ‘$objectInfo.data.defaultRecordTypeId’, fieldApiName: UNIT_OF_MEASURE_FIELD })
unitOfMeasureValues({ error, data }) {
if (data) this.unitOfMeasureOptions = data.values;
else if (error) this.showToast(‘Error’, ‘Failed to load Unit of Measure options’, ‘error’);
}

@wire(getPicklistValues, { recordTypeId: ‘$objectInfo.data.defaultRecordTypeId’, fieldApiName: WIDTH_FIELD })
widthValues({ error, data }) {
if (data) this.widthOptions = data.values;
else if (error) this.showToast(‘Error’, ‘Failed to load Width options’, ‘error’);
}

@wire(getPicklistValues, { recordTypeId: ‘$objectInfo.data.defaultRecordTypeId’, fieldApiName: LENGTH_FIELD })
lengthValues({ error, data }) {
if (data) this.lengthOptions = data.values;
else if (error) this.showToast(‘Error’, ‘Failed to load Length options’, ‘error’);
}

@wire(getOpportunityProducts, {picklist: ‘$picklistOptions’})
OpportunityLineItemData(result) {
this.OpportunityLineItemData = result;
if(result.data){
this.data = JSON.parse(JSON.stringify(result.data));
this.data.forEach(ele => {
ele.pickListOptions = this.pickListOptions;
})
this.lastSavedData = JSON.parse(JSON.stringify(this.data));
} else if (result.error){
this.data = undefined;
}

}

updateDataValues(updateItem) {
let copyData = JSON.parse(JSON.stringify(this.data));

copyData.forEach(item => {
if (item.Id === updateItem.Id) {
for (let field in updateItem) {
item[field] = updateItem[field];
}
}
});

//write changes back to original data
this.data = […copyData];
}

updateDraftValues(updateItem) {
let draftValueChanged = false;
let copyDraftValues = […this.draftValues];
//store changed value to do operations
//on save. This will enable inline editing &
//show standard cancel & save button
copyDraftValues.forEach(item => {
if (item.Id === updateItem.Id) {
for (let field in updateItem) {
item[field] = updateItem[field];
}
draftValueChanged = true;
}
});

if (draftValueChanged) {
this.draftValues = […copyDraftValues];
} else {
this.draftValues = […copyDraftValues, updateItem];
}
}

//handler to handle cell changes & update values in draft values
handleCellChange(event) {
//this.updateDraftValues(event.detail.draftValues[0]);
let draftValues = event.detail.draftValues;
draftValues.forEach(ele=>{
this.updateDraftValues(ele);
})
}

@wire(getOpportunityProducts, { opportunityId: ‘$recordId’ })
wiredOpportunityProducts(result) {
this.wiredOpportunityProductsResult = result;
if (result.data) {
this.opportunityProducts = result.data;
} else if (result.error) {
this.showToast(‘Error’, result.error.body.message, ‘error’);
}
}

handleSave(event) {
const recordsInputs = event.detail.draftValues.slice().map(draft => {
const fields = { …draft, Id: draft.Id };
return { fields };
});

const promises = recordsInputs.map(recordInput =>
updateOpportunityProducts({ data: recordInput })
);

Promise.all(promises)
.then(() => {
this.showToast(‘Success’, ‘Products updated successfully.’, ‘success’);
this.draftValues = [];
return refreshApex(this.wiredOpportunityProductsResult);
})
.catch(error => {
this.showToast(‘Error’, error.body.message, ‘error’);
});
}

handleCancel() {
console.log(‘Navigating back to record page:’, this.recordId);
// Standard navigation
this[NavigationMixin.Navigate]({
type: ‘standard__recordPage’,
attributes: {
recordId: this.recordId,
objectApiName: ‘Opportunity’,
actionName: ‘view’
}
});

// Fallback navigation
setTimeout(() => {
window.location.href = ‘/’ + this.recordId;
}, 500); // Delay to allow standard navigation to process first
}

handleRowAction(event) {
const actionName = event.detail.action.name;
const row = event.detail.row;
if (actionName === ‘delete’) {
this.deleteProduct(row.Id);
}
}

deleteProduct(productId) {
deleteOpportunityProduct({ productId })
.then(() => {
this.showToast(‘Success’, ‘Product deleted successfully’, ‘success’);
return refreshApex(this.wiredOpportunityProductsResult);
})
.catch(error => {
this.showToast(‘Error’, error.body.message, ‘error’);
});
}

showToast(title, message, variant) {
this.dispatchEvent(
new ShowToastEvent({
title,
message,
variant
})
);
}
}