Most efficient way to hide table column with angularjs

Question

I would like to know if anybody knows a more efficient way to show / hide columns in a table powered by angularjs:

I have a large table (20+ columns, 1000000+ rows) and implemented a feature to show / hide columns based on user preferences. I do this via ng-if on every table cell. This triggers a large watcher count on initial load of the table and the angular digest cycle is going crazy with more then 4000 watchers on a single page.

My main idea to solve the performance problems was to reduce the watcher count. For this purpose I use this library that does nothing else then disabling watchers that are not in the viewport. So far so good, performance got better, but what if I would add more and more features to the table? It looks like this show / hide columns feature will be my performance bottleneck forever (and according to chromes angularJS digest timing analyses it is).

Conclusion: ng-if doesn't look like a good approach to show / hide columns because of the high watcher count and bad performance. Does anybody know a smarter solution to show / hide columns?

Edit: I already have pagination of 200 rows per page, however the problem still persists and of course I aim for a scalable solution.

Answer 1

You can try with CSS classes applied to the all table cells and respective header cells with different class names.

EG: column-1, column-2 ect

Define the class definitions in the angular string and place in between style tag as expression

EG:

In controllers js

$scope.columnStyleDefs = '.column-1{display:none},.column-1{display:table-cell},...';

You can chnage "columnStyleDefs" as necessary when user change their preferences

In html template

<style>
{{columnStyleDefs}}
</style>

I home this may help you for the above assignment.