Tabulator でテーブルにタイトルをつける

 

 

 

 

 

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 }
          ]
        }],

< 画面例 >

 

コメントを残す