The grid allows you to override most of the templates, including cellTemplate, headerCellTemplate, rowTemplate and others. You would typically do this to inject functionality like buttons or to get a very different look and feel that you couldn't achieve through cell classes and other settings.

It is generally good practice to at least review the standard template in https://github.com/angular-ui/ui-grid/tree/master/packages/core/src/templates/ui-grid to make sure there isn't functionality that you are overriding that you needed to keep. In many cases it is desirable to use the standard template as a starting point, and add your customisations on top. Also remember that new features or code changes may mean that you need to upgrade your custom template (if the standard template has been modified).

In this example we create a grid almost the same as the most basic one, but with a custom row template, and with a cellTemplate that totals all the items above it in the grid. This template continues to work when the data is filtered or sorted.

The custom row template merges all the cells together when the entity.merge value is true.

You can use grid.appScope in your row template to access elements in your controller's scope. More details are on the scopes tutorial.

In the cellTemplate you have access to grid, row and column, which allows you to write any of a range of functions.

Note that the footerTemplate is rendered once for each renderContainer. If using a custom footer template you may want to test for ng-if="colContainer.name === \'body\'"

For better performance with the following example, you can choose to load the ui-grid.core.js instead:

  <script src="/release/ui-grid.core.min.js"></script>