Dash datatable setup with dash core components

Dash Python
1

hi all. new to dash and i’m not quite understanding how to leverage dash datatable within my current dash app setup that is using dash core components.

for example, the simple code (used herehttps://dash.plotly.com/datatable) :

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'),
)

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

i have set up my code like this :

       fig = dash.Dash(__name__)
        fig.layout = dash_table.DataTable(
            id='table',
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict('records'),
        )
        return fig3

with

def _get_fig_graph(df):
    return dcc.Graph(id="fig")

is dcc.Graph compatible here? thank you

2

Hi @dashymcdashface

I’m not sure I understand your code example, but you can find an example of an app with a table and a graph here: Sorting, Filtering, Selecting, and Paging Natively | Dash for Python Documentation | Plotly

BTW, I :heart: your username :grin:

3

thanks :smile: ! my confusion is i want to identify this as say fig3 where in callbacks i can write something like:

fig3 = dash.Dash()
        fig3.layout = html.Div([
            dash_table.DataTable(
                id='table',
                data=df.to_dict('records'),
                editable=True,
                filter_action="native",
                sort_action="native",
                sort_mode='multi',
                row_selectable='multi',
                row_deletable=True,
                selected_rows=[],
                page_action='native',
                page_current=0,
                page_size=10,
            )
        ])

and in layout call fig3 with something like

def _get_fig3_graph(df):
    return dcc.Graph(id='fig3')
4

it’s a newbie question… but trying to figure how to set this as fig to then reference in layout

5

Hi @dashymcdashface

Well, what you posted isn’t a typical way to make an app with a table and a graph. You may have left out pieces of your code for brevity, but what you posted won’t work.

Since you mentioned that you are new to Dash, if you haven’t done so already, I highly recommend working through the examples in the Dash Tutorial to get an understanding of the standard methods in Dash.

Or maybe I just don’t get what you are trying to do, so please feel free to post a more complete minimal working example and perhaps someone else will be able to answer your question.

6

yes i did remove code for brevity, i’m really just looking to understand how to set this up similar to px or go like:

fig = px.scatter()

or

fig = go.Figure()
fig = go.Waterfall()
7

Ok, here is a minimal example.

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_table
import pandas as pd
import plotly.express as px

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

app = dash.Dash(__name__)


def make_table(dff):
    return html.Div(
        [
            dash_table.DataTable(
                id="table",
                data=dff.to_dict("records"),
                columns=[{"name": i, "id": i} for i in df.columns],
                editable=True,
                filter_action="native",
                sort_action="native",
                sort_mode="multi",
                row_selectable="multi",
                row_deletable=True,
                selected_rows=[],
                page_action="native",
                page_current=0,
                page_size=10,
            )
        ]
    )


fig = px.scatter()

app.layout = html.Div([make_table(df), dcc.Graph(id="scatter", figure=fig)])


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

how are dash_table.DataTable and px.scatter related here? so setup cannot be something like fig = dash_table.DataTable ?

ideally, i’m getting to this point Conditional Formatting | Dash for Python Documentation | Plotly . but now just testing out how to render a table using dash_table.DataTable using fig

9

Sorry, the Dash DataTable is not a figure and you can’t use it as a property of dcc.Graph(). The DataTable is a separate component that can be added to the app layout.

1 Like
10

got it that is helpful to know! can you point to an example that uses DataTable with multi-layout? I’m confused how to reference in the broader app. this leverages html components?

11

Never mind, I see now that I didn’t need a callback just for creating the simple table and used
`
def _get_fig_graph(df):

return dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),
)`

thanks for patience !

1 Like