Best practice for creating editable mesh in angular

Question

We are porting our application from GWT to angular. In our application, we use an editable grid.

One way to make an editable grid is to use a separate editor for each cell. To do this, a simple page with 4 columns and 100 rows takes 2000 ms to render.

http://plnkr.co/edit/FTaQBPOoaBtbHqgltF7r?p=preview

Another way to do this is to use only one editor in the absolute div and place that div on the selected td. But doing this may require dom calculation, which is forbidden in angular. But it took only 500 ms to render

http://plnkr.co/edit/S0ivQ5yJSwx26M0tt2GX?p=preview

Since I'm new to angular, which approach should I follow.

Answer 1

The enableCellEdit: true attribute is missing from plunkr.

Try this -> http://plnkr.co/edit/EzCZcM?p=preview

Answer 2

You can also try the following: http://vitalets.imtqy.com/angular-xeditable

there are demos with editable rows / columns and the whole grid.