My code isn’t loading the data provided to AgGrid. I need help figuring out the issue. See code below:
columnDefs = [
{“field”: “make”},
{“field”: “model”},
{“field”: “price”},
]
rowData = [
{“make”: “Toyota”, “model”: “Celica”, “price”: 35000},
{“make”: “Ford”, “model”: “Mondeo”, “price”: 32000},
{“make”: “Porsche”, “model”: “Boxster”, “price”: 72000},
{“make”: “BMW”, “model”: “M50”, “price”: 60000},
{“make”: “Aston Martin”, “model”: “DBX”, “price”: 190000},
]
grid = dag.AgGrid(
id=“example-aggrid”,
columnDefs=columnDefs,
rowData=rowData
)
return html.Div([grid])
The screenshot below shows the rendered table with columns, but no data.
This (below) is working perfectly for me. It’s effectively unchanged from your code, so I’m not sure what might have caused a problem:
from dash import Dash, html
import dash_ag_grid as dag
columnDefs = [
{"field": "make"},
{"field": "model"},
{"field": "price"},
]
rowData = [
{"make": "Toyota", "model": "Celica", "price": 35000},
{"make": "Ford", "model": "Mondeo", "price": 32000},
]
grid = dag.AgGrid(
id="example-aggrid",
columnDefs=columnDefs,
rowData=rowData
)
app = Dash(__name__)
app.layout = html.Div([grid])
if __name__ == '__main__':
app.run_server()
1 Like
Hello @timgeorge,
Welcome to the community!
What version of the grid are you using?
Do you have any stylesheets loaded in your assets folder?
Good to know that the unchanged code ran on your end. I initially thought it was an issue with the data being supplied to AgGrid, so I swapped it for sample data from the Dash AgGrid - Getting Started as well. Unfortunately, this still didn’t work.
It doesn’t seem to be a data issue. The data appears perfectly fine when I visualise it using a Datatable.
I’m using Dash AG Grid version 31.2.0 and python 3.12.1
Hello @jinnyzor,
I’m using Dash AG Grid version 31.2.0 and python version 3.12.1
I have a stylesheet loaded in my assets folder. Other components load my data just fine. As shown below, I attempted to visualise sample data using a Datatable and this worked as expected.
# Create sample DataFrame
df = pd.DataFrame({'num_legs': [2, 4, 8, 0],
'num_wings': [2, 0, 0, 0],
'num_specimen_seen': [10, 2, 1, 8]},
index=['falcon', 'dog', 'spider', 'fish'])
# Load data to view
return dash_table.DataTable(id='sample-table',
data=df.to_dict('records'),
columns=[{"name": i, "id": i, "hideable": False} for i in df.columns],
css=[{"selector": ".show-hide", "rule": "display: none"}],
style_cell={'textAlign': 'left'},
style_table={'overflowX': 'auto'})
This issue with AgGrid puzzles me. Any suggestions on how to fix it?
What does your stylesheet have in it?
Have you tried running it from a scratch file?
I noticed that styling the div tag in my stylesheet was creating the issue. So, I commented it out for now.
As shown below, the AgGrid table now loads:
And here’s the code used:
### Create sample DataFrame
df = pd.DataFrame({'num_legs': [2, 4, 8, 0],
'num_wings': [2, 0, 0, 0],
'num_specimen_seen': [10, 2, 1, 8]},
index=['falcon', 'dog', 'spider', 'fish'])
column_defs = [{"field": i} for i in df.columns]
grid = dag.AgGrid(
id="order-table",
columnDefs=column_defs,
rowData=df.to_dict("records"),
)
return grid
Thanks for your help with this issue!
1 Like
