Dash㊽(DataTableコンポーネント オプション設定その2)

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

オプション設定2

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

  • hideable
    Trueを設定すると、列データを非表示にするボタンが表示され、ボタンを押すと列が非表示になります。(8行目)
  • renamable
    Trueを設定すると、列名を変更するボタンが表示され、ボタンを押すと列名を変更することができる入力ダイアログが表示されます。(9行目)
  • selectable
    Trueを設定すると、列にチェックボックスまたはラジオボタンが表示され、列を選択することができます。(10,20行目)

[ソースコード]

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
import dash
import dash_table

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

app.layout = dash_table.DataTable(
columns=[
{'name':'No.', 'id':'number','hideable':True}, # 列を隠す
{'name':'地域', 'id':'area','renamable':True}, # 列名変更
{'name':'梅雨入り', 'id':'tsuyuiri','selectable':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'}
],
column_selectable="single", # 列にラジオボタン表示。"multi"を指定するとチェックボックスが表示される。
#row_selectable="multi",
#fill_width=False # テーブルを画面いっぱいにしない
)

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

[ブラウザで表示]

1つめの列の項目名に表示されているボタンを押すと、その列が非表示になります。
Toggle Columnsから列名を選択すると再び列を表示することができます。

2つめの列の項目名に表示されているボタンを押すと、入力ダイアログが表示され列名を変更することができます。

3つめの列にはラジオボタンが表示されており、列を選択することができます。