TableSorter( jQuery plug-in)で簡単に表のソートを実装する。 ref: http://qiita.com/mnishiguchi/items/87aacf94eee776aa261a

file0.txt

%table#myTable
  %thead
    %tr
      %th
        %span.arrow
          / <=ここにアイコンを挿入する。
      %th
        %span.arrow
          / <=ここにアイコンを挿入する。
      %th{ span: "2" }
  %tbody
    %tr
      %td 列１データ１
      %td 列１データ２
      %td ...
      %td ...
    %tr
      %td 列２データ１
      %td 列２データ２
      %td ...
      %td ...
    ...

file1.coffee

$(document).ready ->
  $("#myTable").tablesorter()

file2.css

/* ヘッダーをクリックすると勝手にハイライトされるので、それを除去する。 */

th:focus { outline: 0 none; }

/* 三角印アイコンをヘッダーに追加する */

th.tablesorter-headerUnSorted span.arrow,
th.tablesorter-headerAsc span.arrow,
th.tablesorter-headerDesc span.arrow {
  position: relative;
}

th.tablesorter-headerUnSorted span.arrow:before {
  content: "\f0dc";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color: #ABC;
}

th.tablesorter-headerAsc span.arrow:before {
  content: "\f0de";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

th.tablesorter-headerDesc span.arrow:before {
  content: "\f0dd";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}