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

Dash Python
1

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