HandsonTableでヘッダーを弄ってみる

カラムヘッダ部にボタンを付けてポップアップなんぞ表示してみます

カラムヘッダに細工をする場合は、オプションのcolHeaders: trueをcolHeaders: function()に変更してメソッド内で処理します
columns: GetColumnsで指定しているtitleを削除しなくては反映されません
/Src/table.ts

	/*
	 * テーブル
	 */
        namespace HTable {
	    /*
	     * 作成
	     */
            export function build() {
                _ht = new Handsontable($("#list_table")[0], {
                    data: null
                    , columns: getColumns()                 // 列設定
                    , colHeaders: getColHerders				// 列見出し

                    ....

                });
                Ht.setFullSize(_ht);	// 全面表示
            }
	    /*
	     * カラム設定
	     */
            function getColumns(): Object[] {
                return [
                    {
                        type: "text"
                        //, title: "番号" // colHeaderで設定する場合は設定しない
                        , data: "data_no"
                        , readOnly: true
                        , colWidths: 100
                    }
                    , {
                        type: "text"
                        //, title: "状態"
                        , data: "data_state"
                        , readOnly: true
                        , colWidths: 100
                        , renderer: htmlRenderer
                    }
                    , {
                        type: "text"
                        //, title: "日付"
                        , data: "data_date"
                        , readOnly: true
                        , colWidths: 100
                    }
                    , {
                        type: "text"
                        //, title: "名称"
                        , data: "data_name"
                        , readOnly: true
                        , colWidths: 300
                    }

                    ....

                ];
            }
	    /*
	     * カラムヘッダー設定
	     */
            function getColHerders(col: number): string {
                //
                // columnsのtitleが設定されてる列では呼ばれません
                // columnSortingとの併用は考慮外
                // 
                if (_ht) {
                    let prop = _ht.colToProp(col);
                    switch (prop) {
                        case "data_no":
                            {
                                // 丸ごとボタン
                                let content = "";
                                content += "<a href='#'";
                                content += " class='ui-btn ui-btn-icon-left ui-icon-search'";
                                content += " cmd='data_no'";
                                content += ">";
                                content += "番号";
                                content += "</a>";
                                return content;
                            }

                        case "data_state":
                            {
                                // アイコン付加
                                let content = "";
                                content += "<div";
                                content += " class='ui-icon ui-icon-tag-b'";
                                content += " style='display:inline-block;'";
                                content += ">";
                                content += "状態";
                                content += "</div>";
                                return content;
                            }
                        case "data_date":
                            {
                                // テキストなしボタン付加
                                let content = "";
                                content += "<div>";
                                content += "日付";
                                content += " <a href='#'";
                                content += "  class='ui-btn ui-btn-icon-notext ui-icon-calendar ui-btn-inline'";
                                content += "  cmd='data_date'";
                                content += " >";
                                content += "</a>";
                                content += "</div>";
                                return content;
                            }
                        case "data_name":
                            {
                                // テキストありボタン付加
                                let content = "";
                                content += "<div>";
                                content += "名称";
                                content += " <a href='#'";
                                content += "  class='ui-btn ui-btn-icon-left ui-icon-bars ui-btn-inline'";
                                content += "  cmd='data_name'";
                                content += " >";
                                content += "選択";
                                content += "</a>";
                                content += "</div>";
                                return content;
                            }
                    }
                }
            }

        ....

        }

カラムヘッダのボタンクリックイベントを設定します
ポップアップを表示するのみに留めておきます
/Src/table.ts

	/*
	 * カラムヘッダボタン押下
	 */
        $(document).on("click", "#list_table thead > tr > th .ui-btn", function (event: Event) {

            let cmd = $(this).attr("cmd");
            let txt = "";
            switch (cmd) {
                case "data_no":
                    txt = "番号カラムヘッダ";
                    break;

                case "data_date":
                    txt = "日付カラムヘッダ";
                    break;

                case "data_name":
                    txt = "名称カラムヘッダ";
                    break;
            }

            if (txt) {
                let dlg = $("#page1_popup");
                dlg.children("p").text(txt);
                dlg.off("click").on("click", function (event: Event) {
                    Popup.close();
                });
                Popup.open(dlg, { positionTo: this });
            }
        });

htmlにポップアップを追加します
/Views/Table/Index.vbhtml

    <div data-role="popup" data-history="false" id="page1_popup" data-arrow="true">
      <p></p>
    </div>

CSSでheaderの体裁を整えて完了

div.handsontable span.colHeader {
  display: block;
}

  div.handsontable span.colHeader.columnSorting {
    display: inline-block;
  }

.ui-page div.handsontable span.colHeader .ui-btn {
  margin: 0;
  /*background-color: transparent;*/
  border-color: #ccc;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  font-size: 14px;
}

  .ui-page div.handsontable span.colHeader .ui-btn.ui-btn-icon-notext {
    padding: 0;
  }

.ui-page div.handsontable span.colHeader > div > .ui-btn {
  margin-top: -0.1em;
}