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 the 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 uses 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 the 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 the Custom Picklist
Here is the code for the custom file upload
