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ファイルでダウンロードできます。

Dash 第54回（テーブルの行削除と行選択）

テーブルの行削除と行選択

DataTableコンポーネントには、属性を設定し行の削除や行の選択を可能にすることができます。

row_deletable属性にTrueを設定すると行の先頭に×マークが表示され行の削除ができるようになります。（26行目）

またrow_selectable属性に‘single’を指定すると行を１つ選択することができるようになり、‘multi’を指定すると行を複数選択することができようになります。（27行目）

[ソースコード]

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
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'      # 複数行の選択を可能に
        )
    ]
)

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

[ブラウザで表示]

行先頭の×マークをクリックすると行が削除され、チェックボックスをクリックすると複数行を選択することができます。

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)      # アプリケーションを起動

[ブラウザで表示]

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

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

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

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

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

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

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

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

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

最後に、引数 style_tableに100%を設定し、テーブルに縦スクロールと横スクロールが表示されるようにします。（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
26
27
28
29
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)      # アプリケーションを起動

[ブラウザで表示]

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

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

Dash 第51回（CSVファイルをテーブル表示）

CSVファイルをテーブル表示

今回は、CSVファイルの内容をテーブルに表示してみます。

CSVファイルは下記のURLからダウンロードします。

ckan - 福岡市　避難場所・避難所（共通フォーマット）

CSVファイルをテーブルに表示するソースは下記の通りです。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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(
            columns=[{'name':col, 'id':col} for col in df.columns],
            data=df.to_dict('records')
        )
    ]
)

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

処理フローは以下の通りです。

  1. read_csv関数でCSVファイルを読み込む。（6行目）
  2. DataTableコンポーネントの引数 columnsに列名を設定する。（13行目）
  3. DataTableコンポーネントの引数 dataに値を設定する。（14行目）

[ブラウザで表示]

CSVファイルをテーブルに表示することができました。

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)      # アプリケーションを起動

[ブラウザで表示]

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

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を設定する。

Dash㊽（DataTableコンポーネント　オプション設定その２）

DataTableコンポーネントには、いろいろなオプション設定を行うことができます。

オプション設定２

DataTableクラスの引数に次のキーを設定してみます。

  • hideable
    Trueを設定すると、列データを非表示にするボタンが表示され、ボタンを押すと列が非表示になります。（8行目）
  • renamable
    Trueを設定すると、列名を変更するボタンが表示され、ボタンを押すと列名を変更することができる入力ダイアログが表示されます。（9行目）
  • selectable
    Trueを設定すると、列にチェックボックスまたはラジオボタンが表示され、列を選択することができます。（10,20行目）

[ソースコード]

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
import dash
import dash_table

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

app.layout = dash_table.DataTable(
    columns=[
        {'name':'No.', 'id':'number','hideable':True},          # 列を隠す
        {'name':'地域', 'id':'area','renamable':True},          # 列名変更
        {'name':'梅雨入り', 'id':'tsuyuiri','selectable':True}  # 列を選択
    ],
    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'}
    ],
    column_selectable="single",                                 # 列にラジオボタン表示。"multi"を指定するとチェックボックスが表示される。
    #row_selectable="multi",
    #fill_width=False    # テーブルを画面いっぱいにしない
)

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

[ブラウザで表示]

１つめの列の項目名に表示されているボタンを押すと、その列が非表示になります。
Toggle Columnsから列名を選択すると再び列を表示することができます。

２つめの列の項目名に表示されているボタンを押すと、入力ダイアログが表示され列名を変更することができます。

３つめの列にはラジオボタンが表示されており、列を選択することができます。

Dash㊼（DataTableコンポーネント　オプション設定その１）

DataTableコンポーネントには、いろいろなオプション設定を行うことができます。

オプション設定１

DataTableクラスの引数に次のキーを設定してみます。

  • clearable
    Trueを設定すると、列データを消去するボタンが表示され、ボタンを押すとデータが全て削除されます。（8行目）
  • deletable
    Trueを設定すると、列を削除するボタンが表示され、ボタンを押すと列が非表示となります。（9行目）
    非表示となった列を再表示するには、ブラウザの更新ボタンを押す必要があります。
  • editable
    Trueを設定すると、列データを編集することができるようになります。（10行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import dash
import dash_table

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

app.layout = dash_table.DataTable(
    columns=[
        {'name':'No.', 'id':'number','clearable':True},         # データ消去
        {'name':'地域', 'id':'area','deletable':True},          # 列を削除
        {'name':'梅雨入り', 'id':'tsuyuiri','editable':True}    # データ編集可
    ],
    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'}
    ],
    #fill_width=False    # テーブルを画面いっぱいにしない
)

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

[ブラウザで表示]

１つめの列の項目名に表示されているボタンを押すと、その列のデータが全て表示されます。

２つめの列の項目名に表示されているボタンを押すと、その列自体が非表示になります。

３つ目の列のデータに関しては、選択してデータを編集することが可能です。

Dash㊻（DataTableコンポーネント）

DataTableコンポーネント

DataTableコンポーネントを使うと、インタラクティブなテーブルを作成することができます。

まずは、DataTableコンポーネントに列名とデータのみを設定した６行３列のテーブルを作成します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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'}
    ],
    #fill_width=False    # テーブルを画面いっぱいにしない
)

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

columns属性にテーブルの列名、data属性にテーブルに表示するデータを設定します。

データとしては辞書型データをリストに格納しています。

引数columnsに渡す辞書のキーには‘name’と‘id’の２つが必須となります。

‘name’キーはテーブルに表示される列名の設定に使います。

引数 fill_widthにTrue（デフォルト値）を設定すると画面の横幅を全て使い、Falseを設定すると各列の値や列名の長さに合わせて調整されます。（20行目）

[ブラウザで表示]

設定したデータがテーブルに表示されることを確認できました。