Hi,

I am new to lwc and java script and I am currently working on a feature to display a list of records with inline edit from an object in a lightning page.
The list of records need to be displayed in different sections based on a picklist field on the same object and when a user updates the picklist field value on any of the records, the table must be refreshed based on the picklist values.

I tried doing this with two different datatables and I am unable to refresh all the tables when a user makes an update. Below is my code.

Any help is greatly appreciated.

Apex Class:

public with sharing class ContactController {
    @AuraEnabled(cacheable = true)
    public static List<Contact> getWebContactList(){
        return [SELECT Id, FirstName, LastName, Title, Phone, Email, LeadSource FROM Contact where LeadSource =: 'Web' LIMIT 10];
    }
    @AuraEnabled(cacheable = true)
    public static List<Contact> getPhoneContactList(){
        return [SELECT Id, FirstName, LastName, Title, Phone, Email, LeadSource FROM Contact where LeadSource =: 'Phone Inquiry' LIMIT 10];
    }
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
        return [SELECT Id, FirstName, LastName, Title, Phone, Email, LeadSource FROM Contact where (LeadSource =: 'Phone Inquiry' OR LeadSource =: 'Web') LIMIT 10];
    }
}

JS Controller:

import { LightningElement, wire, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';
import getWebContactList from '@salesforce/apex/ContactController.getWebContactList';
import getPhoneContactList from '@salesforce/apex/ContactController.getPhoneContactList';
import { updateRecord } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName';
import ID_FIELD from '@salesforce/schema/Contact.Id';
import LEADSOURCE_FIELD from '@salesforce/schema/Contact.LeadSource';

const COLS = [
    { label: 'First Name', fieldName: 'FirstName', editable: true },
    { label: 'Last Name', fieldName: 'LastName', editable: true },
    { label: 'Lead Source', fieldName: 'LeadSource', editable: true },
    { label: 'Title', fieldName: 'Title' },
    { label: 'Phone', fieldName: 'Phone', type: 'phone' },
    { label: 'Email', fieldName: 'Email', type: 'email' }
];
export default class DatatableUpdateExample extends LightningElement {
    @track contacts;
    @track error;
    @track columns = COLS;
    @track draftValues = [];
    wiredContactResult;
    @wire(getContactList)
    wiredContacts(result) {
        this.wiredContactResult = result;
        if(result.data) {
            this.contacts = result.data;
            this.error = undefined;
        } else if (result.error) {
            this.error = result.error;
            this.contacts = undefined;
        }
    }
    
    @wire(getWebContactList)
    webContact;
    @wire(getPhoneContactList)
    phoneContact;
    handleSave(event) {
        const recordInputs =  event.detail.draftValues.slice().map(draft => {
            const fields = Object.assign({}, draft);
            return { fields };
        });
    
        const promises = recordInputs.map(recordInput => updateRecord(recordInput));
        
        Promise.all(promises).then(contacts => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Contacts updated',
                    variant: 'success'
                })
            );
             // Clear all draft values
             this.draftValues = [];
    
             // Display fresh data in the datatable
             return refreshApex(this.phoneContact);
        }).catch(error => {
            // Handle error
        });
    }   
    handleWebSave(event) {
        const recordInputs =  event.detail.draftValues.slice().map(draft => {
            const fields = Object.assign({}, draft);
            return { fields };
        });
    
        const promises = recordInputs.map(recordInput => updateRecord(recordInput));
        
        Promise.all(promises).then(contacts => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Contacts updated',
                    variant: 'success'
                })
                
            );
            
             // Clear all draft values
             this.draftValues = [];
            
             // Display fresh data in the datatable
             return refreshApex(this.webContact);
             
        }).catch(error => {
            // Handle error
        });
    }
}

HTML:

<template>
    <lightning-card title="Datatable Example" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <template if:true={webContact.data} >
                <lightning-datatable
                    key-field="Id"
                    data={webContact.data}
                    columns={columns}
                    onsave={handleWebSave}
                    draft-values={draftValues}>
                </lightning-datatable>
            </template>
            <template if:true={webContact.error}>
                <!-- handle Apex error -->
            </template>
        </div>
        <div class="slds-m-around_medium">
            <template if:true={phoneContact.data}>
                <lightning-datatable
                    suppressbottombar = "false"
                    key-field="Id"
                    data={phoneContact.data}
                    columns={columns}
                    onsave={handleSave}
                    draft-values={draftValues}>
                </lightning-datatable>
            </template>
            <template if:true={phoneContact.error}>
                <!-- handle Apex error -->
            </template>
        </div>
    </lightning-card>
</template>