TssGrid 例: ヘッダクリックで並べ替え A方式 + 外部UI

コア（TssGrid 本体）にソート機能は入っていません。並べ替えは 外から数行で組めます。
このページは onHeaderClick フック（ヘッダのクリック検出）＋ sortBy(列, 'asc'|'desc')（状態を保ったままデータを並べ替え）＋ ヘッダ文字に ▲▼ を足すだけで、HTML も依存も増やさずに「クリックで並べ替え＋インジケータ」を実現しています。
列ヘッダをクリックしてください（同じ列を再クリックで昇順⇄降順）。編集・チェック・行ヘッダ選択はそのまま動きます。

デモ

これだけ（抜粋）

const base = ['品番', '商品名', '数量', '単価', '在庫'];
let sortCol = -1, dir = 'asc';

const grid = new TssGrid(host, {
  headers: base.slice(),
  columns: [{}, {}, { type:'number', thousands:true }, { type:'number', thousands:true, prefix:'¥' }, { type:'checkbox' }],
  data: rows,
  // ★ ヘッダクリックを横取りして並べ替え（return false で列選択は抑止）
  onHeaderClick(c) {
    dir = (sortCol === c && dir === 'asc') ? 'desc' : 'asc';
    sortCol = c;
    grid.headers = base.map((h, i) => i === c ? h + (dir === 'asc' ? ' ▲' : ' ▼') : h); // ★ ▲▼ は文字を足すだけ
    grid.sortBy(c, dir);   // ★ 状態を保ったまま並べ替え＋再描画
    return false;
  },
});