3

I'm building a large, editable data table with angular, and I'm trying to figure out what the best practice is.

The table will be a couple of hundred rows, with a couple of dozen columns, so upwards of 2000 cells. Each cell needs to be editable inline.

My first thought was to have directives at the cell level, so it would look something like:

<editablecell model="some model expression"></editablecell>

But I'm concerned about the performance of creating thousands of directives instances, each with its own scope, controller, and event listeners. I'm worried that if the table needs to be redrawn (you change the sorting, for instance) the performance will suffer.

Is it a better idea to maybe have a per-row directive that has a meatier controller and template to handle all the data binding and event handling at a higher level, and thus create fewer child scopes and event listeners?

Improve this question
5
  • 1
    A tip is when you use ng-repeat check the track by option. Using it can improve performance.
    – elclanrs
    Commented Jan 29, 2014 at 2:43
  • When you tried it, what happened?
    – Robert Harvey
    Commented Jan 29, 2014 at 4:35
  • @RobertHarvey - Doing a less-than-full implementation won't really test the performance. That's why I was trying to find out what the best practice is. The alternative is to spend a couple of days implementing it in a way that might already be known to some as a bad idea.
    – alexp
    Commented Jan 29, 2014 at 18:02
  • What do you mean by a less-than-full implementation? This isn't a load test; it's a single page. I assume you can use a loop to generate as many Editable Cells as are needed for an adequate test.
    – Robert Harvey
    Commented Jan 29, 2014 at 18:05
  • Another direction: I highly doubt all 2000 of these cells will be on screen at the same time, I would expect at least some scrolling or paging. Therefore if you hit scaling problems, you could figure out some way to only watch for changes of the rows currently displayed and change what set of rows those are as the user scrolls / pages.
    – Jack
    Commented May 25, 2015 at 10:02

1 Answer 1

Reset to default
1

I wouldn't worry too much about the number of directives and controllers, at least not without performance data. Proper use of directives and controllers is what makes your page maintainable. It's about coming up with a re-usable set of components that you can mix and match.

The number of watchers can be problematic as it means that every digest cycle all those watchers will fire off. How much of the data is dynamic and how much is static?

For static data, Angular 1.3 added one-time bindings which can help you reduce the number of watchers. You can read about those here. If you're dealing with thousands of rows of dynamic data, I'm not sure there's really much you can do to optimize that. It simply takes a lot of time to update thousands of pieces of information. There may be some optimizations you can make with more information about the subjective case you're working on.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.