[SalesForce] LWC Datatable – Turn Custom Lookup Field Value in Editable Datatable to Draft Value for Mass Update

As you know, datatables do not support lookup field. I've built a search lookup field that queries an object, and added that to the LWC datatable as a custom type.

The id of the selected record (Product Name column in the image below) is propagated to the datatable component
I'm trying to turn that id into a draft value so I can mass update both product name and quantity (refer to image below) using the save function.

Anyone has done something similar before? Willing to share your solution or code snippet, specifically for Lightning Web Component? Anything is helpful at this point.

Image Reference

Appreciate any help on this matter. Thanks all.

Best Answer

You need to update draft values while updating the lookup. Please check https://live.playg.app/play/lookup-in-lightning-datatable-lwc

Related Solutions

[SalesForce] Filter LWC DataTable

You need a separate variable to show the filtered results. I wrote a complete example in this playground.

<template>
    <lightning-card title="Filters">
        <div class="slds-align_absolute-center">
    <template for:each={alphabet} for:item="letter">
        &nbsp;<a onclick={handleFilterChange} key={letter} data-filter={letter}>
            {letter}
        </a>
        &nbsp;|
    </template>
    <a onclick={handleFilterChange} data-filter="">
        ALL
    </a>
        </div>
    <lightning-datatable 
        columns={columns}
        data={currentPage}
        key-field="index">
    </lightning-datatable>
    <div class="slds-align_absolute-center">
    <lightning-button-group>
    <lightning-button label="First" onclick={firstPage}>
    </lightning-button>
    <lightning-button label="Previous" onclick={previousPage}>
    </lightning-button>
    <div class="slds-m-horizontal_medium slds-align_absolute-center">
    {pageNumber} of {maxPageNumber}
    </div>
    <lightning-button label="Next" onclick={nextPage}>
    </lightning-button>
    <lightning-button label="Last" onclick={lastPage}>
    </lightning-button>
    </lightning-button-group>
    </div>
    </lightning-card>
</template>

import { LightningElement } from "lwc";

const NAMES = [
  "Noah", ...
   // Top 2k baby names of 2016 //
];

export default class App extends LightningElement {
  filteredResults = [];
  currentLetter;
  pageNumber = 1;
  pageSize = 10;
  columns = [
      { fieldName: 'name', label: 'Name', type: 'text' }
  ];
  alphabet;
  connectedCallback() {
      this.alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
      this.handleFilterChange();
  }
  nextPage() {
    this.pageNumber = Math.min(
      this.pageNumber + 1,
      this.maxPageNumber
    );
  }
  previousPage() {
    this.pageNumber = Math.max(1, this.pageNumber - 1);
  }
  firstPage() {
    this.pageNumber = 1;
  }
  lastPage() {
    this.pageNumber = this.maxPageNumber;
  }
  get maxPageNumber() {
    return Math.floor(
      (this.filteredResults.length + (this.pageSize - 1)) / this.pageSize
    );
  }
  get currentPage() {
    return this.filteredResults.slice(
      (this.pageNumber - 1) * this.pageSize,
      this.pageNumber * this.pageSize
    ).map((name,index)=>({ key: index, name }));
  }
  handleFilterChange(event) {
    if(event) {
        this.currentLetter = event.target.dataset.filter;
    }
    if (this.currentLetter) {
      this.filteredResults = NAMES.filter((name) =>
        name.startsWith(this.currentLetter)
      );
    } else {
      this.filteredResults = [...NAMES];
    }
    this.filteredResults.sort((a,b)=>a<b?-1:1);
    this.pageNumber = 1;
  }
}

LWC – dynamically update a datatable column to editable

When dealing with objects, there are two ways LWC knows that a render cycle needs to occur. First, when oldValue !== newValue, which is a memory-address type comparison, a render cycle is automatically triggered, and second, you can use the @track decorator in order to tell LWC that it needs to perform a deep comparison of objects, which will then trigger a render cycle. So, the two main ways you can fix this problem are to either copy the current object, or use track. You do not need to use both, either will suffice.

@track

import { LightningElement, track } from 'lwc'

...

@track columns = [... // omitted for brevity

Copy Array

this.columns[5].editable = true
this.columns = [...this.columns]; // shallow copy array, trigger render