Fire datatable event based on cutom lookup record selection in salesforce LWC - salesforce-lightning

Question

I have custom reusablelookup component, datatable component. If and only if I select some record in lookup, only corresponding results must be displayed in datatable. If no record is selected in lookup, datatable should display 0 records.(I am struck here "how to fire event from one to other or connecting these both components")
I have used reusable lookup component from here..https://www.sfdcpanther.com/custom-lookup-in-lightning-web-component/
Datatable JS
#wire(getProvider)
wireddata({ error, data }){
if (data)
{ var ObjData = JSON.parse(JSON.stringify(data));
ObjData.forEach(record => {
record.AccountName = record.ProviderId__r != undefined ? record.ProviderId__r.Name:'';
record.AccountPhone = record.ProviderId__r != undefined ? record.ProviderId__r.NPI__c: '';
record.AccountManager = record.ProviderId__r != undefined ? record.ProviderId__r.FedId__c: '';
record.AccountAddress1 = record.ProviderId__r != undefined ? record.ProviderId__r.LicenceId__c: '';
record.AccountAddress2 = record.ProviderId__r != undefined ? record.ProviderId__r.MedicareOscarNumber__c: '';
});
//alert('After====> '+ JSON.stringify(ObjData));
this.allRecords = ObjData;
this.showTable = true;
}
else if (error) {
this.error = error;
this.data = undefined;
}
}
Datatable HTML
<template if:true={showTable}>
<c-lwc-datatable-utility records={allRecords}
total-records={allRecords.length}
columns = {columns}
key-field="Id"
show-search-box="true"
onrowaction={handleRowAction}
onpaginatorchange={handlePaginatorChange}
table-height="200">
</c-lwc-datatable-utility>
</template>
Lookup JS
fields = ["Provider_Name_API__c","NPI__c","FedId__c"];
displayFields = 'Provider_Name_API__c, NPI__c, FedId__c'
handleLookup(event){
console.log( JSON.stringify ( event.detail) )
}
lookup HTML
<p class="slds-p-horizontal_small">
<c-search-component
obj-name="ProviderEntity__c"
icon-name="standard:contact"
label-name="Provider Search"
placeholder="Search"
fields={fields}
display-fields={displayFields}
onlookup={handleLookup}
onchange={handleChange} >
</c-search-component>
</p>

Answer 1

So you have two independent components: a DataTable component and a LookUp Component. Based on a value that will be selected in the LookUp component, the DataTable should react and display some rows.
Because the two components are independent, you have two ways of communicating both components:
Using the Lightning Message Service (more info here https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_message_channel). You should create a new channel to which your DataTable component would subscribe. The LookUp component should publish some event to the Channel when the value is selected and the DataTable component would receive it and react accordingly
The second way to achieve the communication would be to create a parent component that would contain both components (the DataTable one and the LookUp one). Then, the parent component would listen to a CustomEvent fired by the LookupElement (https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_create_dispatch) and then react accordingly (maybe changing some parameter on the table or even just changing the "records" attribute). As an example, I've created some components that display the idea. I have not used exactly your lookup to simplify but the idea for the communication would be the same. In my case, the "c-custom-picklist" is acting as your Lookup component and the "c-custom-text-area" is acting as your DataTable Component. c-parent-component communicates both components:
Parent Component HTML:
<template>
<c-custom-picklist oncolor={handleColorChange}></c-custom-picklist>
<c-custom-text-area selected-color={selectedColor}></c-custom-text-area>
</template>
Parent Component JS:
import { LightningElement } from "lwc";
export default class ParentComponent extends LightningElement {
selectedColor = "No Color Selected";
handleColorChange(event) {
this.selectedColor = event.detail;
}
}
Picklist Component HTML:
<template>
<lightning-combobox
label="Select a Color"
placeholder="Select a Color"
options={options}
onchange={handleChange}
></lightning-combobox>
</template>
Picklist component JS:
import { LightningElement } from "lwc";
export default class CustomPicklist extends LightningElement {
options = [
{ value: "Red", label: "Red" },
{ value: "Blue", label: "Blue" },
{ value: "Pink", label: "Pink" }
];
handleChange(event) {
let selectedColor = event.detail.value; //Selected Color
this.dispatchEvent(new CustomEvent("color", { detail: selectedColor }));
}
}
Text Area HTML:
<template>
<textarea>
The selected color is: {selectedColor}
</textarea
>
</template>
Text Area JS:
import { LightningElement, api } from "lwc";
export default class CustomTextArea extends LightningElement {
#api selectedColor;
}