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?