Dash㊾（DataTableコンポーネント　スタイル設定）

スタイル設定

DataTableコンポーネントは、テーブル全体からセル単位までいろいろとスタイルの設定をすることができます。

今回はDataTableコンポーネントの引数 style_cellを定義し、全てのセルに対してスタイルの設定を行います。（21行目）

[ソースコード]

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
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={'width':160, 'fontSize':24, 'textAlign':'center'}
)

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

[ブラウザで表示]

セル全体にスタイルが設定されていることを確認できます。

テーブル設定引数

テーブルのスタイル設定には、下記の引数を使用することができます。

引数 データ型 内容
style_table 辞書型 tableコンテナの外側に適用されるCSSを設定する。
テーブルの高さや横幅の設定に用いる。
style_cell 辞書型 ヘッダーを含むテーブル全体のセルに適用されるCSSを設定する。
style_data 辞書型 ヘッダーを除くセル（data属性）に適用されるCSSを設定する。
style_filter 辞書型 フィルタセルに適用されるCSSを設定する。
style_header 辞書型 テーブルのヘッダーに適用されるCSSを設定する。