LWC add custom data-type checkbox and extending lightning-datatable

Question

I have a requirement where I have implemented the lightning-dataTable with the custom-dataType column checkbox.

As you can see in the screenshot, I have a requirement where

1. onCheck of the parent row(in dark-grey background) all the child rows should be selected,
2. if any child is unselected then the parent rows should be unselected, and so on...

My Component structure is as follows :

//customCheckbox component - customCheckbox.html - customCheckbox.js

//customDataTypes component extending lightning-datatable - customCheckboxRender.html - customDataTypes.html - customDataTypes.js

//parent component - parent.html - parent.js

Oncheck of the checkbox, I am not able to read the other checkboxes columns, customCheckbox.html is as follows :

I have tried the following and all are showing null, kindly refer the screenshot

1.this.template.querySelectorAll('lightning-input[data-id="a3i1y000000HLeQAAW"]') is giving null 2.this.template.querySelectorAll('[data-id="a3i1y000000HLeQAAW"]') is giving null 3.this.template.querySelectorAll('lightning-input').length is giving 0.

Can any one help me read the individual checkbox with the data-id attribute, inorder to make it checked==true or disabled or checked==false.

Answer 1

As you mentioned, you created a separate customCheckbox component, the actual id of the checkbox is located there.

But you're trying to read the checkbox id from the parent component (the one that extending lightning-datatable). It's not possible to do so due to shadow dom.

In order to get the id of the child customCheckbox component, at first you have to query the checkbox component from the parent datatable component:

const childComponent = this.template.querySelector("c-custom-checkbox");
// then call a method of the child component that will return it's id
childComponent.getId();

In the customCheckbox it's necessary to define an @api method that will return actual checkbox id, something like this:

export default class CustomCheckbox extends LightningElement {
    @api getId() {
        return id; // put the actual id here
    }
}