Hello Forum Members,
I am a total Newby, and I just started learning Python/Dash/Plotly.
I am trying to build my first dashboard with Data Table. However, I am experiencing some difficulties.
Below is my code.
Data Table is created but I want to change it’s looks. From what I have read here: https://dash.plot.ly/external-resources all I need to do is to create assets folder and put there CSS and js files for the table.
Using this site: https://www.datatables.net/examples/data_sources/dom.html I copied css file and js.
$(document).ready( function () {
$( '#**example**' ).DataTable();
} );
to
$(document).ready( function () {
$( '#**datatable-interactivity**' ).DataTable();
} );
My full code is like this (note, it’s based on plotly tutorial and some google searches)
import os
import dash
from dash.dependencies import Input, Output
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
import sys
sys.path.insert(0, sys.path[0]+’\assets’)
app = dash.Dash(name, static_folder=‘Assets’, meta_tags=[{“content”: “width=device-width”}])
app.css.append_css({‘external_url’: ‘./assets/jquery.dataTables.min.css’})
app.config.suppress_callback_exceptions = True
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
colors = {
“background”: “#ffffff”,
}
df1 = pd.read_csv(‘C:/Users/Test/Test Final1.csv’)
df1[“month”] = pd.DatetimeIndex(df1[“Date”]).month
df2 = pd.read_csv(‘C:/Users/Test/Test Final2.csv’)
app.layout = html.Div([
html.Div([html.Img(src=“assets/Logo.png”, style={‘height’: “60px”, ‘width’: “auto”, ‘margin-bottom’: “25px”}),html.A([‘Print PDF’],className=“button no-print print”,style={‘position’: “absolute”, ‘top’: ‘-1’, ‘right’: ‘0’})]),
html.Div([html.H1(“Title”)], style={‘textAlign’: “left”, ‘margin-left’: “auto”, ‘padding’: 10}, className=“twenty columns”),
html.Div([html.H1("")], style={‘textAlign’: “center”, ‘margin-left’: “auto”, ‘padding’: 15}, className=“twenty columns”),
html.Div([html.Link(rel=‘stylesheet’, href=‘assets/jquery.dataTables.min.css’),
dash_table.DataTable(
id=‘datatable-interactivity’,
columns=[
{“name”: i, “id”: i, “deletable”: False} for i in df2.columns
],
data=df2.to_dict(‘records’),
),
html.Div(id=‘datatable-interactivity-container’)
])
], className=“container”)
@app.callback(
Output(‘datatable-interactivity-container’, “children”),
[Input(‘datatable-interactivity’, “derived_virtual_data”),
Input(‘datatable-interactivity’, “derived_virtual_selected_rows”)])
def update_graphs(rows, derived_virtual_selected_rows):
if derived_virtual_selected_rows is None:
derived_virtual_selected_rows = []
dff = df2 if rows is None else pd.DataFrame(rows)
colors = ['rgb(198,89,17)' if i in derived_virtual_selected_rows else 'rgb(248,203,173)'
for i in range(len(dff))]
if name == ‘main’:
app.run_server(debug=False)
Unfortunately, it’s not working. I want the table to look like this:
Could someone help me achive this look and functionality?
What am I doing wrong? Hwo to do it with other tables/multiple tables on one Dashboard?
I would very much appreciate your help. Like I’ve mentioned earlier - I am a total novice when it comes to programming with all its definitions. If someone could tweak my code and explain how it’s done it would be great.
Thanks in advance for any help.
Best regards
Krzyszsz