Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Unable to edit datatable | Help

hi guys,

Wondering, i have an app where i load the chart and the table from a callback, now, once that happends i need to edit the table and get the chart changed, i was trying to use: derived_virtual_row_ids, but when i add this in the input and run the server i cannot edit and the server goes crazy like updating every 3 miliseconds,

from dash.dependencies import Input, Output
import dash_table as dt
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import pymysql as psql
from django_plotly_dash import DjangoDash
import plotly.graph_objects as go



app2.layout = html.Div([
    dcc.Graph(id='table-editing-simple-output'),
    dcc.Interval(
        id='interval_',
        interval=2000 * 1000,
        n_intervals=0
        ),

    dt.DataTable(id="table",
                 columns= [
                     {"name": x, "id": x} for x in params
                 ],
                data=[],
                editable=True,
                sort_action="native",
                sort_mode='multi',
                row_selectable='multi',
                row_deletable=False,
                selected_rows=[],
                page_action='native',
                page_current= 0,
                page_size= 10,
                style_cell={
                        'whiteSpace': 'normal',
                        'height': 'auto',
                },
                 ),

    html.Div(id='datatable-interactivity-container')

])


@app2.callback(
    [Output('table-editing-simple-output', 'figure'), Output('table', 'data')],
    [Input("interval_", "n_intervals"), Input("table", "derived_virtual_row_ids"]
)
def display_output(rows):
    print(rows)
    dff = pd.DataFrame(rows)
    #df = pd.DataFrame(rows, columns=[c['name'] for c in columns])
    qry = """SELECT * FROM new_schema_excel.xto_dvd_larger_file WHERE id < 25"""
    cnx = psql.connect(db='', user='', passwd='', port=3306)
    df = pd.read_sql_query(qry, cnx)
    x=df['id']
    y=df['End Depth']
    y2 = df['Start Depth']

    #Data for the table to retrieve
    # data_table = df.to_dict('records')
    # data_columns = [
    #     {"name": i, "id": i} for i in df.columns
    # ]


    chart = go.Scatter(
        x=x,
        y=y
    )

    chart2 = go.Scatter(
        x=x,
        y=y2
    )


    data = [chart, chart2]

    layout = go.Layout(

        paper_bgcolor="white",
        plot_bgcolor='white',
        yaxis=dict(autorange='reversed'),
        hovermode='closest',
        xaxis=dict(showspikes=True),
        showlegend=True
    )
    return {
        'data': data, "layout": layout}, df.to_dict('records')

how can i accomplish to pass the data from datatable to the chart? do i need another callback?

Hi @eddcanada

Looks like you need to add another parameter to the callback — currently n_intervals is assigned to rows