UI-Grid v3 : Custom Cell Renderer

I was recently playing with Angular-UI’s ui-grid v3 module and I was wondering how to define custom cell renderer; especially for address rendering. The tutorial explains that, basically, you need to define a function for each data in your dataset. For example, here, we got a function just for the Zip

var app = angular.module('app', ['ngTouch', 'ui.grid']);
 
app.controller('MainCtrl', ['$scope', function ($scope) {
 
$scope.gridOptions = {
        enableSorting: true,
        columnDefs: [
          { name:'firstName', field: 'first-name' },
          { name:'1stFriend', field: 'friends[0]' },
          { name:'city', field: 'address.city'},
          { name:'getZip', field: 'getZip()'}
        ],
        data : [      {
                           "first-name": "Cox",
                           "friends": ["friend0"],
                           "address": {street:"301 Dove Ave", city:"Laurel", zip:"39565"},
                           "getZip" : function() {return this.address.zip;}
                       }
                   ]
      };
}]);

It works, but not really efficient on large dataset. The solution comes from “Cell Template” and direct binding to the current row entity

   columnDefs: [
          { name:'firstName', field: 'first-name' },
          { name:'1stFriend', field: 'friends[0]' },
          { name:'city', field: 'address.city'},
          { name:'getZip', cellTemplate: '{{row.entity.address.zip}}'}
        ],
        data : [      {
                           "first-name": "Cox",
                           "friends": ["friend0"],
                           "address": {street:"301 Dove Ave", city:"Laurel", zip:"39565"},
                           "getZip" : function() {return this.address.zip;}
                       }
                   ]
      };

Thus, you can build really complex columns for example with multiple buttons and so on. For my address issue, I did 2 things
1) I create a new angular’filter called ‘addrshort” :

app.filter('addrshort', function() {
  return function(address) {
    return address.join(" ");
  }
});

2) I change the cell template to:

cellTemplate: {{row.entity.address|addrshort}}

BUT there is one limitation : default filtering doesn’t work