Get child component(lightning-datatable) getSelectedRows() on parent component button event

lightning-datatablelightning-web-components

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

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?

Best Answer

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.

parentComponent.html

<template>
    <lightning-combobox name="progress" label="Status in Parent" value={value} placeholder="Select Progress" options={options} onchange={handleChange} >
    </lightning-combobox>

    <hr></hr>
    <c-child-component value-from-parent={value}></c-child-component>
</template>

parentComponent.js

import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    value = 'inProgress';

    get options() {
        return [
            { label: 'New', value: 'new' },
            { label: 'In Progress', value: 'inProgress' },
            { label: 'Finished', value: 'finished' },
        ];
    }

    handleChange(event) {
        this.value = event.detail.value;
        this.template.querySelector('c-child-component').handleChange(this.value);
    }
}

childComponent.html

<template>
    <lightning-combobox name="progress" label="Status in Child" value={value} placeholder="Select Progress"
            options={options} onchange={handleChange} >
    </lightning-combobox>

    <hr></hr>
    The value from Parent is {valueFromParent}

    <hr></hr>
    <c-grand-child-component value-from-child={value}></c-grand-child-component>
    
</template>

childComponent.js

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    value = 'inProgress';
    @api valueFromParent;

    get options() {
        return [
            { label: 'New', value: 'new' },
            { label: 'In Progress', value: 'inProgress' },
            { label: 'Finished', value: 'finished' },
        ];
    }

    @api
    handleChange(valueFromParent) {
        this.value = valueFromParent;
        this.template.querySelector('c-grand-child-component').handleChange(valueFromParent);
    }
}

grandChildComponent.html

<template>
    <lightning-combobox name="progress" label="Status in Grand Child"
            value={value} placeholder="Select Progress" options={options} onchange={handleChange} >
    </lightning-combobox>

    <hr></hr>
    The value from Parent is {valueFromChild}
</template>

grandChildComponent.js

import { LightningElement, api } from 'lwc';

export default class GrandChildComponent extends LightningElement {
    value = 'inProgress';

    @api valueFromChild;

    get options() {
        return [
            { label: 'New', value: 'new' },
            { label: 'In Progress', value: 'inProgress' },
            { label: 'Finished', value: 'finished' },
        ];
    }

    @api
    handleChange(valueFromParent) {
        this.value = valueFromParent;
    }
}

Demo Video

[SalesForce] Can we detect when an LWC lightning-datatable ENTERS inline edit mode

Update: This answer describes how to use the keyboard events to solve the problem. However, as pointed out by @ministe2003 in the comment, onchange event seems to work too and the below mentioned solution can be used with onchange event instead of onkeyup event.

Standard DOM keyboard events such as onkeyup, onkeydown & onkeypress seem to work in lightning-datatable, although this has not be explicitly documented in the LWC developer guide (or the Component Reference).

I don't know if there was a specific reason why Salesforce chose to leave out these events in their documentation or if they may (or may not) be supported in future or if they might not work consistently as expected. I've only tried them in the Lightning playground and they worked fine. So, I'm going to assume that it should work fine in an actual SF org too. I would encourage you to adopt this at your discretion and to perform a thorough testing to ensure it works properly.

In the HTML file of the child component, define the key event, as shown in the sample snippet below:

<lightning-datatable
        key-field="id"
        data={data}
        columns={columns} 
        onkeyup={handleKeyUp}>
</lightning-datatable>

And, the corresponding JS method code snippet should something like this:

handleKeyUp(event){
    // Write additional code to identify the key pressed from the key code, if required
    constant tableEditedEvent = new CustomEvent('tableedit');
    this.dispatchEvent(tableEditedEvent);
}

In the parent component, handle the ontableedit event and disable the appropriate button element.

This may not be the best possible solution (with good user experience), but in lack of better in-built alternatives with lightning-datatable, this should get your work done. You will have to get a bit creative in writing code to identify the key pressed (by key code) and avoid disabling the parent component button, when not needed. Additionally, if the user edited a cell and reverted the changes immediately before moving the focus from the current cell, the parent component button would already be disabled by the custom event dispatched by keyUp event handler. So, you will have to write code in the oncellchange event handler to check if no changes are found in the draftValues property (and/or additional custom properties) and re-enable the parent component button. This piece of code will execute only after the user clicks on the disabled button or elsewhere on the web page, but will re-enable the button immediately. This would become a minor or major inconvenience to user, depending on how business looks at this. You could provide alternatives like a checkbox (with label as No change in data - Enable the button) and educate user to click the checkbox, when needed.