Dash㉕（レイアウトごとのコールバック　テーブル編）

レイアウトごとのコールバック（テーブル）

前回記事では、画面遷移先のページのグラフにコールバックを追加しました。

今回は画面遷移先のテーブルにコールバックを追加します。

前回同様 suppress_callback_exceptions に True を設定し、コールバックで使われるIDとレイアウトに存在するIDの一致チェックを無効化します。（10行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import plotly.graph_objects as go
from dash.dependencies import Input, Output

iris = px.data.iris()   # データの読み込み

app = dash.Dash(__name__, suppress_callback_exceptions=True)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        dcc.Location(id='location1'),
        html.Br(),
        dcc.Link('home', href='/'),
        html.Br(),
        dcc.Link('/table', href='/table'),
        html.Br(),
        html.Div(
            id='div1',
            style={'fontSize':'40', 'textAlign':'center', 'height':350}
        )
    ],
    style={'fontSize':'40', 'textAlign':'center'}
)

# ページごとのコンテンツ作成
home = html.H1('irisデータ')

# テーブル用
table = html.Div(
    [
        html.Div(
            [
                dcc.Dropdown(
                    id='dropdown1',
                    options=[
                        {'label':col, 'value':col} for col in iris.columns[:4]
                    ],
                    multi=True,
                    value=['sepal_length', 'sepal_width']
                )
            ],
            style={'width':'60%', 'margin':'auto'}
        ),
        dcc.Graph(id='table1')
    ]
)

# ページ切替用コールバック
@app.callback(
    Output('div1', 'children'),
    Input('location1', 'pathname')
)
def update_location(pathname):
    # pathnameごとにコンテンツを返す
    if pathname == '/table':
        return table
    else:
        return home

# テーブル更新用コールバック
@app.callback(
    Output('table1', 'figure'),
    Input('dropdown1', 'value')
)
def update_table(selected_value):
    iris_df = iris[selected_value]
    return go.Figure(
        data=go.Table(
            header={'values':iris_df.columns},
            cells={'values':[iris_df[col].tolist() for col in iris_df.columns]}
        ),
        layout=go.Layout(title='irisデータテーブル')
    )

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

[ブラウザで表示]

テーブル画面に遷移した後に、ドロップダウンから項目を選択するとその項目がテーブルに追加されます。

ドロップダウンで選択されている項目の×マークを選択すると、その項目がテーブルから削除されます。