How to use CSS and js with Dash

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: all I need to do is to create assets folder and put there CSS and js files for the table.
Using this site: I copied css file and js.

and then I changed this part:

$(document).ready( function () {

$( '#**example**' ).DataTable();

} );


$(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’),
{“name”: i, “id”: i, “deletable”: False} for i in df2.columns
], className=“container”)

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’:

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


Welcome @krzyszsz! I think the confusion here is that jQuery dataTables is not the same thing as dash_table - the latter is documented here: It’s not natural to use arbitrary js projects like jQuery plugins inside Dash; it can be done, but someone would need to write a dash wrapper for it.
Hope that helps!

Hello Alex,

First of all, thanks for reply.

I have seen some dashboards that have tables formatted like I would like my table to look:

  2. (not excatly but close)

So, there is no way for me to achieve this with css and js files? My table can look only like described here:

Thanks for reply

Best regards

Ok, I think I understand. So my next question is: How can I change dash_table css? For instance, I want to change the icon of sorting function in table? Another example: I would like to change checkbox icon to someting alse?

Can I somehow download dash table css, modify it, put in assets folder and use for my dashboard?

Anybody? Would very much appreciate you help.

Interesting: The belle-croissant example uses a funny hack: they make a regular html table (using dash_html_components), then they call jQuery DataTable on it using this script (presumably added via external_scripts, along with both jQuery and DataTable) - please note that this approach will give you exactly the look of jQuery DataTable, but it will not allow any interactivity between that table and the rest of your Dash app, because jQuery has taken over that part of the DOM.

The sonyc example uses the old dash_table_experiments component - which is unsupported and will not work with recent versions of Dash. But dash_table should be able to do everything the older experiments component could do, and more. We’re not as opinionated about styling as the jQuery plugin, which is both good and bad: good in that you can get almost any look you want; bad in that the base style might be far off and need a lot of changes, as it’s essentially the css defaults.

The styling options for dash_table are here:
The interactivity section is probably also important to you - for things like sorting and filtering

Hope that helps!

Thanks Alex

I will look into this.

BR Krzyszsz