0

I have one parent and one reusable child component. The child component contains a data-table with check box column. The parent component has many data-table>>child components. On the button click event, I need to get each data-table selected rows. I used the below syntax on button click but always get null or error "this.template.querySelector(...).getSelectedRows is not a function"

Parent-Component

 <template>
      <div class="slds-var-m-around_medium">
        <template if:true={accountData.length}>
          <c-reusable-data-table
            data-id="overview"
            card-title="Account list"
            source-data={accountData}
            hide-checkbox="false"
            columns={accountColumns}
          ></c-reusable-data-table>
        </template>
      </div>
    </template>

Rendered HTML

enter image description here

Button click event

  handleSync() {
    debugger;
    var selectedRecords = this.template
      .querySelector("c-reusable-data-table")
      .getSelectedRows();

    console.log("selectedRecords are ", selectedRecords);

  }

How to get reusable child component selected records on the parent component button click event?

0

You need to expose on child component an api method which will contain the querySelector method and will return the selected rows to parent component.

This trailhead might be useful to you.

child

@api getRows() {
    return this.template.querySelector("lightning-datatable")
      .getSelectedRows();
}

then in your parent you can call this method on the c-reusable-data-table.

 this.template
      .querySelector("c-reusable-data-table")
      .getRows();

The reason why your solution is not working is that on the custom component there is not getSelectedRows method. This method is only on the datatable standard component.

1
  • thanks for your reply! I need one more help. Each time the child component checkbox is changed, the parent component needs to know, how total records are selected? On each change, I think your getRows() method fire resolve the issue. how to do that?
    – shamim
    Sep 27 at 11:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.