Tabulator でクリップボードにコピー

 

 

 

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
    })

  })

< 画面例 >

コメントを残す