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"


      <div class="slds-var-m-around_medium">
        <template if:true={accountData.length}>
            card-title="Account list"

Rendered HTML

enter image description here

Button click event

  handleSync() {
    var selectedRecords = this.template

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


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

1 Answer 1


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.


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

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


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.

  • 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
    Commented Sep 27, 2021 at 11:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .