TableExportで好きな位置にExcelやCSV出力ボタンを配置する

はじめに

JQueryプラグイン「TableExport」ではテーブルを簡単にExcel、CSV、テキストファイルなどで出力できます。ただ、出力ボタンの位置は上下で固定っぽくて不便だったので、改善策を備忘録として残しておきます。

TableExport自体の使い方は下記サイトが分かりやすいので参考にされてください。
https://www.wp-benricho.com/tableexport/

開発環境は以下の通り

• Ruby 2.6.3
• Rails 5.2.4.4
• jQuery 1.12.4

(Ruby on Rails使用してますが、今回の記事ではjQueryのみ取り上げているのであまり関係ないかと思います)

なお、bootstrapを使えばデフォルトでオシャレなボタンにできますが今回は使いません。

問題点

Export to xlsxボタンがとんでもないところにありますね。
普通のテーブルだともう少しマシかもしれませんが、このテーブルは見出し固定のスクロール式で、テーブルを横にスライドするとボタンも一緒に流されてしまうので余計見にくい代物になってしまいます。。

一応オプションでボタンの位置を指定できますが、前述した通り上下の指定しかできないので改善には至りませんでした。

$(".table").tableExport({
    ...
    position: "bottom",
    ...
});

解決策

至ってシンプルです。

①tableExport()で生成されるボタンを隠して代理ボタンを配置する
②代理ボタンが押されたらtrigger()でもともとのボタンが押されたことにする

htmlファイル

...

<table id="export-table">
    ...
</table>

<button type="button" id="export-btn">Excel出力</button>

...

jqueryファイル

...

$('#export-table').tableExport({
    formats: ["xlsx"],
    bootstrap: false
});

$('#export-table caption').hide();

$('#export-btn').on('click', function(){
    $('.table caption button').trigger('click');  
});

...

うまくいきました！
もちろんCSVやテキストファイルの出力にも使用できます。

おわりに

TableExportはとても簡単に外部ファイルを出力できるプラグインですが、扱っている記事自体がとても少ないので、こういうちょっとした解決策っていうのはもっと増えていくと嬉しいですね。