plotly dashで1つのCallbackから複数テーブル出力

仲間内の麻雀スコアをつけるために作ったサイトですが個人スコアのカラムが多くてスマホで見づらくなってしまいました。
(マルチデバイスでの試験はしていないんだ。すまんな)

カラム幅はドラッグで変更できるとはいえ切れすぎてカラム名もわからない状態です。

今時スマホからの可読性は大事なのでテーブルを分割することにしました。

現在のテーブル

サンプルデータを読み込みます。

スマホでみるとこうなります。
(スクショは一部切り取ってます)

もうタイトル行が見えません。
分割したほうがいいですね。

1つのCallbackから複数テーブルを出力するには

同じ処理2つ作るのイケてないなあと思ったらreturnの値に紐付けてOutputを増やせば1つのCallbackで複数出力できる様です。

community.plotly.com

これを参考に。

スコアのテーブルを作る処理を2つに分けてそれぞれ出力してあげればいいですね。
名前含めて7カラムあるので前半4つ、名前+後半3つの4カラムテーブルを2つ出力します。

html部分は割愛しますが差分はこれだけ。

@@ -86,8 +86,7 @@ def display_score_table(value, match):


 @callback(
-    Output('tscore-table1', 'children'),
-    Output('tscore-table2', 'children'),
+    Output('tscore-table', 'children'),
     Input('dropdown-data', 'value'),
     Input('gamematch', 'value'),
     prevent_initial_call=True
@@ -95,32 +94,17 @@ def display_score_table(value, match):
 def create_grid_tscore(value, match):
     df = readfile(value, match)
     df_tscore = summary.CalculateScore(df)
-    headers1 = ['名前', '対局数', '平均スコア', '最高スコア']
-    headers2 = ['名前', '平均順位', '4位回避率(%)', '雀力偏差値']
+    headers = ['名前', '対局数', '平均スコア', '最高スコア', '平均順位', '4位回避率(%)', '雀力偏差値']

-    table1 = list()
-    table2 = list()
-
-    for t in df_tscore:
-        table1.append(t[0:4])
-        table2.append(t[0:1]+t[4:])
-
-    sumscore = pd.DataFrame(table1, columns=headers1)
-    tscore = pd.DataFrame(table2, columns=headers2)
-
-    grid_sumscore = dag.AgGrid(
-        rowData=sumscore.to_dict("records"),
-        columnDefs=[{"field": i} for i in sumscore.columns],
-        columnSize="responsiveSizeToFit"
-        )
+    tscore = pd.DataFrame(df_tscore, columns=headers)

     grid_tscore = dag.AgGrid(
         rowData=tscore.to_dict("records"),
         columnDefs=[{"field": i} for i in tscore.columns],
         columnSize="responsiveSizeToFit"
-        )
+    )

-    return grid_sumscore, grid_tscore
+    return grid_tscore