Dash 第52回（テーブルの表示幅変更とヘッダー固定表示）

テーブルの表示幅変更とヘッダー固定表示

前回記事ではCSVファイルを読み込んでテーブルに表示しました。

今回はそのテーブルのスタイルを設定します。

まずセルの横幅を均等にするため、‘maxWidth’と‘minWidth’に同じ値を設定します。（16～17行目）

次にセルの内容を折り返すために、‘whiteSpace’に‘normal’を設定します。（18行目）

行ヘッダーを固定するため引数 fixed_rowsに、キーが‘headers’、値がTrueである辞書データを設定します。（20行目）

最後に、引数 style_tableに100%を設定し、テーブルに縦スクロールと横スクロールが表示されるようにします。（21行目）

[ソースコード]

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')
        )
    ]
)

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

[ブラウザで表示]

セルの横幅が均等で、セルの内容が折り返して表示されています。

また、縦横にスクロールが表示されており、縦にスクロールしてもヘッダーが固定して表示されることを確認できます。