如何在 Dash DataTable 上的特定行上启用编辑

Question

我想在破折号数据表上启用对特定行的修改，到目前为止我们可以启用按列编辑，但我不想对整列启用编辑，我只想在特定行上启用它. 我可以使用style_data_conditional 突出显示该行：

style_data_conditional = [
                {
                    "if": {"column_id": x, "row_index": 2},
                    "backgroundColor": 'red',
                    "cursor": "pointer",
                }
                for x in df.columns[2:]
            ]

但我想让这一行也可编辑。

Answer 1

一种方法是让整个 DataTable 可编辑，并使特定行不可使用 css 编辑。

import dash
import dash_table
import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id="table",
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict("records"),
    editable=True,
)


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

当DataTable 不可编辑时，td 包含一个 div，其中包含单元格文本。当它可编辑时，带有单元格文本的 div 的不透明度设置为 0，并添加了带有单元格值的输入。

我们可以添加一些css 来删除这个输入，并将单元格值的 div 的opacity 设置为1 用于td 元素，其中data-dash-row 属性不等于某个行号：

td:not([data-dash-row="2"]) div.input-cell-value-shadow {
  opacity: 1 !important
}

td:not([data-dash-row="2"]) input {
  display: none;
}

所以上面的样式使得只有DataTable 的第三行是可编辑的。