Dash Ag Grid Showing Empty Cells where there shouldn't be empty cells

Dash Python
1

Hello,

I’ve made an Ag Grid and the cells are blank except the first column.

The Ag Grid Output looks like this:

AgGrid(id='fake_table_id', cellStyle={}, className='ag-theme-alpine', columnDefs=[{'field': 'Metric', 'headerName': 'Metric', 'width': '200px'}, {'field': 'All Dates Incl. Shadow', 'headerName': 'All Dates Incl. Shadow'}, {'field': 'All Dates Excl. Shadow', 'headerName': 'All Dates Excl. Shadow'}, {'field': '05-01-23 - 05-31-23 Excl. Shadow', 'headerName': '05-01-23 - 05-31-23 Excl. Shadow'}, {'field': 'All Historical May Months Excl. Shadow', 'headerName': 'All Historical May Months Excl. Shadow'}], dangerously_allow_code=False, defaultColDef={'resizable': True, 'initialWidth': 275, 'wrapHeaderText': True, 'autoHeaderHeight': True, 'filter': False}, rowData=[{'Metric': 'Cumulative P&L', 'All Dates Incl. Shadow': 1, 'All Dates Excl. Shadow': 1, '05-01-23 - 05-31-23 Excl. Shadow': 1, 'All Historical May Months Excl. Shadow': 1}, {'Metric': 'Avg P&L', 'All Dates Incl. Shadow': 1, 'All Dates Excl. Shadow': 1, '05-01-23 - 05-31-23 Excl. Shadow': 1, 'All Historical May Months Excl. Shadow': 1}, {'Metric': 'Sharpe', 'All Dates Incl. Shadow': 1, 'All Dates Excl. Shadow': 1, '05-01-23 - 05-31-23 Excl. Shadow': 1, 'All Historical May Months Excl. Shadow': 1}, {'Metric': 'Sortino', 'All Dates Incl. Shadow': 1, 'All Dates Excl. Shadow': 1, '05-01-23 - 05-31-23 Excl. Shadow': 1, 'All Historical May Months Excl. Shadow': 1}, {'Metric': 'Per MWh Sharpe', 'All Dates Incl. Shadow': 1, 'All Dates Excl. Shadow': 1, '05-01-23 - 05-31-23 Excl. Shadow': 1, 'All Historical May Months Excl. Shadow': 1}, {'Metric': 'Per MWh Sortino', 'All Dates Incl. Shadow': 1, 'All Dates Excl. Shadow': 1, '05-01-23 - 05-31-23 Excl. Shadow': 1, 'All Historical May Months Excl. Shadow': 1}, {'Metric': 'Win Rate', 'All Dates Incl. Shadow': 1, 'All Dates Excl. Shadow': 1, '05-01-23 - 05-31-23 Excl. Shadow': 1, 'All Historical May Months Excl. Shadow': 1}, {'Metric': 'Annual Return on Collateral', 'All Dates Incl. Shadow': 1, 'All Dates Excl. Shadow': 1, '05-01-23 - 05-31-23 Excl. Shadow': 1, 'All Historical May Months Excl. Shadow': 1}, {'Metric': '1% cVar Breaches', 'All Dates Incl. Shadow': 1, 'All Dates Excl. Shadow': 1, '05-01-23 - 05-31-23 Excl. Shadow': 1, 'All Historical May Months Excl. Shadow': 1}, {'Metric': 'Average cVar', 'All Dates Incl. Shadow': 1, 'All Dates Excl. Shadow': 1, '05-01-23 - 05-31-23 Excl. Shadow': 1, 'All Historical May Months Excl. Shadow': 1}, {'Metric': 'Max CVaR', 'All Dates Incl. Shadow': 1, 'All Dates Excl. Shadow': 1, '05-01-23 - 05-31-23 Excl. Shadow': 1, 'All Historical May Months Excl. Shadow': 1}, {'Metric': 'Max Drawdown', 'All Dates Incl. Shadow': 1, 'All Dates Excl. Shadow': 1, '05-01-23 - 05-31-23 Excl. Shadow': 1, 'All Historical May Months Excl. Shadow': 1}, {'Metric': 'Max One-Day Loss', 'All Dates Incl. Shadow': 1, 'All Dates Excl. Shadow': 1, '05-01-23 - 05-31-23 Excl. Shadow': 1, 'All Historical May Months Excl. Shadow': 1}], rowSelection='single', style={'height': '600px'})

As you can see the Ag Grid output and the DataFrame I’m using all show "1"s in each cell. But the actual table is weirdly blank (except the first column) – I’m completely stumped on how to debug this

ChaseScreenshot 2023-06-14 at 18.03.42@2x
ChaseScreenshot 2023-06-14 at 18.03.42@2x2598×866 118 KB

ChaseScreenshot 2023-06-14 at 18.05.30@2x
ChaseScreenshot 2023-06-14 at 18.05.30@2x2170×488 26 KB

2

Hi @schwallie

It looks like the issue might be caused from the dot in the field names, for example:
'field': 'All Dates Incl. Shadow'

Try adding:

AgGrid(
    dashGridOptions={"suppressFieldDotNotation":True},
    # other props
)

We’ll be sure to add this to the docs too:

Suppress Field Dot Notation

If your row data objects have dots in their property names, that should not be treated as deep references, then set the grid property suppressFieldDotNotation to true. This prevents the dots being interpreted as deep references across all column definitions.

3 Likes
3

Update You can find more information in the dash docs :tada:

See this section on Supressing Field Dot Notation .

To understand why you might have to set this, it’s helpful to understand more about another really cool feature of AG Grid: You can you can have things like dictionaries in the fields and access them with a dot notation. You can find more information in the Accessing Nested Data Definitions section of the Dash docs.