Tabulator で クリックした行の文字色を変えて強調

 

 

 

Tabulator でクリックした行の明細表を別テーブルで表示する時、メインテーブルのレコードが多い場合、どの行をクリックしたのかがわからなくなるのを防ぐ為にクリックした行の文字色を変えて強調させてみました。

< コード例 >

まずはテーブルが生成された時の行文字色を取得してクラス変数にセット


    // @@ 明細テーブルが生成された時 @@ //
    table.on("tableBuilt", function () {

      const componentToHex = (c) => {
        var hex = c.toString(16)
        return hex.length == 1 ? "0" + hex : hex
      }

      const rgb2hex = (r, g, b) => {
        console.log(r, g, b)
        return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b)
      }
 
      // セル文字色取得 //
      const cell = table.getRow(1).getCell("code").getElement()
      const style = window.getComputedStyle(cell)
      const rgbcol = style.getPropertyValue('color')
 
      const rgbtxt = rgbcol.replace("rgb(", "").replace(")", "").replaceAll(" ", "")
   
      const rgbary = rgbtxt.split(",")
      this.cellColorDetail = rgb2hex(rgbary[0], rgbary[1], rgbary[2],)


    })

セルをクリックした時


 // @@ テーブル行をクリックした時 @@ //
    table.on("rowClick", function (e, row) {
      //e - the click event object
      //row - row component

      // 全行文字色をテーブル生成時の文字色にして初期化 //
      const rows = table.getRows()
      rows.forEach(tmp => { tmp.getElement().style.color = this.cellColor })
      // 強調 //
      row.getElement().style.color = "#0000FF"

      // == 以下省略 == //

    })

    return table
  }

< 画面例 >

コメントを残す