Dash AG Grid does not render headers or data

Dash Python
,
1

Hello,

I recently converted a data table into ag grid and I tested it out and it was all good. However, when I moved the component (the new ag grid) into my larger data app, it only renders the layout but no headers or data.

To be clear, I tested out the AgGrid component in jupyter notebook to see the output and it rendered fine.

However, the data app I have consists of multiple components which make up each page and it is hosted on a server for deployment.

Output on server

image
image1636×700 4.05 KB

Here is the code I used to create the AgGrid

tab = html.Div([dag.AgGrid(
            rowData=df_clean.to_dict("records"),
            columnDefs=columns_types,
            defaultColDef={"filter": True},
            style={
                    'height': '80vh',
                    'width':'84vw',
                    'margin-left':'10vw',
                    'margin-right':'10vw',
                    'margin-bottom':'10vw',
                    'overflowX': 'auto',
                    'overflowY': 'auto',
                    }
                )]
            )

I see the scroll bar in the render suggesting that the data itself is getting loaded, but not rendered. Could it be a font issue?

2

This got resolved. I discovered that I was missing a line of code which was generating the column definitions and so I was just passing the initialized columns_types list which was an empty list. The learning is that if there is an issue in column definitions the table will not render the data.

2 Likes