Angularjs: Sorting not working in ui-grid with CellTemplate data

I am very new to angular ui-grid. I am displaying data using cell template but sorting is not working. I want to sort that particular column using 'username'.

Can anyone please help me with this.

{
  field: 'usernameandgender', 
  width: '29%',
  displayName: 'Dr. İsim / Uzmanlık', 
  name:'username' ,
  cellTemplate:'
      <div style="height:47px;">
         <span style="font-size:15px;">{{row.entity.username}}</span> -
         <span style="color:gray; font-weight:normal;font-size:13px;">
              {{row.entity.gender}}
         </span>
         <br/>
      </div>'
 }

Please change the field value to 'username'. It should work.

I used the same type of cell template to display icon based on true/false, and though it is displaying lock icon in grid, I can filter on basis of true/false.