0

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);
},

enter image description here

0

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.