Dash㊻（DataTableコンポーネント）

DataTableコンポーネント

DataTableコンポーネントを使うと、インタラクティブなテーブルを作成することができます。

まずは、DataTableコンポーネントに列名とデータのみを設定した６行３列のテーブルを作成します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import dash
import dash_table

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

app.layout = dash_table.DataTable(
    columns=[
        {'name':'No.', 'id':'number'},
        {'name':'地域', 'id':'area'},
        {'name':'梅雨入り', 'id':'tsuyuiri'}
    ],
    data=[
        {'number':0, 'area':'沖縄地方', 'tsuyuiri':'5/17'},
        {'number':1, 'area':'九州南部', 'tsuyuiri':'5/31'},
        {'number':2, 'area':'九州北部', 'tsuyuiri':'6/25'},
        {'number':3, 'area':'四国地方', 'tsuyuiri':'6/27'},
        {'number':4, 'area':'中国地方', 'tsuyuiri':'6/27'},
        {'number':5, 'area':'近畿地方', 'tsuyuiri':'6/28'}
    ],
    #fill_width=False    # テーブルを画面いっぱいにしない
)

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

columns属性にテーブルの列名、data属性にテーブルに表示するデータを設定します。

データとしては辞書型データをリストに格納しています。

引数columnsに渡す辞書のキーには‘name’と‘id’の２つが必須となります。

‘name’キーはテーブルに表示される列名の設定に使います。

引数 fill_widthにTrue（デフォルト値）を設定すると画面の横幅を全て使い、Falseを設定すると各列の値や列名の長さに合わせて調整されます。（20行目）

[ブラウザで表示]

設定したデータがテーブルに表示されることを確認できました。