CODEWITHSUNDEEP
javascriptangularjsperformanceng-grid
Baljeet Bhinder
Baljeet Bhinder

Reputation: 115

best way to render data in tables in angular

I am trying to render data in table form to front-end in angular and there i've used ng-grid and ui-grid so far.

But they seems to be slowing down performance as there are lot more rows sometimes like 200+ per grid and more than 20 grids on single page.

So the browser most of the times hangs up i just needed to show data no operation is needed to be performed on data. it just needs to be rendered.

So anybody please help if you have any other idea to render this much data in grid form.

Upvotes: 4

Views: 2397

Answers (2)

PaulL
PaulL

Reputation: 6650

There are a few options for how to handle this in ui-grid.

There is an option in ui-grid for flatEntityAccess, that improves performance a bit with the bindings.

Many people put their grids in tabs, and use an ng-if around the tab so that it only renders the grid if that tab is active.

If you need all the grids in a list down the page, presumably not all the grids are visible to a user at the same time (you couldn't have 20 grids all visible, probably only one or two visible at a time. You can potentially detect the page scroll and use an ng-if on the grid so that only those that are actually visible are being rendered.

Ultimately the problem is that if you have 10 columns and perhaps 15 rows visible in each grid, that's immediately 150 watchers per grid, if you then have 20 grids you've got 2000+ watchers on your page, and all of them have to be evaluated whenever you scroll any of the grids. Note that the watchers per grid are correlated to the number of visible rows, number of visible columns, and then number of grids that are rendered. Ultimately you need to change one of those elements if you want it to go faster.

Lastly, you may want to check version - rc20 or even current unstable is faster than older release candidates.

Upvotes: 2

Jagadish Dharanikota
Jagadish Dharanikota

Reputation: 263

Use one time binding in your grid row. {{::data.id}}. This will boost your page performance as watches are removed after first binding is done.

But remember if you change any model changes in you cannot see them in your view when you use one time binding.

One time binding was introduced in Angular 1.3. I you are using Angular 1.3 or above version.

If you are using version below 1.3 then probably you have to change you design. Rather then showing more than 20 grids, show only one at a time based on some select drop down.

You can try ng-table directive also. But if you are using 20 grids with more than 200 rows even that becomes slow.

Angular application become slow if they have watches more than 2000. In your case there are 20 * 200 = 4000 watch. Even more watch if u have more grids and row. So better change your design or use one time binding.

Upvotes: 1

Related Questions