Inline Editing Lookup field in Lightning Data table

Question

I have a lightning data table displaying set of Account Records. Also it have inline editing set true for all the columns.

Is it possible to have Account name field to behave like a lookup field and not a normal text field while editing.

Note: I already have a custom lookup component.(in lwc). all I need is guidance how to implement the lookup field inside the lightning datable.

My Cmp code.

   <div style="height: 500px">
    <lightning:datatable aura:id="acctList"
                         keyField="Id"
                         columns="{! v.columns }"
                         data="{! v.filteredData }"
                         hideCheckboxColumn="true"
                         sortedBy="{!v.sortBy}"
                         sortedDirection="{!v.sortDirection}"
                         onsort="{!c.handleSort}"
                         onsave="{! c.onSave }"/>
</div>

Controller code:

    doInit : function(component, event, helper) {
    component.set('v.columns', [
       
        {label: 'Account Name', fieldName: 'linkName', type: 'url',sortable : true,editable: true,typeAttributes: {label: { fieldName: 'Name' }, target: '_blank',tooltip: { fieldName: 'Name' }}},
        {label: 'Account Owner', fieldName: 'OwnerName', type: 'url',sortable : true,editable: true,typeAttributes: {label: { fieldName: 'OwnerName' }, target: '_blank',tooltip: { fieldName: 'OwnerName' }}},
        {label: 'Phone', fieldName: 'Phone',  type: 'Phone',editable: true},
        {label: 'Website', fieldName: 'Website',  type: 'url',editable: true},
        {label: 'Annual revenue', fieldName: 'AnnualRevenue', type: 'currency',editable: true},
    ]);
helper.onLoadAcc(component, event, helper);
},

Helper:

  onLoadAcc : function(component,event,helper) {
    var action = component.get("c.getAccounts");
    action.setCallback(this, function(resp) {
        if (resp.getState() == 'SUCCESS') {
            var rows = resp.getReturnValue();
            console.log("Account Values"+ JSON.stringify(rows));
            rows.forEach(function(record){
                record['OwnerName'] = record.Owner.Name;
            });
                rows.forEach(function(record){
                record.linkName = '/'+record.Id;
            });
            component.set('v.data', rows );
            component.set('v.filteredData', rows );
        }
        
    }) ;    
    $A.enqueueAction(action);
},

Answer 1

Sfdcpanther has the answer! With a full walkthrough of how to extend the lightning data table into a custom component so that you can put in your own components, or use the examples they gave.

At a high level, you can extend the lightning data table component into a custom lwc, build in your custom types that point to separate lwc's, such as a lookup type that points to a lwc-lookup component.

export default class ExtendedDataTable extends LightningDatatable

static customTypes = {
    lookup : {
        template: lookupTemplate,
        typeAttributes: ['object', 'icon', 'label', 'placeholder', 'fields', 'displayFields', 'valueId', 'valueName','currentRecordId'],
    }
};

Then generate a new html file named lwclookup inside your extended component that instantiates your custom component for lookups as outlined by this sfdcpanther article.

For an example, here is the direct link to the github repo