How to use lookup fields using RegExp for search bar in LWC data-table?

Question

Here's the link to the similar question How to filter Data in dataTable lwc based on the input in search bar?

The above works fine with non-lookup fields but doesn't seem to be working in my case.

If I use regex.test(row.Name), I'm able to search the records based on Name column however, one of my columns has fieldName: Owner.Name and the search isn't working.

Error: [Cannot read properties of undefined (reading 'Name')]

.js code snippet:

updateSearch(event) {
     var regex = new RegExp(event.target.value, 'i')
     this.data = this.testSearch.filter(
        row => regex.test(row.Owner.Name) 
     );      

Any idea on above?

Answer 1

Instead of using Owner.Name as a fieldName in Columns do this:

Old format:

{ label: 'Owner', fieldName: 'Owner.Name'}

New format:

{ label: 'Owner', fieldName: 'Owner'}

and Update the code to include Owner.Name in your array of columns like below:

this.data = data.map((row) => ({ Owner: row.Owner.Name }));

this will make the search method as:

updateSearch(event) {
     var regex = new RegExp(event.target.value, 'i')
     this.data = this.testSearch.filter(
        row => regex.test(row.Owner) 
     );
}

This is working fine for me.