Dash 第55回（テーブルのソートとエクスポート）

テーブルのソートとエクスポート

DataTableコンポーネントには、属性を設定しソートやエクスポートを可能にすることができます。

  • sort_action属性
    ‘native’を設定すると、項目名に上下マークが表示されソート可能になる。（28行目）
    ‘custom’を設定すると、コールバックを使ったカスタマイズが可能になる。
  • sort_mode属性
    ‘single’を設定すると、１つの列のソートが可能になる。
    ‘multi’を設定すると、複数列のソートが可能になる。（29行目）
  • export_format属性
    ‘csv’を設定すると、テーブルに表示されているデータをCSVファイルでダウンロードできるようになる。（30行目）

[ソースコード]

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
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",
            row_deletable=True,
            row_selectable='multi',
            sort_action='native',       # 列のソートを可能に
            sort_mode='multi',          # 複数列のソートを可能に
            export_format='csv'         # エクスポートの設定
        )
    ]
)

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

[ブラウザで表示]

項目名の左に表示されている上下マークをクリックすると列をソートすることができます。

また、テーブルの左上に表示されているexportボタンをクリックすると、表示されているデータをCSVファイルでダウンロードできます。