'selectAllCheckbox' and 'selectAllCheckboxSomeSelected' Table properties are not working and throwing error

[AmirHussain93]

Detailed description

Describe in detail the issue you're having.

I have a requirement to show rows as selected by default and if all rows are selected, then the selectAllCheck should also be checked. I can show rows in the selected state but the parent checkbox (which is the select all checkbox is not getting selected).

Is this a feature request (new component, new icon), a bug, or a general issue?
bug

Is this issue related to a specific component?
Yes, Table component (Expansion)

What did you expect to happen? What happened instead? What would you like to see changed?
If all rows are selected then selectAllCheckBox should also be selected

What browser are you working in?
chrome

What version of the Carbon Design System are you using?
5.26.2

Please find the screenshots attached below

@Akshat55 @peterblazejewicz @kant @rapzo @cduran @Ratheeshrajan Could you please look into this and let me know if I am making any mistakes?

According to below link we can add this right ?
https://github.com/carbon-design-system/carbon-components-angular/blob/master/src/table/table.component.ts#L193

[AmirHussain93]

I am able to reproduce the same

Please check this code sandbox

https://codesandbox.io/p/devbox/dawn-worker-y57wdn?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A82%2C1&workspaceId=6f3ad2bd-a8d6-4cb2-a6f6-884c976cbf36

cc: @Akshat55 @peterblazejewicz @kant @rapzo @cduran

[Akshat55]

Hey @AmirHussain93, this is correct. selectAllCheckbox and selectAllCheckboxSomeSelected are NOT input properties. If you want to select all of the checkboxes, then you would have to use the model. The model is the best way to control the entire table.

You can achieve this as such:

this.model.selectAll();

[AmirHussain93]

@Akshat55 I am unable to achieve this even after using this.model.selectAll();. Can you please check the sandbox which I have shared?

https://codesandbox.io/p/devbox/dawn-worker-y57wdn?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A87%2C1&workspaceId=6f3ad2bd-a8d6-4cb2-a6f6-884c976cbf36

[Akshat55]

@AmirHussain93 You need to make your sandbox public, we do not have permission to access it:

[AmirHussain93]

@Akshat55 please check now https://codesandbox.io/p/live/26363ed2-48dc-4300-ad2b-aae4ca61bc43

[AmirHussain93]

@Akshat55 any update on this? Did you get a chance to look into the code sandbox I shared in the above comment

[Akshat55]

@AmirHussain93 I still cannot open it, could you perhaps copy over your changes to stackblitz? We are slowly starting to move away from codesandbox due to these reasons.

[AmirHussain93]

@Akshat55 please check now https://codesandbox.io/p/devbox/dawn-worker-y57wdn?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A45%2C18&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clv59aahp00063b6i9lcxqyfv%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clv59aaho00023b6ia9d9lsyg%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clv59aaho00043b6ic05qgei0%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clv59aaho00053b6izc98ctbj%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B52.89519397799653%252C47.10480602200347%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clv59aaho00023b6ia9d9lsyg%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv59aaho00013b6i0tzed0ir%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clx3b0e6p00023b6io8r4na9a%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A45%252C%2522startColumn%2522%253A18%252C%2522endLineNumber%2522%253A45%252C%2522endColumn%2522%253A18%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fapp%252Fapp.component.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clv59aaho00023b6ia9d9lsyg%2522%252C%2522activeTabId%2522%253A%2522clx3b0e6p00023b6io8r4na9a%2522%257D%252C%2522clv59aaho00053b6izc98ctbj%2522%253A%257B%2522id%2522%253A%2522clv59aaho00053b6izc98ctbj%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A4200%252C%2522id%2522%253A%2522clwrcukj500133b6jvfne35qr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clwrcukj500133b6jvfne35qr%2522%257D%252C%2522clv59aaho00043b6ic05qgei0%2522%253A%257B%2522id%2522%253A%2522clv59aaho00043b6ic05qgei0%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv59aaho00033b6ikrzvyvep%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%257D%252C%257B%2522id%2522%253A%2522clx342lvd00hz3b6ipoc4sz6k%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clx342m0o01nvdiie8kx16l0u%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clv59aaho00033b6ikrzvyvep%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A20.324074074074076%257D

[AmirHussain93]

@Akshat55 I guess you are able to access now

[Akshat55]

@AmirHussain93 - Yes I have access now, seems like the data is being set before the subscription that listens for table checkbox change starts listening. Should be a simple fix where we call updateSelectAllCheckbox after AfterViewInit. I'll make a PR but this is going to be merged next week Tuesday.

[AmirHussain93]

@Akshat55 any update on this?

[Akshat55]

My colleague hasn't had the chance to review this unfortunately, but you can do the following which works:

 ngOnInit(): void {
    this.model.header = this.list.map((item) => {
      return new TableHeaderItem({
        data: item.data,
        sortable: item.sorted,
      });
    });
    this.setTableData();
  }

  ngAfterViewInit() {
    this.model.selectAll();
  }

  setTableData() {
    this.model.data = [];
    const listData = new Array<any>();

    this.data.forEach((item) => {
      const arr = [
        new TableItem({ data: item.id }),
        new TableItem({ data: item.name }),
      ];

      listData.push(arr);
    });
    this.model.data = listData;
  }

After testing the above, it makes me wonder if we actually need a PR to address this. You can set the data in ngOnInit and then selectAll AFTER view is initialized. You can even keep this.model.selectAll();, in ngOnInit and wrap it in a setTimeout.

[github-actions]

🎉 This issue has been resolved in version 5.27.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀