Create Tables and save as CSV and show 1st row contents

Dash Python
1

I have this function code (editing from template):

def make_dash_table(df):
    table = []
    for index, row in df.iterrows():
        html_row = []
        for i in range(len(row)):
            html_row.append(html.Td([row[i]]))
        table.append(html.Tr(html_row))
    return table

that creates a table for Dash Framework (Python) but it doesn’t show the header (first .csv row) when I call it on Python. For some Tables, it is customized to show subtitles as below:

modifed_perf_table.insert(
    0, html.Tr([
        html.Td([]),
        html.Td(['Cumulative'], colSpan=4, style={'text-align': "center"}),
        html.Td(['Annualised'], colSpan=4, style={'text-align': "center"})
    ], style={'background': 'white', 'font-weight': '600'}
    )
)

But I want to let the table show the csv headers (first row).
Where I need to change: is on this code or CSS?

Full code below:

df_perf_summary = pd.read_csv('17530.csv', encoding='latin-1')
df_perf_summary.head()

def make_dash_table(df):
    
    table = []
    for index, row in df.iterrows():
        html_row = []
        for i in range(len(row)):
            html_row.append(html.Td([row[i]]))
        table.append(html.Tr(html_row))
    return table


modifed_perf_table = make_dash_table(df_perf_summary)


modifed_perf_table.insert(
    0, html.Tr([
        html.Td([]),
        html.Td(['Cumulative'], colSpan=4, style={'text-align': "center"}),
        html.Td(['Annualised'], colSpan=4, style={'text-align': "center"})
    ], style={'background': 'white', 'font-weight': '600'}
    )
)

 html.Div([

            html.Div([
                
            html.Div([
                html.H6("#####",
                        className="gs-header gs-table-header padded"),
                html.Table(modifed_perf_table, className="reversed"),
                
            ], className="eight columns"),

        ], className="row "),

external_css = ["https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css",
            "https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css",
            "//fonts.googleapis.com/css?family=Raleway:400,300,600",
            "https://cdn.rawgit.com/plotly/dash-app-stylesheets/5047eb29e4afe01b45b27b1d2f7deda2a942311a/goldman-sachs-report.css",
            "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"]

csv as follow, save it as 17530.csv

Col1,Since Launch,,March,April,May,1st Y,2nd Y,3rd Y
,Cum (#),Cum (%),Q2Y18,Q3Y18,Q4Y18,1stYJun19,2ndYJun20,3rdYJun2021
SiteA,15.96,,0.1,0.27,0.27,0.87,0.51,0.43
SiteB,20.09,,0.06,0.21,0.21,2.24,'-1.48,1.46
SiteC,15.7,,'-0.03,'-0.09,'-0.09,'-0.32,'-0.09,0.04
1 Like