pandasのデータをHTMLで出力したいときってありますよね。
Excelよりもブラウザのほうが軽快なので、ちょっと見るだけならHTMLのほうが早いです。
ですが、以下のようなコードが出力するHTMLは全然イケていません。
import pandas as pd
URL = "https://opendata.ecdc.europa.eu/covid19/casedistribution/csv" # 世界各国別データ（ECDE オープンデータ）
df = pd.read_csv(URL).iloc[:100, :]
df.to_html('hoge.html')
出力したHTMLファイルをブラウザで開くとこんな感じ
装飾が全くなく、無骨すぎます。
そこで、こちらの記事で紹介されていたJavaScriptのライブラリ-DataTables-の力を借りて、高機能かつ見栄えをよくします。
一例ですが、以下のような関数を定義して使います。
def write_html(df, output):
scripts = """
<link href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/datatables.min.js"></script>
<script>$(document).ready(function() {$('.my-table').DataTable({});})</script>
"""
html = df.to_html(classes='my-table')
html = scripts + html
with open(output, mode='w') as f:
f.write(html)
write_html(df, 'fuga.html')
ポイントはdf.to_htmlメソッドではHTMLファイルを出力しないことです。
テーブルタグのみの文字列を作り、その文字列の先頭にDataTablesを読み込むタグを追加したあと、ファイルに出力します。
これだけで画像のようなフィルター、ソート、ページング機能がついた整ったテーブルになります。ちなみにShiftを押しながらカラム名を押すことで、複数列のソートができます。超便利ですね。
最後に私のおすすめ設定を晒しておきます。
script変数を以下に変更することで、テーブルが見やすくなり、またフィルター機能も強化されます。
scripts = """
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/v/zf/jq-3.6.0/dt-1.13.4/b-2.3.6/b-html5-2.3.6/date-1.4.1/fh-3.3.2/sb-1.4.2/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/v/zf/jq-3.6.0/dt-1.13.4/b-2.3.6/b-html5-2.3.6/date-1.4.1/fh-3.3.2/sb-1.4.2/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<script>
$(document).ready(function() {$('.my-table').DataTable({
select: true,
displayLength: 25,
buttons: ['copy'],
fixedHeader: true,
dom: 'iQrtBlp',
});})
</script>
"""
どうぞお試しあれ^^