Dataframe on html with Dash







meseCrypto = crypto.iloc[-30:,:]
mese = meseCrypto.describe().round(decimals=3).reset_index()

%%sh
# get ngrok
curl -O https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip
unzip ngrok-stable-linux-amd64.zip

# launch ngrok
get_ipython().system_raw('./ngrok http 8050 &')

%%sh
# get url with ngrok ### click sul link sottostante
curl -s http://localhost:4040/api/tunnels | python3 -c "import sys, json; print(json.load(sys.stdin)['tunnels'][0]['public_url'])"

import dash
from dash.exceptions import PreventUpdate
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html

df = mese

app = dash.Dash(__name__)

app.layout = html.Div([
html.Br(), html.P(html.Div(html.H3(children='QUOTAZIONE CRYPTO ULTIMO MESE', style={
'textAlign': 'center',
'color': '#1013c8' ,
'font-family' : 'Trebuchet MS',
'font-size': '25px'
} ))),
html.Br(),
html.Button('Change View Data', id='refresh'),
html.Span( style={'margin-left' : '60px' }) ,
dcc.Input(id='input1', type='text', value='ALL'),
html.Br(),
html.Br(),
dash_table.DataTable(
id='table'
, style_cell_conditional=[
{'if': {'column_id': 'Date'},
'width': '100px'},
{'if': {'column_id': 'BTC-USD'},
'width': '110px'
,'height':'auto',
'backgroundColor': '#000',
'color': 'white'}
]
,style_cell={
'width': '60px', 'backgroundColor': '#000', 'color': 'white',
'overflow': 'hidden',
'textOverflow': 'ellipsis',
'maxWidth': '150px'
}
, style_table={
'maxHeight': '700px'
,'overflowY': 'scroll'
}
,style_data_conditional=[
{
'if': {
'column_id': 'index',
},
'backgroundColor': 'white',
'color': '#1013c8',
}
, {
'if': {
'column_id': 'XRP-USD',
'filter_query': '{XRP-USD} gt .60'
},
'backgroundColor': '#3D9970',
'color': 'white',
}
,{
'if': {
'column_id': 'LTC-USD',
'filter_query': '{LTC-USD} lt 70'
},
'backgroundColor': '#555780',
'color': 'white',
}
]
,columns=[{"name": i, "id": i} for i in df.columns]
,fixed_rows={ 'headers': True, 'data': 0 }
,data=df.to_dict('records'),
sort_mode="multi",
column_selectable="single",
row_selectable="multi",
row_deletable=True,
selected_columns=[],
selected_rows=[]
)
])


@app.callback(Output('table', 'data'),
[Input('refresh', 'n_clicks'),#])
State('input1', 'value') ])


def update_data(n_clicks, input11):

if input11 is None:
val = 'None'
else:
val = input11
if n_clicks is None:
raise PreventUpdate
else:
if val == 'ALL':
dff = meseCrypto.round(decimals=2)
else:
dff = mese.round(decimals=2)
return dff.to_dict('records')


app.run_server()