カテゴリー: Tabulator

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

< 画面例 >

 

Tabulator で tippyのツールチップ

投稿日: 投稿者:

 

 

 

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時点)

楽天で購入

 

 

Tabulator 開発日記

投稿日: 投稿者:

 

 

 

Tabulator を始めました。
仕事ではずっと jqGrid を使ってましたが、jqGridで作ったサイトを今風にリニューアルすることにして、ふさわしいGridを探してましたところ、Tabulatorにたどり着きました。
さすが、後発なだけあって Bootstrap、レスポンシブにもしっかり対応していて動作が軽快で気に入りました。
日本語の情報がまだ少ない気がしますが、公式サイトのサンプル、ドキュメントが詳しく丁寧でわかりやすいので助かります。
今までjQGridで行ってきたカスタマイズをTabulatorで行ってみたコード例などのんびり書いて行こうかと思います。

本家Home
テーマの配色が都バスの掲示板みたいです。

 

 

入門はこれらがわかりやすいです。

https://mmtomitomimm.blogspot.com/2018/12/tabulator.html
https://oopsoop.com/tabulator/
https://confrage.jp/tabulator%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%81%A8%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AB%E3%82%A2%E3%83%83%E3%83%97%E3%81%97%E3%81%9F%E3%82%89%E7%B0%A1%E5%8D%98%E3%81%ABweb%E3%82%A2%E3%83%97/

https://qiita.com/yamori813/items/d0c6971ca5154d8fc1bf

https://qiita.com/e21084/items/dcd7e190dc651127aa71

https://ascii.jp/elem/000/001/269/1269722/

tips集を公開して下さってる方がいてこれも分かりやすく役に立ちそうです。

Tabulator tips