ng-gird colDefs (column Definition) allows you to define a filter (angular filter) for each column.

In my use case, I need to use filter per row. This means, data in some rows will have number format and other might have percentage.

Does ng-grid supports filter per row? Please note, this is not filtering rows, this is applying same display format to the cells of a row.

ng-gird colDefs (column Definition) allows you to define a filter (angular filter) for each column.

In my use case, I need to use filter per row. This means, data in some rows will have number format and other might have percentage.

Does ng-grid supports filter per row? Please note, this is not filtering rows, this is applying same display format to the cells of a row.

• javascript
• angularjs
• angular-ui
• ng-grid

2 Answers 2

This is now (as of 2014) possible natively with the current ngGrid:

columnDefs: [
  {
    field: 'name',
    cellFilter: 'lowercase'
  }
]

Or even with the filter arguments:

columnDefs: [
  {
    field: 'name',
    cellFilter: 'currency:"GPB"'
  }
]

You can do this by using a cellTemplate and a filter.

The gridOptions with custom cellTemplate:

    var statusTpl = '<div  style="padding-top: 10px;padding-left: 5px" ng-bind="row.getProperty(col.field) | percentage:200"></div>';
    $scope.gridOptions = {
    data: 'myData',
    columnDefs: [{
      field: 'name'
    }, {
      field: 'status',
      cellTemplate: statusTpl
    }]
    };

And a very simple Filter (which, in this example, calculates floored percentage from 100%=200):

    app.filter('percentage', function() {
      return function(input, max) {
        if (isNaN(input)) {
          return input;
        }
        return Math.floor((input * 100) / max) + '%';
      };
    });

You can set the 100% value in the second parameter of the filter in the custom cellTemplate.

If you need a more precise with adjustable decimals just look around you will surely find some.

Doh! Nearly forgot the Plunker to this