I am trying to develop a simple web application to allow a user to edit the data using dash datatable. I am using an excel data. Following the sample from dash site.
when I try to add a new column or row or edit the data I get the following error:
Failed to execute 'querySelector' on 'Element': 'tr:nth-of-type(1) th[data-dash-column="New Category"]:not(.phantom-cell)' is not a valid selector.
Here is my code below:
import pandas as pd
from dash import Dash, dash_table, dcc, html
from dash.dependencies import Input, Output, State
data = pd.read_excel("./data/data.xlsx")
app = Dash(__name__)
app.layout = html.Div(
[
html.Div(
[
dcc.Input(
id="adding-rows-name",
placeholder="Enter a column name...",
value="",
style={"padding": 10},
),
html.Button("Add Column", id="adding-rows-button", n_clicks=0),
],
style={"height": 50},
),
dash_table.DataTable(
id="adding-rows-table",
columns=[
{"id": c, "name": c, "deletable": True, "renamable": True}
for c in data.columns
],
data=data.to_dict("records"),
editable=True,
row_deletable=True,
page_size=10,
),
html.Button("Add Row", id="editing-rows-button", n_clicks=0),
]
)
@app.callback(
Output("adding-rows-table", "data"),
Input("editing-rows-button", "n_clicks"),
State("adding-rows-table", "data"),
State("adding-rows-table", "columns"),
)
def add_row(n_clicks, rows, columns):
if n_clicks > 0:
rows.append({c["id"]: "" for c in columns})
return rows
@app.callback(
Output("adding-rows-table", "columns"),
Input("adding-rows-button", "n_clicks"),
State("adding-rows-name", "value"),
State("adding-rows-table", "columns"),
)
def update_columns(n_clicks, value, existing_columns):
if n_clicks > 0:
existing_columns.append(
{"id": value, "name": value, "renamable": True, "deletable": True}
)
return existing_columns
if __name__ == "__main__":
app.run_server(debug=True)
Any ideas on what could be wrong?