日: 2022年12月18日

Tabulator に copyToClipboard メソッドがあり、特にDOMを操作しなくても出来ました。
方法は公式ドキュメントに詳しく書かれています。

< コード例 >

プロパティ

  // ++ Tabulator ++ //
  let table = new Tabulator("#altable", {


    // クリップボード設定 //
    clipboard: true,
    clipboardCopyConfig: {
      columnHeaders: true, //do not include column headers in clipboard output
      columnGroups: false, //do not include column groups in column headers for printed table
      rowGroups: false, //do not include row groups in clipboard output
      columnCalcs: true, //do not include column calculation rows in clipboard output
      dataTree: false, //do not include data tree in printed table
      formatCells: false, //show raw cell values without formatter
    },

    // == 他は省略 == //

  })

テーブル生成後のイベントでステータスバーにコピー用アイコンを配置して、クリックのリスナーを書いてます。

  // @@ テーブル生成時 @@ //
  table.on("tableBuilt", function () {

    // コピーボタン挿入 //
    const html = `<span id="clipbtn" class="ml-2 mr-2 curpo tippydiv"
    title="Copy to clipboard all records">
    <img src="Img/copy_64_darkgray.png" width="20"/>
    </span>`
    const ftcnts = $(".tabulator-footer-contents").eq(0)
    $(ftcnts).prepend(html)

    // @@ コピーボタンを押した時 @@ //
    $("#clipbtn").on("click", function (e) {
      table.copyToClipboard("all") //copy the currently selected rows to the clipboard
      toastr.info("All records were copied to clipboard")
    })

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

  })

< 画面例 >

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
  }

< 画面例 >