UI Grid - Formatting Data


I'm using the new Angular UI Grid (that is planned to replace ng-grid). My data needs some formatting before it's displayed in the table. For instance, my server returns an attribute named "status" as a number, but I want to display it as a nice name.

If status=1 display "Todo", if status=2 display "Doing" etc.

How can this be done in UI Grid?

Problem courtesy of: Haji


First step, add a cellTemplate to the column:

$scope.gridOptions.columnDefs = [
    {field:'status', displayName: 'Status',cellTemplate: 'statusTemplate.html'}

The Template-File should look like this (COL_FIELD is the actual field):

<div style="text-align: center">{{COL_FIELD==1 ? 'Todo' : 'Doing'"}}</div>

Hope, you got the idea! :)

Solution courtesy of: nabinca


The preferred method now is to use a cellFilter, rather than a custom template. Custom templates are OK, but they impose more workload on upgrade - you have to check whether new features require modifications to your template.

There is a reasonable example of filters in the tutorials: http://ui-grid.info/docs/#/tutorial/201_editable

Note the cellFilter: 'mapGender' on the gender column, and the filter itself defined further below in the tutorial:

.filter('mapGender', function() {
  var genderHash = {
    1: 'male',
    2: 'female'

  return function(input) {
    if (!input){
      return '';
    } else {
      return genderHash[input];
Discussion courtesy of: PaulL

The shortest way is use CellTemplate with appScopeProvider:

  vm.gridOptions = {
        columnDefs: [
                field: 'status',
                cellTemplate: '<div>{{grid.appScope.formatStatus(row)}</div>'
        appScopeProvider: {
            formatStatus: function (row) {
                return row.entity.status === 1 ? 'Todo' : 'Doing';
Discussion courtesy of: Daniel Pham

This recipe can be found in it's original form on Stack Over Flow.