How to use the Lookup field in Lightning DataTable?

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.

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.

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

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

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

Here is the code for custom file upload