첫번째 컬럼은 숨은 컬럼(바인딩 안된 데이터)을 사용하여 정렬하는 기능을 구현하였습니다.
두번째 컬럼은 동적으로 오름차순/내림차순으로 동작하고 상황에 따라 클릭시 동작하는 스크립트를 변경, 이미지를 변경하는 예제입니다.
{key: 'name', width: '10%', title: ['고객사명'], type: "html", options: {html: {header: fnHeader2}}}

function fnHeader2(id, row, col, val, obj){
  var str = val;
  str = "<span style='color: black;'>"+val+"</span>";
  str += "<img id='sortImg' class='sort-img' src='./images/sort.png' height='30' size='30' alt='내림차순 정렬' onclick='sortWithAPI(2, 0)'>";
return str;
};

function sortWithAPI(column, sortType) {
  if(sortType == 1) {
    qcell.sort([[column, "asc", "string"]]);
    $("#sortImg").attr("src","./images/up.png");
    $("#sortImg").attr("onclick","sortWithAPI(3,0)");
    sortType=0;
  }
  else {
    qcell.sort([[column, "desc", "string"]]);
    $("#sortImg").attr("src","./images/dn.png");
    $("#sortImg").attr("onclick","sortWithAPI(3,1)");
  sortType=1;
  }
}