How to get current sorted column in smart-table

Question

I have st-sort directive on all columns in my smart-table. When an user clicks certain column how can I get current sorted column? Is there some trick or do I have to listen to the click event on those column headers?

Answer 1

you can use the directive st-pipe, this function will be called for sorting, paginating or filtering events.

<table st-table="displayedCollection" st-safe-src="rowCollection" st-pipe="customPipe">

$scope.customPipe = function(tableState){
   console.log(tableState.sort);
}

Answer 2

I think the technique which will give you the best control will be to create a plugin which will watch changes in the table state and will call a provided callback whenever a change is detected (in your case you will pay particular attention to the "sort" namespace of the table state

module.directive('stSentinel',function (){
   return{
      require:'^stTable',
      scope:{
        onChange:'&stSentinel'
      },
      link:function(scope, element, attr, stTable){
        scope.$watch(function(){
          return stTable.tableState();
        },function (newVal){
          scope.onChange(newVal);
        },
        true)}
     }
   };
});

which you can use in your markup

<table st-table="foo" st-sentinel="myCtrl.applyChange(tableState)"> ... </table>

Your controller will define the applyChange method to react the changes