Dash㊼（DataTableコンポーネント　オプション設定その１）

DataTableコンポーネントには、いろいろなオプション設定を行うことができます。

オプション設定１

DataTableクラスの引数に次のキーを設定してみます。

  • clearable
    Trueを設定すると、列データを消去するボタンが表示され、ボタンを押すとデータが全て削除されます。（8行目）
  • deletable
    Trueを設定すると、列を削除するボタンが表示され、ボタンを押すと列が非表示となります。（9行目）
    非表示となった列を再表示するには、ブラウザの更新ボタンを押す必要があります。
  • editable
    Trueを設定すると、列データを編集することができるようになります。（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
import dash
import dash_table

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

app.layout = dash_table.DataTable(
    columns=[
        {'name':'No.', 'id':'number','clearable':True},         # データ消去
        {'name':'地域', 'id':'area','deletable':True},          # 列を削除
        {'name':'梅雨入り', 'id':'tsuyuiri','editable':True}    # データ編集可
    ],
    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)      # アプリケーションを起動

[ブラウザで表示]

１つめの列の項目名に表示されているボタンを押すと、その列のデータが全て表示されます。

２つめの列の項目名に表示されているボタンを押すと、その列自体が非表示になります。

３つ目の列のデータに関しては、選択してデータを編集することが可能です。