Dash 第53回(テーブルの編集とフィルター)

テーブルの編集とフィルター

DataTableコンポーネントには、属性を設定しセルの編集機能フィルター機能を追加することができます。

editable属性Trueを設定すると全てのセルが編集可能になります。(24行目)

またfilter_action属性‘native’を設定すると、フィルタリングができるようになります。(25行目)

[ソースコード]

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
import dash
import dash_html_components as html
import dash_table
import pandas as pd

df = pd.read_csv('401307compatibleformatshelter.csv', encoding='cp932')

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

app.layout = html.Div(
[
dash_table.DataTable(
# セルサイズの設定
style_cell={
'textAliign':'center', # テキストを中央寄せ
'maxWidth':'80px', # 最大横幅
'minWidth':'80px', # 最小横幅
'whiteSpace':'normal' # 文字を折り返して表示
},
fixed_rows={'headers':True}, # 縦スクロール時にヘッダーを固定
style_table={'minWidth':'100%'}, # テーブル全幅表示
columns=[{'name':col, 'id':col} for col in df.columns],
data=df.to_dict('records'),
editable=True, # セルを編集可能に
filter_action="native" # フィルタリングを可能に
)
]
)

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

[ブラウザで表示]

選択したセルに対して、編集ができるようになっています。

またフィルタリングエリアに入力すると、その入力値を含んだデータだけが表示されます。