I'm having issues overriding the LWC Datatable with some custom types. I have a type I want to use for lookup fields, but I can't get the Cancel/Save buttons to appear when a user changes the fields value. Any idea what might be wrong? I'm adding the change to the draftValues variable but that doesn't seem to show/hide those buttons. I'm attempting to work around it by having it auto save when they change that fields value, but I'm also running into issues there. Any help would be greatly appreciated.
The base for all of this comes from SFDC Panther: https://www.sfdcpanther.com/how-to-use-the-lookup-field-in-lightning-datatable/
sorry for the delay... did you end up getting this to work?
if not, there's another thing I vaguely remember doing for something involving a custom datatable type (PoC stuff, we went a different route) where I had to do some explicit binding.
initialization:
export default class parentComponent extends LightningElement {
--> handleSearchVendor = this.onHandleSearchVendor.bind(this); <-- explicit binding
handleVendorSelection = this.onHandleVendorSelection.bind(this);
etc. ...
column setup:
async connectedCallback() {
this.columns = [
{ label: 'Product', fieldName: 'Product__c', type: 'customTableLookup', editable: false, wrapText: true,
typeAttributes: {
rowId: {fieldName: 'Id'},
lookupClass: "currVendor",
selection: {fieldName: 'productName'},
errors: [],
----> onsearch: this.handleSearchVendor, <----
onselectionchange: this.handleVendorSelection,
label: "Product",
placeholder:"...",
variant: "label-hidden",
disabled: true
}
},
etc. ...
event handler:
onHandleSearchVendor(event) {
// Call Apex endpoint to search for records and pass results to the lookup
const lookupElement = event.target;
let rowId = lookupElement.rowId;
let tempCopyData = JSON.parse(JSON.stringify(this.result));
let rowData = tempCopyData.find((obj) => obj.Id === rowId);
let params = {
searchTerm : event.detail.searchTerm,
selectedIds : event.detail.selectedIds,
};
searchVendors(params) // apex search method
.then((results) => {
// return search results to c-lookup
lookupElement.setSearchResults(results);
})
.catch((error) => {
console.error('Lookup error', JSON.stringify(error));
this.errors = [error];
});
}
