I'm trying to pass the information of my table after click on add button, the component should pass the value of each cell in the selected row to a child component that is a table true. i'm actually using message channel to fix this but it is no working.
<template> <lightning-card title="New Product Shipment"> <lightning-layout multiple-rows="true" vertical-align="end"> <lightning-layout-item size="8" padding="around-small"> <lightning-input type="text" label="Search Products" value={productName} onchange={handelproductName} placeholder="Product Name"> </lightning-input> </lightning-layout-item> <lightning-layout-item size="3" padding="around-small"> <lightning-button label="Search" variant="brand" onclick={getProducts}> </lightning-button> </lightning-layout-item> </lightning-layout> <lightning-layout multiple-rows="true" vertical-align="end"> <lightning-layout-item size="6" padding="around-small"> <!--tabla con productos--> <template if:true={showTables}> <table class="slds-table slds-table--bordered slds-table--cell-buffer" id="table"> <thead> <tr class="slds-text-title--caps"> <th scope="col"> <div class="slds-truncate">Products </div> </th> <th scope="col"> <div class="slds-truncate">Quantity</div> </th> <th scope="col"> <div class="slds-truncate">Add</div> </th> </tr> </thead> <tbody> <template for:each={products} for:item="product" for:index="index"> <tr key={product.Id}> <td> {product.Name} </td> <td> <div class="slds-m-bottom_large"> <lightning-input type="Number" name={index} onchange={handleChange}> </lightning-input> </div> </td> <td> <div> <lightning-button data-id={product.Id} key={product.Id} variant="brand-outline" label="Add" title="Primary action with lighter look" onclick={handleClick} name={index} disabled={Buttontrue} class="slds-m-left_x-small"></lightning-button> </div> </td> </tr> </template> </tbody> </table> <br /> <div class="slds-align_absolute-center"> <div class="slds-p-right_xx-small"> <lightning-button label="Prev" disabled={isPrev} onclick={handlePrev} variant="brand" icon-name="utility:back" name="prev"></lightning-button> </div> <span class="slds-badge slds-badge_lightest"> {recordStart}-{recordEnd} of {totalRecords} | Page {pageNumber} of {totalPages} </span> <div class="slds-p-left_xx-small"> <lightning-button label="Next" disabled={isNext} onclick={handleNext} variant="brand" icon-name="utility:forward" icon-position="right" name="next"></lightning-button> </div> </div> </template> <template if:true={isDisplay}> <div class="slds-align_absolute-center"> <br /> No records found </div> </template> </lightning-layout-item> <lightning-layout-item size="6" padding="around-small"> <template if:true={showTables}> <c-child-Table-Comp productshipments={rowData}></c-child-Table-Comp> </template> </lightning-layout-item> </lightning-layout> </lightning-card> parent js
import { LightningElement, api, track, wire} from 'lwc'; import SearchProducts from '@salesforce/apex/SearchController.SearchProducts'; import SelectedProducts from '@salesforce/messageChannel/SelectedProducts__c'; import { publish, MessageContext } from 'lightning/messageService'; export default class CreateProductShipment extends LightningElement { productShipment; @api recordId; quantity ; @track pageSize = 5; @track pageNumber = 1; @track totalRecords = 0; @track totalPages = 0; @track recordEnd = 0; @track recordStart = 0; @track isPrev = true; @track isNext = true; @track products = []; @track errors = null; @track isDisplay = false; @track value = 0; array = []; @track product; @track showChild = false; @track showTables = false; lickedButtonLabel; @track Buttontrue=true; @track test = false; @wire(MessageContext) messageContext; visibleProducts; handelproductName(event){ this.productName = event.target.value; } getProducts(){ SearchProducts({ prodName: this.productName, pageSize : this.pageSize, pageNumber : this.pageNumber }) .then(result => { if(result){ var resultData = JSON.parse(result); this.products = resultData.products; this.pageNumber = resultData.pageNumber; this.totalRecords = resultData.totalRecords; this.recordStart = resultData.recordStart; this.recordEnd = resultData.recordEnd; this.totalPages = Math.ceil(resultData.totalRecords / this.pageSize); this.isNext = (this.pageNumber == this.totalPages || this.totalPages == 0); this.isPrev = (this.pageNumber == 1 || this.totalRecords < this.pageSize); if(this.products){ if(this.products.length == 0){ this.isDisplay = true; this.showTables = false; }else{ this.isDisplay = false; this.showTables = true; } } } }) .catch(error => { this.errors = error; }); } handleNext(){ this.pageNumber = this.pageNumber+1; this.getProducts(); } handlePrev(){ this.pageNumber = this.pageNumber-1; this.getProducts(); } handleChange(event){ this.value = event.target.value if(this.value > 0){ this.Buttontrue=false; } } pdateContactHandler(event){ this.visibleProducts=[...event.detail.records] } handleClick(event) { const itemIndex = event.currentTarget.dataset.index; const rowData = this.visibleProducts[itemIndex]; publish(this.messageContext, SelectedProducts, rowData); console.log('row'+rowData); console.log(rowData.Name); } child html
<template> <lightning-card> <table class="slds-table slds-table--bordered slds-table--cell-buffer"> <thead> <tr class="slds-text-title--caps"> <th scope="col"> <div class="slds-truncate">Products </div> </th> <th scope="col"> <div class="slds-truncate">Quantity</div> </th> <th scope="col"> <div class="slds-truncate">Opportunity</div> </th> </tr> </thead> <tbody> <template for:each={productShipments} for:item="productshipment"> <tr key={productshipment.id}> <td> {productshipment.product} </td> <td> {productshipment.quantity} </td> <td> {productshipment.opportunity} </td> </tr> </template> </tbody> </table> </lightning-card> <lightning-button variant="brand" label="Save" type="submit" class="slds-m-right_x-small"> </lightning-button> </template> child js
import { LightningElement, api,wire } from 'lwc'; import { subscribe,unsubscribe,APPLICATION_SCOPE,MessageContext } from 'lightning/messageService'; import selectedProducts from "@salesforce/messageChannel/selectedProducts__c"; export default class ChildTableComp extends LightningElement { @api productShipments; subscription = null; @wire(MessageContext) messageContext; subscribeToMessageChannel() { if (!this.subscription) { this.subscription = subscribe( this.messageContext, selectedProducts, (message) => this.handleMessage(message), { scope: APPLICATION_SCOPE } ); } } unsubscribeToMessageChannel() { unsubscribe(this.subscription); this.subscription = null; } handleMessage(message) { this.productShipments = message.Name; console.log('prodd' + this.productShipments) } connectedCallback() { this.subscribeToMessageChannel(); } disconnectedCallback() { this.unsubscribeToMessageChannel(); } } 
