允許用戶在破折號中對表進行排序（圖形對象表）

Question

賞金將在 3 天后到期。 此問題的答案有資格獲得+50聲望賞金。 Khushi Mehta想讓更多人關注這個問題。

我創建了一個破折號應用程序，其中顯示了一些表格。

我找不到如何允許用戶根據值對表進行排序。 我沒有發現他們的文檔有任何用處。

我可以創建一個自定義 function 用戶可以在其中 select 列並且我可以顯示根據該列排序的數據嗎？

這是我的表格代碼：

basic_max_3=go.Figure(data=[go.Table(
    columnwidth=[80, 400,80],
    header=dict(values=list(
        ['col_1', 'col_2','col_3', 'col_4']),
                fill_color=px.colors.qualitative.Pastel2[6],
                align='left'),
    cells=dict(
        values=[df['col_1'], df['col_2'],df['col_3'], df['col_4']],
        fill_color=px.colors.qualitative.Pastel1[8],
        align='left',height=70))], layout=layout_max)

Answer 1

您可以使用表 object 的 sort_action 屬性在您的 Dash 應用程序中啟用排序。 sort_action 屬性采用字符串值，“native”或“custom”。 如果將其設置為“本機”，表格將使用 web 瀏覽器的默認排序行為進行排序。 如果將其設置為“自定義”，則可以使用 sort_function 屬性指定自定義排序 function。

下面是一個示例，說明如何使用這些屬性在表中啟用排序：

import dash
import dash_html_components as html
import dash_table

app = dash.Dash()

df = pd.DataFrame({
    'col_1': [1, 2, 3, 4],
    'col_2': ['A', 'B', 'C', 'D'],
    'col_3': [5, 6, 7, 8],
    'col_4': ['E', 'F', 'G', 'H']
})

app.layout = html.Div([
    dash_table.DataTable(
        id='table',
        columns=[{'name': col, 'id': col} for col in df.columns],
        data=df.to_dict('records'),
        sort_action='custom',
        sort_mode='multi',
        sort_function=sort_function
    )
])

def sort_function(sort_columns, ascending, data_frame):
    # sort the data frame based on the sort_columns and ascending values
    df_sorted = data_frame.sort_values(
        by=sort_columns,
        ascending=ascending
    )
    return df_sorted.to_dict('records')

if __name__ == '__main__':
    app.run_server(debug=True)

在此示例中，sort_function 是自定義 function，它采用三個 arguments：sort_columns、ascending 和 data_frame。 sort_columns 參數是要排序的列名列表，ascending 參數是 boolean 個值的列表，指示是按升序還是降序對每一列進行排序，data_frame 參數是原始數據框。

sort_function 應該將排序后的數據框作為字典列表返回，每個字典代表表中的一行。

Answer 2

可以使用updatemenu方法修改表的數據。

即數據框根據選定的列進行排序，表格單元格中的數據將替換為排序后的數據（另請參見下拉列表介紹）。

import pandas as pd 
import numpy as np
import plotly
import plotly.express as px
import plotly.graph_objects as go

# some dummy data
length = 6
data = {
    'col_1': np.random.choice(['cat', 'mouse', 'dog'], length),
    'col_2': np.random.randint(-10, 0, length),
    'col_3': np.random.choice(['a', 'b', 'c', 'd'] , length),
    'col_4': np.random.randint(1, 10, length),
       }
df = pd.DataFrame(data)

# table
basic_max_3=go.Figure(data=[go.Table(
    #columnwidth=[80, 400,80], # didn't fit for dummy data :)
    header=dict(values=list(
        ['col_1', 'col_2','col_3', 'col_4']),
                fill_color=px.colors.qualitative.Pastel2[6],
                align='left'),
    cells=dict(
        values=[df['col_1'], df['col_2'],df['col_3'], df['col_4']],
        fill_color=px.colors.qualitative.Pastel1[8],
        align='left',height=70))]#, layout=layout_max)  # layout_max commented as unknown and not required here
    )
fig = basic_max_3
# drop down to select a column label and sort the data
fig.update_layout(
    updatemenus=[
        {
            # a button for each table column
            'buttons': [
                {
                    'method': 'restyle',
                    'label': btn_label,
                    'args': [
                        {
                            'cells': {
                                'values': df.sort_values(btn_label).T.values,  # update the cell values with the sorted data 
                                # format table as before
                                'fill': dict(color = px.colors.qualitative.Pastel1[8]),
                                'align': 'left',
                                'height': 70
                            }
                        }
                    ],
                }
                for btn_label in ['col_1', 'col_2', 'col_3', 'col_4',]
            ],
            'direction': 'down',
        }
    ]
)

fig.show()