Python Dash Empty Table

Question

I use Dash and I want to display a Table, the html.Layout is like this :

html.Div([
     dash_table.DataTable(
          id="table_infos",
          columns=["Intitulé", "Donnée"]
            )
        ], style={'display': 'inline-block', 'verticalAlign': 'top', 'width': '30%', 'padding':'30px'})

And my callback is like this:

@app.callback(Output('table_infos', 'data'),
                [Input('ville-picker', 'value')])
def update_generales(selected_ville):
    departement = df.loc[df['ville'] == selected_ville]['departement'].iloc[0]
    region = df.loc[df['ville'] == selected_ville]['region'].iloc[0]
    cp = df.loc[df['ville'] == selected_ville]['code postale'].iloc[0]
    code_insee = df.loc[df['ville'] == selected_ville]['code_insee'].iloc[0][-5:]
    ci = df.loc[df['ville'] == selected_ville]['code_insee'].iloc[0][18:]

    habitants = df_demo.loc[df_demo['code_insee'] == ci]['Population'].iloc[0]

    infos = {'Intitulé' : ['Région','Département','Code Postal', 'Code Insee',"Nombre d'habitants"],
            'Donnée' : [region, departement, cp, code_insee, habitants]}

    df_info = pd.DataFrame(infos, columns=['Intitulé', 'Donnée'])

    df_info['Intitulé'] = np.asarray(['Région','Département','Code Postal', 'Code Insee',"Nombre d'habitants"])
    data = df_info.to_dict("rows")

    return data

However, I have an empty Table, but with the same number of rows I wished and 2 columns as I wished, But empty Table.

Someone can help me please !

Answer 1

The problem is the way columns was being defined. It must have both the name and id values, like this:

columns=[{'id': "Intitulé", 'name': "Intitulé"}, {'id': "Donnée", 'name': "Donnée"}]

Docs page for reference.