Improve performance with ChangeDetectionStrategy

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Current behavior

A complex table (many rows/columns) will cause the browser to hiccup on Angular change detection, causing jerky animations and other performance issues.

Expected behavior

ngx-datatable should be optimized to do minimal Angular change detection.

Reproduction of the problem

I noticed this when I added a <md-input> (angular/material2), which has a floating label animation. With a ngx-datatable as a sister component, the animation is jerky. Also, do a Chrome Dev Tools JS CPU profile with and without ngx-datatable on a page. You will notice much more time spent in AppView.detectChanges.

Expand: AppView.detectChanges > ViewContainer.detectChangesInNestedViews and you will see many ngx-datatable detectChangesInternal calls.

What is the motivation / use case for changing the behavior?

ngx-datatable should have good performance in Angular.

• Table version: 6.0.2

• Angular version: 2.4.6

• Browser: Chrome

• Language: TypeScript 2.1.5

[arlowhite]

I added changeDetection: ChangeDetectionStrategy.OnPush to DatatableComponent, but it didn’t improve performance much. So then I added OnPush to DataTableBodyComponent, DataTableBodyRowComponent, DataTableBodyCellComponent and performance improved significantly.

I was under the impression that only the root component would need OnPush, but this doesn’t seem to be the case. So maybe OnPush should be added to every ngx-datatable Component? I don’t have much experience on ChangeDetection optimization; I’ve just read a bit on it.

One problem with this is that users may need to change how they input data into ngx-datatable. To trigger an update to rows, they would need to change the reference (make a copy of rows array). Alternatively, rows could also be an Observable (any[] | Observable<any[]>); from what I’ve read Angular change-detection is Observable aware. Could also add a refresh() method or something, which triggers change detection, but this seems ugly to me in the Angular world.

Hopefully someone who has worked on ChangeDetection optimization knows the best way to design this.

[amcdnl]

I do with some of them.