Introducing Dash DataTable 🎉

This looks super interesting! We’re looking to integrate our table into dash and there seem to be some overlapping features, I wonder if theres any opportunity to combine work:

2 Likes

A post was split to a new topic: Can’t install dash-table==3.1.7

this is taking a bit more shape https://github.com/timkpaine/perspective-dash-component

demo: http://perspective-dash.herokuapp.com/

1 Like

A post was split to a new topic: Word wrapping with Dash DataTable

Hi,

I am using dash table currently to create a dashboard. I am stuck on an issue where I want to merge certain cells as they are repeating over a set of rows. I can’t seem to find a solution to it. The image below explains it (created in excel). Can you help me out with this?

Image

Best,
Vivek

2 Likes

I does not work with categories type data. I have tried to display data from following dataframe (it is returned by a function, so it does not have fixed column names):
range

It throws the following error:

dash.exceptions.InvalidCallbackReturnValue: 
The callback for property `rows`
of component `drugcat` returned a value
which is not JSON serializable.

In general, Dash properties can only be
dash components, strings, dictionaries, numbers, None,
or lists of those.

Can you please help me out I need help
My drop down is not interacting with my data table nor is my graph
Can you guys please help

This is my code

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.css.append_css({
    "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})
app.layout=html.Div([
    html.Div([
        html.Div([
        html.H1('Arasmeta')
        ]
        ),
            # Select Division Dropdown

        html.Div([

            html.Div('Site', className='three columns'),
            html.Div(dcc.Dropdown(id='site',
                                      options=[{'label':i, 'value' : i} for i in df['Site'].unique()]),
                         className='nine columns')
        ]
        ),

        html.Div([
            html.Div('Department', className='three columns'),
            html.Div(dcc.Dropdown(id='dept'),
                         className='nine columns')
        ]
        ),

            # Select Season Dropdown
        html.Div([
            html.Div('Equipment Name', className='three columns'),
            html.Div(dcc.Dropdown(id='eqname'),
                         className='nine columns')
        ]
        ),

            # Select Team Dropdown
        html.Div([
            html.Div('Equipment ID', className='three columns'),
            html.Div(dcc.Dropdown(id='edid'),
                         className='nine columns')
        ]
        ),
    ], 
        className='six columns'),
 # Empty

    html.Div([
        html.Div(className='six columns')
        
    ],
        className='twleve columns'),
     # Match Results Grid


    html.Div([
        html.Div(
            dte.DataTable(id='Table_result', 
                          columns=[{"name": i, "id": i, 'deletable': True} for i in dt_columns],
                          editable=True,
                          row_selectable="multi",
                          selected_row_indices=[0],
                         ),
            className='six columns'
        ),
        
# Season Summary Table and Graph
        html.Div([
            # summary table
            dcc.Graph(id='graph')
            # style={},
        ], 
            className='six columns'),
    ]
    ),
    
]
)

@app.callback(
    Output(component_id='dept', component_property='options'),
    [
        Input(component_id='site', component_property='value')
    ]
)
def update_department(d):
    df1=df[df['Site']==d]
    dpt = [{'label':i, 'value' : i} for i in df1['Department '].unique()]
    return dpt
#Load in Dropdown

@app.callback(
    Output(component_id='eqname', component_property='options'),
    [
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)
def update_eqnme(e,s):
    df1=df[df['Site']==s]
    df2=df1[df1['Department ']==e]
    en = [{'label':i, 'value' : i} for i in df2['Equipment Name'].unique()]
    return en

@app.callback(
    Output(component_id='edid', component_property='options'),
    [
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)
def update_eqid(e,s,z):
    df1=df[df['Site']==z]
    df2=df1[df1['Department ']==s]
    df3=df2[df2['Equipment Name']==e]
    sn = [{'label':i, 'value' : i} for i in df3['Equipment ID'].unique()]
    return sn

@app.callback(
    Output(component_id='Table_result',component_property="columns"),
    [
        Input(component_id='edid', component_property='value'),
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)
def column_table_data(q,w,e,r):
    df1=df[df['Site']==q]
    df2=df1[df1['Department ']==w]
    df3=df2[df2['Equipment Name']==e]
    df4=df3[df3['Equipment ID']==r]
    df=df4[['Sr/ No/', 'Site', 'Date', 'Department ', 'Equipment ID',
       'Equipment Name','GREASE GRADE', 'POINT', 'STOCK','MAN POWER', 'Remarks']]
    column = [{"name": i, "id": i} for i in df.columns]
    return column

@app.callback(
    Output(component_id='Table_result',component_property="row_selectable"),
    [
        Input(component_id='edid', component_property='value'),
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]
)

def load_table_data(p,q,r,s):
    df1=df[df['Site']==p]
    df2=df1[df1['Department ']==q]
    df3=df2[df2['Equipment Name']==r]
    df4=df3[df3['Equipment ID']==s]
    df5=df4[['Sr/ No/', 'Site', 'Date', 'Department ', 'Equipment ID',
       'Equipment Name','GREASE GRADE', 'POINT', 'STOCK','MAN POWER', 'Remarks']]
    return df.to_dict('records')

@app.callback(
    Output(component_id='graph',component_property="figure"),
    [
        Input(component_id='Table_result',component_property="row_selectable"),
        Input(component_id='edid', component_property='value'),
        Input(component_id='eqname', component_property='value'),
        Input(component_id='dept', component_property='value'),
        Input(component_id='site', component_property='value')
    ]

)
def load_graph(a,b,c,d,rows):
    df1=df[df['Site']==a]
    df2=df1[df1['Department ']==b]
    df3=df2[df2['Equipment Name']==c]
    df4=df3[df3['Equipment ID']==d]
    dff = pd.DataFrame(rows)
    return {
        'data': [{
            'x': df['Date'],
            'y': df[['STOCK']].mean(axis=1),
            'text': df['Equipment Name'],
            'type': 'bar'
        }
        ]
        
    }

Hi Vivek were you able to resolve this? I’m looking for solution for this problem as well. Thanks

Please add an example of this to the Dash tutorial

Check under quick start here: Dash DataTable | Dash for Python Documentation | Plotly

Sorry, I didn’t mean for my benefit. I meant for new users. I went through the tutorial a month ago and thought the only way to make a table was to use the method on the page I linked titled Reusable Components. I couldn’t get my dataframe to display as a table properly using html methods within the page_layout list. The data_tables.DataTable method worked first time.

That’s a great idea! We don’t need the HTML table example anymore now that we have the dash table.


I’m going to lock this thread. Let’s start a new thread for any more questions or comments :smiley_cat:

1 Like