Introducing Dash DataTable šŸŽ‰

Hi @austin I recently joined Deloitte in DC area. I have build a few dashboards with Dash and I would be interested in attending your course. I canā€™t send direct messages on this forum, since I just registered. Can you DM me your contact information please. Thanks!

A post was split to a new topic: row_update in dash_table.DataTable

I am also hosting a course on Dash at EY in London next month. Thank you for this fantastic new addition, I will definitely be incorporating it.

Our team is super appreciative of the work your team has achieved. I really do believe Plotly is trailblazing a better way in BI, which is why I am such a big advocate of it!

1 Like

Thank you so much guys! I was using DataTable from the other repo (data-table experiments) which was in beta. Merging this with dash core components means that it is getting real

1 Like

A post was split to a new topic: Css property and selectors in dash-table

A post was split to a new topic: Dash DataTable - Update data via external dropdown

Hey, good to be here! I was working earlier with dash_table_experiments, and am shifting over to dash_table. What all changes would be necessary for a successful migration? I am getting a lot of errors while trying to modify my existing code. Thanks !

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