Wijmo - OLAP PivotGrid

sorting individual columns

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.olap.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl" class="container">
  <h1>OLAP Pivot Grid</h1>
 
  <wj-pivot-grid
    items-source="ngFmt"
    control="pivotGrid"
    initialized="init()"
    resized-column="resized(s,e)">
  </wj-pivot-grid>
  
</div>

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function($scope) {
	var ascending = true;
  var data = [],
    countries = 'Spain,Russia,Austria,Denmark,Germany'.split(','),
    colors = 'Red,Green,Blue'.split(','),
    products = 'Banana,Apple'.split(',');
  for (var i = 0; i <= 25; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      color: colors[i % colors.length],
      product: products[i % products.length],
      sales: 10 * i + 100,
      expenses: 5 * i + 30
    });
  }
  //$scope.cv = new wijmo.collections.CollectionView(data);
  
  var ng = new wijmo.olap.PivotEngine({
  	autoGenerateFields: false,
    itemsSource: data,
    showColumnTotals: wijmo.olap.ShowTotals.GrandTotals,
    showRowTotals: wijmo.olap.ShowTotals.Subtotals,
    fields: 'country,product,color,sales,expenses'.split(','),
    rowFields: 'Country,Product'.split(','),
    valueFields: 'Sales,Expenses'.split(','),
    columnFields: ['Color']
    
  });
  
  ng.fields.getField('Sales').aggregate = 'Sum';
  ng.fields.getField('Expenses').aggregate = 'Sum';
 	$scope.ngFmt = ng;
  
  
  $scope.resized=function(s,e){
  	console.log("resized");
    //check if column is row header
    if(e.panel.cellType!=1){
    //display row field name
    console.log(e.panel.grid.collectionView.items[e.col]["$rowKey"].fieldNames[e.col]);
    
    }else{
    //get all binding of current col 
    var binding=e.panel.columns[e.col].binding.split(";");
    //if top level column binding is present
    if(binding.length>s.engine.columnFields.length+1){
    //iterate through top level col bindings and display their names
    	for(var i=0;i<binding.length-2;i++){
					var topHeader=binding[i].split(":"); 				 console.log(""+topHeader[0]+" :- "+topHeader[1]);
      }
      //display last binding level name
      console.log("col :- "+binding[binding.length-2].split(":")[0]);
    }
    else{
    //if...