FormControl in ngx datatable

Question

I've got a problem using ngx-datatable with formControls.

I have a datatable that display a list of categories and for each category a list of sub-items. When I click on a row that contain a category, it toggles the visibility of the sub-items rows.

Within each row, I've got a checkbox and when I click on a category's checkbox, it should check all the sub-items checkboxes. I use formControls to control the state of my checkboxes.

It works well as long as all my categories are expanded but when I close some of them and I use the checkboxes, it doesn't check the correct checkboxes.

I've made an example of my problem here if you want to check it out : https://stackblitz.com/edit/ngx-datatable-formcontrol?file=app/demo-component.ts

Thanks in advance !

Answer 1

Same as ngFor's track by function, the ngx-datatable allows setting as input property trackByProp like so: [trackByProp]="'id'". Using this will allow the component to keep track of the rows that are being hidden/displayed by their id and not by their index, like it does now and this exact behavior is causing your issue - once the checkboxes have been created for a specific row, they are not re-rendered ever https://github.com/swimlane/ngx-datatable/pull/1622