日: 2022年12月17日

Taburator でテーブルのタイトルをつけるにあたって、プロパティとしてはタイトルの設定がないので、何とかならないかと調べましたところ、StackOverFlowで同様のこと考えている人の投稿を見つけて、GroupHeaderにしてColumnHeaderを2行にすることにより、タイトルをつけられるようになりました。

Is there away to display a title for a Tabulator table? <== これ

< コード例 >

  /**
   * 機材コード、番号明細テーブル
   * @param {*} data 明細データ
   * @param {*} name タイトル用モデル名
   */
  showDetailTable(data, name) {

    const table = new Tabulator("#eachdetail_table", {
      data: data,
      layout: "fitDataTable",
      maxHeight: "100%",
      columns: [
　　　　// 1行目 1列にする フィールドにはデータ列を指定しない 変数で文字を変える //
        {
          title: name + " Details",
          field: "",
          // 2行目 //
          columns: [
            {
              title: "No.",
              field: "rowno",
              formatter: "rownum",
              frozen: true,
              width: 10,
              hozAlign: "right",
              cssClass: "cell_num",
            },
            { title: "RegNo.", field: "nm_regist", width: 70 },
            { title: "ICAO24", field: "icao24", width: 70 },
            { title: "Serial", field: "nm_serial", width: 70 },

            {
              title: "Active",
              field: "is_active",
              width: 6,
              hozAlign: "center",
            },
            { field: "id", visible: false }
          ],
        },
      ],

  /**
   * 機材名別合計テーブル
   * @param {*} data
   */
  showEachTotalTable(data, al_icao) {

    const table = new Tabulator("#eachtotal_table", {

      data: data,
      layout: "fitDataTable",
      maxHeight: "100%",
      columns: [

        {
          field: "", title: al_icao + " Each totls, actives count",
          columns: [
            // 行番号  ???? 幅が狭くならない //
            {
              title: "No.",
              field: "rowno",
              formatter: "rownum",
              frozen: true,
              width: 10,
              hozAlign: "right",
              cssClass: "cell_num",
            },
            { title: "Code", field: "code", width: 50 },
            { title: "Name", field: "name", width: 150, topCalc: "count" },
            {
              title: "Count",
              field: "count",
              width: 40,
              hozAlign: "right",
              topCalc: "sum",
            },
            {
              title: "Active",
              field: "active_count",
              width: 40,
              hozAlign: "right",
              topCalc: "sum",
              /*formatter: function (cell, formatterParams, onRendered) {
                if (cell.getData() == 0) {
                  return ""
                }
                else {
                  return cell.getData()
                }
              }*/
            },
            { field: "id", visible: false }
          ]
        }],

< 画面例 >

リーダブルコード より良いコードを書くためのシンプルで実践的なテクニ （Theory　in　practice） [ ダスティン・ボズウェル ] 価格：2640円（税込、送料無料) (2023/1/29時点) 楽天で購入

Tabulator でtippy.js のツールチップが使いたいので試してみると出来ました。
rowFormatter で各行配下のエレメントを走査して、クラスやフィールド名が合致した場合、getElement()でエレメントを取得します。
後はエレメントに対してDOM操作でセットしています。

< コード例 >

   // @@ 行をフォーマットする時 @@ //
    rowFormatter: row => {

      $.each($(row.getElement()).children(''), function (j, itm) {

        const fld = $(this).attr('tabulator-field')

        // tabulator-row-handle クラスがある場合 //
        if ($(this).hasClass('tabulator-row-handle')) {
          $(this).attr('title', 'Move this row by drag and drop')
          $(this).addClass('tippydiv')
        }

        // フィールド名が '_'である場合 //
        if (fld === '_') {
          $(this).attr('title', 'Show runway details and map')
          $(this).addClass('tippydiv')
        }
      })

      // tippy //
      tippy('.tippydiv', {
        placement: 'bottom',
        animation: 'scale',
        duration: 1000,
        arrow: true
      })
    }
  })

    // @@ 行をフォーマットする時 @@ //
    rowFormatter: (row) => {

      const iata = row.getData().iata_code

      $.each($(row.getElement()).children(""), function (j, itm) {
        const fld = $(this).attr("tabulator-field")

        if ($(this).hasClass("tabulator-row-handle")) {
          $(this).attr('title', "Move this row by drag and drop");
          $(this).addClass('tippydiv');
        }

        if (fld === "cntrycd") {
          $(this).attr("title", CNTRYMAME_MAP[row.getData().cntrycd_org])
          //$(this).attr('title', "国名");
          $(this).addClass("tippydiv")
        }
        if (fld === "__") {
          $(this).attr("title", "By right click, context menu appear")
          //$(this).attr('title', "国名");
          $(this).addClass("tippydiv_top")
        }


      })

      // tippy //
      tippy(".tippydiv", {
        placement: "bottom",
        animation: "scale",
        duration: 1000,
        arrow: true,
      })
      // tippy //
      tippy(".tippydiv_top", {
        placement: "top",
        animation: "scale",
        duration: 1000,
        arrow: true,
      })
    },
  })

< 画面例 >

JavaScriptコードレシピ集 スグに使えるテクニック278　最新ECMAScri [ 池田泰延 ] 価格：3278円（税込、送料無料) (2022/12/23時点) 楽天で購入