Cell Templates

Templates allow you to specify templates to use to render your cells. This is used when you are using dynamic HTML such as that provided by AngularJS (otherwise each cell in the column would look the same!). If you are not using dynamic HTML (such as AngularJS) then don't use cell templates, they are not much use.

Cell templates are specified in the column definition by providing a template as a string or a templateUrl to load the template from the server.

If using templateUrl, then the html is cached. The server is only hit once per template and it is reused.

Cell Template Example

The example below uses cell templates for the first three columns.

• Col 1 - The first column uses a static template. Pretty pointless as you can't change the content between rows.
• Col 2 - The second column uses an inline template. AngularJS is then used to fetch the content from the scope via ng-bind.
• Col 3 - The third column is similar to the second, with the difference that it loads the template from the server.

In the example, as you scroll up and down, the redraw on the AngularJS columns has a lag. This is waiting for the AngularJS digest cycle to kick in to populate the values into these rows. If you like this effect, then check out ui-grid, where all cells are rendered in this fashion.