Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Creating html table using html.Th, Tr, Td... tags and callbacks

Hi, i have tried to create a html table from a dataframe but for some reason the header element disappears when i use the second callback. I can only create like this since i will need to add some elements e.g buttons inside the table and currently dash/plotly tables do not offer such ability here is my code:

app.layout = html.Div([html.Div(id=‘relative-parent’,className=‘relative rounded overflow-hidden overflow-x-scroll shadow-lg py-1 mx-1 bg-gray-500 mt-0 border border-black h-screen w-screen’,children=[
html.Table(id=‘time-table’,className=‘ml-1 border border-black’,
children=[
html.Tr(id=‘th-id’),

		]),
]),

])

@app.callback(Output(‘th-id’,‘children’),
[Input(‘none’,‘children’)])
def input_table_header_names(df_col_names):
html_table_header=
for i in df.columns.astype(str):
# loop over the df headers, i = displayed col name and id
html_table_header.append(html.Th(i,id=i))
return html_table_header

@app.callback(Output(‘time-table’,‘children’),
[Input(‘none’,‘children’)])
def input_table_data(df_data):
html_table_data=
for i in df.to_numpy().astype(str):
# loop over the df data
html_table_data.append(html.Tr(html.Td(i,className=‘border border-black h-6’)))
return html_table_data