Search code examples
javascriptangularjsangular-ui-grid

Angular-ui-grid: How to format the contents of a data field


I have scoured the angular-ui-grid documentation without finding what was referred to as "CellFormatters" in a project I was part of a few years ago.

The "CellFormatters" were used to provide a textual rendering of the field that the grid column is for. For instance, suppose we have a column that is for a boolean "isContentEditor" field in an app that has most of its users a simple readers. We might decide that in order to avoid UI clutter, the column should not display "false" or "No" or else but it should rather show nothing.

Back in that old project, we would define a CellFormatter function that, IIRC, would receive at least the field value (ie either true or false) and return a string that is supposed to be the HTML-formatted version of the field contents.

Is such a pre-processing via JavaScript functions possible with angular-ui-grid?


Solution

  • Use 'cellFilter' for specifying a filter for that data. Also, if you set 'sortCellFiltered' as true, sort will be applied AFTER the filter is apllied.

    {
       field: 'validFrom', displayName: 'VALID FROM',type : 'date',
       cellFilter : 'date', enableCellEdit : false, sortCellFiltered : true
    }
    
    .filter('date', function(moment) { 
        return function(input) {
             if (input) {
                 return moment(input).format('MMM Do, YYYY');
             }
             return 'No Date Provided';
        };
     });
    

    ColumDefs Ui-Grid