Dash㊿（DataTableコンポーネント　要素ごとにスタイル設定）

要素ごとにスタイル設定

今回は、style_《target》_conditional属性を使って、条件に応じたスタイルの設定を行います。

  • style_cell_conditional
    列全体のスタイルを設定します。
    IDが’number’の列にフォントサイズと背景色を設定しています。（22～28行目）
  • style_header_conditional
    ヘッダー部のスタイルを設定します。
    IDが’area’の列のヘッダーに中央揃えと横幅を設定し、IDが’tsuyuiri’の列のヘッダーに背景色を設定しています（31～34行目）
  • style_data_conditional
    データ部のスタイルを設定します。
    偶数行に背景色を設定し、’number’が3より大きい’tsuyuiri’のデータの背景色を設定しています。（37～43行目）

[ソースコード]

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
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'}
    ],

    # 列全体のスタイル
    style_cell_conditional=[
        {
            'if':{'column_id':'number'},
            'fontSize':16,
            'backgroundColor':'#FFEEE0'
        }
    ],

    # ヘッダー部のスタイル
    style_header_conditional=[
        {'if':{'column_id':'area'}, 'textAlign':'center', 'width':120},
        {'if':{'column_id':'tsuyuiri'}, 'backgroundColor':'#FBFFB9'}
    ],

    # データ部のスタイル
    style_data_conditional=[
        {'if':{'row_index':'odd'}, 'backgroundColor':'#FBFFB9'},
        {
            'if':{'column_id':'tsuyuiri', 'filter_query':'{number} > 3'},
            'backgroundColor':'#41D3B0'
        }
    ],
    
)

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

[ブラウザで表示]

条件に指定した通りにスタイルが設定されていることが確認できました。