Lookup Field in LWC Datatable Inline Edit

public class AccountDataController {

    @AuraEnabled (cacheable=true)
    public static List<Contact> fetchContact(){
        return [SELECT Id, Name, Account.Name, AccountId, Email 
                FROM Contact LIMIT 10];       
    }
}

<template>
	<div class="lookupcontainer" id="lookup">
		<div if:true={showLookup} class="lookup-container">
			<div tabindex="0" class="container" style="position:fixed">
				<!--<lightning-record-edit-form object-api-name={object}>
                <lightning-input-field 
                    class="slds-popover slds-popover_edit slds-popover__body"
                    field-name={fieldName} 
                    value={value} 
                    variant='label-hidden'
                    onchange={handleChange}
                    data-id="input"
                    >
                </lightning-input-field>
            </lightning-record-edit-form>-->

				<lightning-record-picker label="test" placeholder="Search..." object-api-name="Account"
					onchange={handleChange} class="slds-popover slds-popover_edit slds-popover__body"
					variant='label-hidden' value={value}>
				</lightning-record-picker>
			</div>
		</div>



		<div if:false={showLookup} class="slds-table_edit_container slds-is-relative">
			<span class="slds-grid slds-grid_align-spread slds-cell-edit slds-align_absolute-center">
            <span class="slds-truncate" title={lookupName}>
                <lightning-formatted-url value={lookupValue} label={lookupName} target={target}>
                </lightning-formatted-url>
            </span>
			<button data-id={context} class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="-1"
                title="Edit" onclick={handleClick}>
                <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small"
                    aria-hidden="true">
                    <use xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg?cache=9.37.1#edit"></use>
                </svg>
                <span class="slds-assistive-text">Edit</span>
            </button>
			</span>
		</div>
	</div>
</template>

import { LightningElement, api, track, wire } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import LWCDatatablePicklist from '@salesforce/resourceUrl/LWCDatatablePicklist';
import { getRecord } from "lightning/uiRecordApi";

export default class LookupColumn extends LightningElement {
    @api value;
    @api fieldName;
    @api object;
    @api context;
    @api name;
    @api fields;
    @api target;
    @track showLookup = false;

    //get the sobject record info with fields to show as url navigation text
    @wire(getRecord, { recordId: '$value', fields: '$fields' })
    record;

    getFieldName() {
        let fieldName = this.fields[0];
        fieldName = fieldName.substring(fieldName.lastIndexOf('.') + 1, fieldName.length);
        return fieldName;
    }

   //label of formatted url
    get lookupName() {
        console.log(this.record.data);
        return (this.value != undefined && this.value != '' && this.record.data != null) ?  this.record.data.fields[this.getFieldName()].value : '';
    }

    //value of formatted url
    get lookupValue() {
        return (this.value != undefined && this.value != '' && this.record.data != null && this.record.data.fields[this.getFieldName()].value) ? '/' + this.value : '';
    }

    renderedCallback() {
        Promise.all([
            loadStyle(this, LWCDatatablePicklist),
        ]).then(() => { });

        let container = this.template.querySelector('div.container');
        container?.focus();

        window.addEventListener('click', (evt) => {
           if(container == undefined){
               this.showLookup = false;
           }
        });
    }

    /*closeLookup(event) {
        if (!event.currentTarget.contains(event.relatedTarget)) {
            this.showLookup = false;
        }
    }*/

    handleChange(event) {
        //show the selected value on UI
        this.value = event.detail.recordId;
        if(this.value == undefined){
            this.record.data = null;
        }
        //fire event to send context and selected value to the data table
        this.dispatchEvent(new CustomEvent('lookupchanged', {
            composed: true,
            bubbles: true,
            cancelable: true,
            detail: {
                data: { context: this.context, value: this.value }
            }
        }));
    }

    handleClick(event) {
        //wait to close all other lookup edit 
        setTimeout(() => {
            this.showLookup = true;
        }, 100);
    }
}

.lookup-section{
    margin-top: -0.6rem;
    margin-left: -0.5rem;
    position: absolute!important;
	z-index: 9999999999999999999999;
}

.lookup-section .slds-dropdown{
    position: fixed !important;
    max-height: 120px;
    max-width: fit-content;
    overflow: auto;
}

<template></template>

<template>
	<c-lookup-column value={typeAttributes.value} field-name={typeAttributes.fieldName}
		object={typeAttributes.object} context={typeAttributes.context} name={typeAttributes.name}
		fields={typeAttributes.fields} target={typeAttributes.target}>
	</c-lookup-column>
</template>

import LightningDatatable from 'lightning/datatable';
import lookupColumn from './lookupColumn.html';

export default class LWCLookupCustomDatatableType extends LightningDatatable {
    static customTypes = {
        lookupColumn: {
            template: lookupColumn,
            standardCellLayout: true,
            typeAttributes: ['value', 'fieldName', 'object', 'context', 'name', 'fields', 'target']
        }
    };
}

<template>
    <!-- header -->
    <div class="slds-tabs_card">
		<div class="slds-page-header">
			<div class="slds-page-header__row">
				<div class="slds-page-header__col-title">
					<div class="slds-media">
						<div class="slds-media__figure">
							<span class="slds-icon_container slds-icon-standard-opportunity">
								 <lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
                            </span>
						</div>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
									<h1>
										<span>Lookup Field In LWC Inline Datatable Edit</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
									</h1>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div> <br/>
    <!-- /header -->

    <!-- create folder card -->
    <lightning-card  variant="Narrow"  title="Lookup Field In LWC Inline Datatable Edit" icon-name="standard:folder" class="cardSpinner">
        <!-- loader -->
        <div if:true={showSpinner}>
            <lightning-spinner
                alternative-text="Loading..." variant="brand">
            </lightning-spinner>
        </div>
        <!-----/loader-------->
        <div class="slds-var-p-around_small">
            <template if:true={data}>
                <c-l-w-c-lookup-custom-datatable-type 
                    class="slds-max-medium-table_stacked"
                    key-field="Id" 
                    data={data} 
                    columns={columns} 
                    onlookupchanged={lookupChanged} 
                    onvalueselect={handleSelection}
                    draft-values={draftValues} 
                    oncellchange={handleCellChange}
                    onsave={handleSave}
                    oncancel={handleCancel}
                    hide-checkbox-column>
                </c-l-w-c-lookup-custom-datatable-type>
            </template>
        </div>
    </lightning-card>
</template>

import { LightningElement, track, wire } from 'lwc';
import fetchContact from '@salesforce/apex/AccountDataController.fetchContact';
import { updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';

const columns = [
    { label: 'Name', fieldName: 'Name', editable: true },
    { label: 'Email', fieldName: 'Email', type: 'email', editable: true },
    {
        label: 'Account Name',
        fieldName: 'AccountId', //lookup API field name 
        type: 'lookupColumn',
        typeAttributes: {
            object: 'Contact', //object name which have lookup field
            fieldName: 'AccountId',  //lookup API field name 
            value: { fieldName: 'AccountId' },  //lookup API field name 
            context: { fieldName: 'Id' }, 
            name: 'Account',  //lookup object API Name 
            fields: ['Account.Name'], //lookup objectAPIName.Name
            target: '_self'
        },
        editable: false,
    },
    /*{
        label: 'User',
        fieldName: 'User__c',
        type: 'lookupColumn',
        typeAttributes: {
          object: 'Contact',
          fieldName: 'User__c',
          value: { fieldName: 'User__c' },
          context: { fieldName: 'Id' },
          name: 'User',
          fields: ['User.Name'],
          target: '_self'
        },
        editable: false,
      }*/ //Note : If you have custom field then you can use this
]

export default class LWCDatatableWithLookup extends LightningElement {
    columns = columns;
    showSpinner = false;
    @track data = [];
    @track contactData;
    @track draftValues = [];
    lastSavedData = [];

    //here I pass picklist option so that this wire method call after above method
    @wire(fetchContact, {})
    wireData(result) {
        this.contactData = result;
        if (result.data) {
            this.data = JSON.parse(JSON.stringify(result.data));
            console.log(this.data);
            this.data.forEach(ele => {
                ele.accountLink = ele.AccountId != undefined ? '/' + ele.AccountId : '';
                ele.accountName = ele.AccountId != undefined ? ele.Account.Name : '';
            })

            this.lastSavedData = JSON.parse(JSON.stringify(this.data));

        } else if (result.error) {
            console.log(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];
        }
    }

    //listener handler to get the context and data
    //updates datatable, here I used AccountId you can use your look field API name
    lookupChanged(event) {
        console.log(event.detail.data);
        event.stopPropagation();
        let dataRecieved = event.detail.data;
        let accountIdVal = dataRecieved.value != undefined ? dataRecieved.value : null;
        let updatedItem = { Id: dataRecieved.context, AccountId: accountIdVal  };
        console.log(updatedItem);
        this.updateDraftValues(updatedItem);
        this.updateDataValues(updatedItem);
    }

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

    handleSave(event) {
        this.showSpinner = true;
        this.saveDraftValues = this.draftValues;

        const recordInputs = this.saveDraftValues.slice().map(draft => {
            const fields = Object.assign({}, draft);
            return { fields };
        });

        // Updateing the records using the UiRecordAPi
        const promises = recordInputs.map(recordInput => updateRecord(recordInput));
        Promise.all(promises).then(res => {
            this.showToast('Success', 'Records Updated Successfully!', 'success', 'dismissable');
            this.draftValues = [];
            return this.refresh();
        }).catch(error => {
            console.log(error);
            this.showToast('Error', 'An Error Occured!!', 'error', 'dismissable');
        }).finally(() => {
            this.draftValues = [];
            this.showSpinner = false;
        });
    }

    handleCancel(event) {
        //remove draftValues & revert data changes
        this.data = JSON.parse(JSON.stringify(this.lastSavedData));
        this.draftValues = [];
    }

    showToast(title, message, variant, mode) {
        const evt = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
            mode: mode
        });
        this.dispatchEvent(evt);
    }

    // This function is used to refresh the table once data updated
    async refresh() {
        await refreshApex(this.accountData);
    }
}

.cardSpinner{
    position: relative;
}

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>54.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>