Dash DataTable解剖

Dash DataTableとは

Dash DataTable is an interactive table component designed for
viewing, editing, and exploring large datasets.

見る、編集する、大きなデータセットを調査するための、インタラクティブなテーブルコンポーネント

https://dash.plotly.com/datatable

環境

• Google Coraboratory
  • Python 3.6.9
    • dash 1.17.0
    • jupyter-dash 0.3.1
    • pandas 1.1.4

セットアップ

dashのimportと、データセットの準備。今回データセットにはsklearnに用意されているボストンの住宅情報を使用

!pip install pandas dash jupyter-dash

from jupyter_dash import JupyterDash
import dash
import dash_table
import pandas as pd
from sklearn.datasets import load_boston

app = JupyterDash()
boston = load_boston()
df = pd.DataFrame(boston.data, columns = boston.feature_names)
df['MEDV'] = boston.target

出力してみる

まずは一番簡単な出力から

app.layout = dash_table.DataTable(
    id = 'table', 
    columns = [{"name": i, "id": j} for i,j in zip(df, df.columns)],
    data=df.to_dict('records'),
)
app.run_server(mode="inline")

これだと、全部愚直にスクロールして出力とまではいきませんが、少なくともスクロールが必要になるくらいには、データが多いほどWebページとして縦長になってしまいます

機能一覧

1. ページング機能
2. フィルター機能
3. ソート機能
4. ツールチップ表示機能
5. 単位フォーマット機能
6. 編集機能

ページング機能

一番簡単な出力で、１ページの面積に収まらないようなときは、ページングする際の表示データ数を制限できます
page_size = ~を追加するだけ。~には、１ページに何行表示するかを指定します

app.layout = dash_table.DataTable(
    id = 'table',
    columns = [{"name": i, "id": j} for i,j in zip(df,df.columns)],
    data=df.to_dict('records'),
    page_size = 10
)

app.run_server(mode="inline")

フィルター機能

いくつ以上、以下のデータをみたい。特定の値を固定して抽出した場合の全データがみたい。ときにはフィルターが便利ですよね。
filter_action = 'native'を追加します

app.layout = dash_table.DataTable(
    id='table',
    columns = [{"name": i, "id": j} for i,j in zip(df,df.columns)],
    data=df.to_dict('records'),
    page_size = 10,
    filter_action = 'native'
)

app.run_server(mode="inline")

フィルター行が追加され、そこに数式で条件を書くことで、フィルタリングが可能です
例：　>60、 <10 など

ソート機能

昇順、降順にソートもできます。

app.layout = dash_table.DataTable(
    id='table',
    columns = [{"name": i, "id": j} for i,j in zip(df,df.columns)],
    data=df.to_dict('records'),
    page_size = 10,
    sort_action='native'
)

app.run_server(mode="inline")

ヘッダーをクリックすると、「昇順、降順、元の並び」が切り替わります

ツールチップ表示機能

いろいろな方法でツールチップが出せるようです。
公式サイトをみて、これは便利かも、と思った機能を紹介

ヘッダーにツールチップ

変数名は物理名にして、ツールチップで論理名を出す使い方ができそう。tooltip_headerのオブジェクト構成は、カラム名：表示する文字列　となるので注意。公式のサンプルだと、
{i:i for in df.columns}になっているが、df.columnsを入れ替えるだけではない。

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],

    tooltip_header={i: j for i,j in zip(df.columns,[
        '犯罪発生率',
        '25,000平方フィート以上の住宅区画の割合',
        '非小売業種の土地面積の割合',
        'チャールズ川沿いか否か',
        '窒素酸化物の濃度',
        '平均部屋数',
        '1940年より前に建てられた建物の割合',
        '5つのボストンの雇用施設への重み付き距離',
        '高速道路へのアクセスのしやすさ',
        '10,000ドルあたりの不動産税率',
        '生徒と教師の割合',
        '黒人の割合',
        '低所得者の割合'
    ])},

    # Style headers with a dotted underline to indicate a tooltip
    style_header={
        'textDecoration': 'underline',
        'textDecorationStyle': 'dotted',
    },

    # Overflow into ellipsis
    style_cell={
        'overflow': 'hidden',
        'textOverflow': 'ellipsis',
        'maxWidth': 0,
    },
    tooltip_delay=0,
    tooltip_duration=None
)
app.run_server(mode="inline")

https://dash.plotly.com/datatable/tooltips

編集機能

編集機能はこの他にもたくさんあります。この編集した内容を反映させたデータテーブルを

• ダウンロード
• グラフに、リアルタイムアップデート
  することも可能です。

動作	書き方
セルの値の編集-1	editable=True
セルの値の編集-2	ドロップダウン機能
入力値のバリデーション	参照
行の削除	row_deletable=True
列の削除	参照 Row IDs

まとめ

なにげなく使っていたものの、知らない機能ばかりでした。dashの便利さを改めて知る良い機会となりました。