突出显示 Dash 数据表中的选定行

Question

我希望仅突出显示 Dash 数据表中选定的行，但我只能让它突出显示表中的所有单元格或根本不突出显示任何单元格。我尝试使用的 app.callback 是从代码中修改的，以突出显示选定的列（在此处找到）：

@app.callback(Output('datatable-interactivity', 'style_data_conditional'),
             [Input('datatable-interactivity', 'selected_rows')])
def update_styles(selected_rows):
    return [{'if': {'derived_virtual_selected_row_ids': i}, 'background_color': '#D2F3FF'} for i in selected_rows]

Answer 1

当我最初查看plotly 的文档时，我遇到了类似的问题。您的表数据中必须有一个“id”键/值，可用于唯一标识该数据行。您还需要在 if 语句中使用“filter_query”。请参阅下面的示例。

@app.callback(
    Output("table", "style_data_conditional"),
    Input("table", "derived_virtual_selected_row_ids"),
)
def style_selected_rows(sel_rows):
    if sel_rows is None:                                                                                                                                                                                                                      
        return dash.no_update
    val = [
        {"if": {"filter_query": "{{id}} ={}".format(i)}, "backgroundColor": "#404040",}
        for i in sel_rows
    ]   
    return val

Answer 2

我相信你的情况应该检查

row_index

而不是

derived_virtual_selected_row_ids

。

Answer 3

我正在处理同样的问题，我希望能够单击表格中的任意位置并让它选择该行，我得到了它的工作，但结果并不漂亮......

第一次选择单元格时，它仍然显示红色背景，即使我在表格设置中将背景设置为我想要的蓝色。然后，当我使用所选单元格作为触发器选择它所在的行时，会出现明显的延迟...我还必须将 SELECTED_CELLS 属性清零，因为即使我设置了 active_cell，它仍然显示所选单元格红色，即使我设置了背景...

但是这是作为完整示例的代码，如果有人知道如何清理它，我正在听......:

from dash import Dash, Input, Output, State, dcc, html, no_update, dash_table
import dash_bootstrap_components as dbc
import pandas as pd

external_stylesheets = [dbc.themes.BOOTSTRAP]
app = Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv('https://git.io/Juf1t')
df['id'] = df.State

app.layout = dbc.Container([
    dbc.Label('Click a cell in the table:'),
    dash_table.DataTable(
        df.to_dict('records'),
        columns=[{"name": i, "id": i} for i in df.columns[:-2]],
        row_selectable='single',
        cell_selectable=True,
        style_data_conditional=[
            {
                "if": {
                    "state": "active"  # 'active' | 'selected'
                },
                "backgroundColor": "rgba(0, 116, 217, 0.3)",
                "border": "1px solid rgb(0, 116, 217)",
            },
            {
                "if": {
                    "state": "selected"  # 'active' | 'selected'
                },
                "backgroundColor": "rgba(0, 116, 217, 0.3)",
                "border": "1px solid rgb(0, 116, 217)",
            }

        ],
        id='tbl'),
    dbc.Alert(id='tbl_out'),
    dbc.Alert(id='tbl_out2'),
])


@app.callback(
    (
        Output('tbl_out', 'children'),
        Output('tbl','selected_rows'),
    ), Input('tbl', 'active_cell'),
    prevent_initial_call=True)
def update_graphs(active_cell):
    return (
        str(active_cell),
        [active_cell['row']],
    ) if active_cell else (str(active_cell),no_update)


@app.callback(
    (
        Output('tbl_out2', 'children'),
        Output('tbl','style_data_conditional'),
        Output('tbl','active_cell'),
        Output('tbl','selected_cells')
    ),
    Input('tbl', 'derived_viewport_selected_row_ids'),
    State('tbl', 'derived_viewport_selected_rows'),
    State('tbl', 'active_cell'),
    State('tbl', 'selected_cells'),
    prevent_initial_call=True)
def update_graphs2(selected_row_ids,selected_rows, active_cell, selected_cells):
    if selected_row_ids:
        if active_cell:
            active_cell['row'] = selected_rows[0]
        else:
            active_cell = no_update
        return (
            str(f'{selected_row_ids} {selected_rows} {active_cell} {selected_cells}'),
            [
                {
                    "if": {
                        "filter_query": "{{id}} = '{}'".format(i)
                    },
                    "backgroundColor": "rgba(0, 116, 217, 0.3)",
                    "border": "1px solid rgb(0, 116, 217)",
                } for i in selected_row_ids
            ] + [
                {
                    "if": {
                        "state": "active"  # 'active' | 'selected'
                    },
                    "backgroundColor": "rgba(0, 116, 217, 0.3)",
                    "border": "1px solid rgb(0, 116, 217)",
                }
            ],
            active_cell,
            []
        )
    else:
        return ("Click the table", [], no_update, [])
    
if __name__ == '__main__':
    app.run_server(debug=True)