I’m trying to create a table with 30 to 31 rows that should have dropdowns for names in 4 columns. I’m following the examples in the documentation and what happens is this: the table gets displayed, not all rows showing, they don’t fit in the screen. I go to row 1 and try to open the dropdown for one of the columns, then I’m taken to the bottom of the table, as if had scrolled all the way down. I go back up and see the dropdown actually displays the values. Here’s the code I’m using:
# -*- coding: utf-8 -*-
"""
Spyder Editor
This is a temporary script file.
"""
import dash
#import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_table
import pandas as pd
from datetime import datetime, timedelta, date
import calendar
from collections import OrderedDict
app = dash.Dash(__name__)
mycolumns = ['Date', 'Day', 'AM Dispatcher', 'PM Dispatcher', 'POC 1', 'POC 2']
mymonth = '2019-04-01'
def add_months(sourcedate, months):
month = sourcedate.month - 1 + months
year = sourcedate.year + month // 12
month = month % 12 + 1
day = min(sourcedate.day, calendar.monthrange(year,month)[1])
return date(year, month, day)
def createtimerange(mymonth):
fromdate = datetime.strptime(mymonth, '%Y-%m-%d').date()
todate = add_months(fromdate,1)
diffdays = todate - fromdate
mylist = [fromdate + timedelta(days=i) for i in range(diffdays.days)]
return [i.strftime('%Y-%m-%d') for i in mylist]
def getdayofweek(daynumber):
if daynumber == 0:
return 'Monday'
elif daynumber == 1:
return 'Tuesday'
elif daynumber == 2:
return 'Wednesday'
elif daynumber == 3:
return 'Thursday'
elif daynumber == 4:
return 'Friday'
elif daynumber == 5:
return 'Saturday'
else:
return 'Sunday'
df = pd.DataFrame(columns = mycolumns)
df['Date'] = createtimerange(mymonth)
df['WeekDay'] = df['Date'].apply(lambda x: datetime.strptime(x,'%Y-%m-%d').weekday() )
df['Day'] = df['WeekDay'].apply(lambda x: getdayofweek(x))
del df['WeekDay']
namespoc = ['Name 1', 'Name 2', 'Name 3', 'Name 4']
namesdis = ['Name 1', 'Name 2']
app.layout = html.Div([
dash_table.DataTable(
id='table',
columns=[
{'id': 'Date', 'name': 'Date'},
{'id': 'Day', 'name': 'Day'},
{'id': 'AM Dispatcher', 'name': 'AM Dispatcher', 'presentation': 'dropdown'},
{'id': 'PM Dispatcher', 'name': 'PM Dispatcher', 'presentation': 'dropdown'},
{'id': 'POC 1', 'name': 'POC 1', 'presentation': 'dropdown'},
{'id': 'POC 2', 'name': 'POC 2', 'presentation': 'dropdown'}
],
data=df.to_dict("rows"),
editable = True,
column_static_dropdown=[
{
'id': 'AM Dispatcher',
'dropdown': [{'label': i, 'value': i} for i in namesdis]
},
{
'id': 'PM Dispatcher',
'dropdown': [{'label': i, 'value': i} for i in namesdis]
},
{
'id': 'POC 1',
'dropdown': [{'label': i, 'value': i} for i in namespoc]
},
{
'id': 'POC 2',
'dropdown': [{'label': i, 'value': i} for i in namespoc]
}
]
),
html.Div(id='table-dropdown-container')
])
@app.callback(Output('table-dropdown-container', 'children'),
[Input('table', 'data_timestamp')])
def update_output(timestamp):
return timestamp
if __name__ == '__main__':
app.run_server(debug=True)