Hello #Trailblazers,

We all know that Salesforce standard Lightning DataTable is the best table that we can use to display the record and it also does support the in-line editing.

There are some limitations of the Standard lightning datatable like we can not have a lookup field, Picklist field or event some file upload for every column.

In this blog post, I will show you how you can create a custom data type to show lookup, picklist, or anything that you wanted to have.

Complete Code

The complete code for the blog post can be found here.

Step1 – Create a new Lightning Web Component

In this step, we will create a lightning web component which will extend the LightningDatatable like below

export default class ExtendedDataTable extends LightningDatatable {
}

Extending LightningDatatable will help us to create our own Lightning DataTable Data Type

Step2 – Create a Custom DataType for Custom Lookup

Now, as you have created the new component, in the js file of the same component create a custom datatype like below.

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

In the above example, I have defined the data type for the picklist and custom lookup.

Step3 – Create a new html file inside the Same Web Component

Now, you need to create the .html file inside the same Web Component. here is the sample code which is using a search component which is actually used for custom Lookup

<template>
    <div class="lookup-container" >
        <div class="picklist-container" >
            <c-search-component
                obj-name={typeAttributes.object}
                icon-name={typeAttributes.icon}
                label-name={typeAttributes.label}
                placeholder={typeAttributes.placeholder} 
                fields={typeAttributes.fields}
                display-fields={typeAttributes.displayFields}
                value-id={typeAttributes.valueId}
                value-name={typeAttributes.valueName}
                current-record-id={typeAttributes.currentRecordId} >
            </c-search-component>
        </div>
    </div>
</template>

You can get the complete code for the Search Component from here

Step4 – Prepare the Custom Lookup Columns for DataTable

Now, we need to create a new Lighting Web Component which will be using the component which we have created on the top.

Once you have created the component, you need to prepare the columns for data table like below

{
    label: 'Parent', fieldName: 'ParentId', type: 'lookup', typeAttributes: {
        object: "Account", // Parent Object Name
        icon: "standard:account", // the icon to display
        label: "Account", // Label to Display
        placeholder: 'Select Parent Account',
        fields: ["Name", "Rating", "AccountNumber"], // Fields to Query
        displayFields : 'Name, Rating, AccountNumber', // Fields to Display on the dropdown
        valueId: { fieldName: 'ParentId' }, // send the field API name which contains the value of Parent Id if value is not null
        valueName : { fieldName: 'PARENT_NAME' }, // send the field API name which contains the value of Parent record name if value is not null
        currentRecordId : { fieldName: 'Id' }, // Send the field API name which contains the record Id for current row
    }
}

The above code contains the column for custom lookup using our new component & data type that we have created.

Here is the code for Custom Picklist

{
    label: 'Rating', type: 'picklist', fieldName: 'Rating', sortable: true, typeAttributes: {
        label : 'Choose Rating',
        placeholder: 'Choose rating', 
        options: [
            { label: 'Hot', value: 'Hot' },
            { label: 'Warm', value: 'Warm' },
            { label: 'Cold', value: 'Cold' },
        ],
        parentrecord: { fieldName: 'Id' } // Send the field API name which contains the record Id for current row
    }
}

Here is the code for custom file upload

{ 
    label: 'Upload Document', type: 'fileUpload', fieldName: 'Id', 
    typeAttributes : {
        acceptedFormats : '.jpg,.jpeg,.pdf,.png',
        doUpload : {
            fieldName   : 'UPLOAD_FILE'
        }
    } 
}

Step5 – Put Everything together and test it

Here is the Complete code for the setup

https://github.com/amitastreait/Salesforce-Short-Hands/tree/master/sfdxsrc/lightningDataTable

Thanks for reading 🙂