I am working with angularJS and ng-grid (https://github.com/angular-ui/ng-grid) and encounter some problem with the rapidity of the sort implemented on the header.
I have a moderate ng-grid to render (around 200 lines) but each line contains a D3js/SVG drawing encapsulated inside an angular directive that affects greatly the perfomance. If i don't set the 'virtualizationThreshold' (option that set the number of element to render outside the viewport) option to a high number, i get laggy scrolling and when I do use 'virtualizationThreshold' it takes severals seconds to sort the data (because in this case each click on the sorting header make the application re-render all the grid).
As i am a beginner in angularJS, i was wondering if it is possible to put the svg's in a cache ? Is this a common pattern ?
Also how does the ng-repeat sortBy option works ? Does it redraw everything or is it doing something smarter ? My test with using a simple ng-repeat yielded very good performance but in this case i lost the power of virtualization as i need to render all the lines. How can virtualization be achieved using ng-repeat ?
There is a opened ticket on the official github project https://github.com/angular-ui/ng-grid/issues/2820#issuecomment-76219864.