LWC datatable with editable cells that are lookup

apexlightning-datatablelightning-web-componentslookup

I am designing a LWC component that looks like below:

enter image description here

Here, I will use an Apex Wrapper to get the data for this table.

The wrapper stores the following info:

  1. Account Id [ex – Id of Account 1]
  2. Pattern Id [ ex – Id of Pattern 1]
  3. Pattern Name [ Name – Patter 1 ]
  4. Start Week [ ex July 10th ]

The above data is stored in a custom object that supports this UI. If no patterns is returned then I leave the cell blank as you see for Account 2 AND July 10. So that user can search the pattern using the lookup filter and set it here.

I am thinking to use a data table to implement this. However, what I am not sure about is how can I use a lookup component inside a data table? Is this even possible any better way to do it? PLease suggest if even should be using a datatable in this case or not.

Best Answer

You can use a datatable but in order to get a lookup inside a datatable like you've described, you will have to create a custom datatype.

Be sure to also check "Customize Data Type Layout and Styles"

The custom datatype will contain the lookup input in the manner you decide to implement (be it a custom lookup component, or a lightning-input of type "search", or a lightning-input-field inside a lightning-record-edit-form, etc...).

You will also have to implement a way to get the lookup value after the user enters it.

Related Topic