[Python] NiceGUI AgGrid Flashing Cell Background

Background

I’m using NiceGUI to render an AG Grid table from a Pandas DataFrame in a Python web app. I want cells whose values change to flash in red when I update my data, similar to the “flashing cells” examples in AG Grid and Plotly Dash:

AG Grid docs on cell flashing: https://www.ag-grid.com/javascript-data-grid/cell-flash/ Plotly Dash AG Grid flashing example: https://dash.plotly.com/dash-ag-grid/flashing-cells

I’ve tried various combinations of:

• setting enableCellChangeFlash: true (both globally and per‑column)
• using deltaRowDataMode: true with getRowId
• etc.

…but nothing seems to cause the flash animation to ever trigger.

I am trying to render an AG Grid with two fields: Name and Score. Have cells in the Score column flash red when their values change after I click a button that randomly updates scores.

Example

from nicegui import ui
import pandas as pd, random

# 1) Inject a small script to register the HighlightChangesModule from the global agGrid
ui.add_head_html('''
<script>
// agGrid is already loaded by NiceGUI; pull ModuleRegistry & HighlightChangesModule from it
const { ModuleRegistry, HighlightChangesModule } = window.agGrid;
ModuleRegistry.registerModules([ HighlightChangesModule ]);
</script>
''')

# 2) Override the default green flash to red, scoped under the Alpine theme
ui.add_head_html('''
<style>
.ag-theme-alpine .ag-cell-data-changed {
background-color: red !important;
color: white !important;
transition: background-color 0.5s ease;
}
</style>
''')

# 3) Sample DataFrame
df = pd.DataFrame({'id':[0,1,2], 'name': ['Alice','Bob','Charlie'], 'score': [10,20,30]})
previous_df = df.copy()

# 4) Create the grid inside a container with the Alpine theme
with ui.column().classes('w-full ag-theme-alpine'):
grid = ui.aggrid(
{
"columnDefs": [{"field": "id"}, {"field": "name"}, {"field": "score", 'enableCellChangeFlash': True}],
"rowData": df.to_dict("records"),
"animateRows": True,
"cellFlashDelay": 500, # ms before fade starts
"cellFadeDelay": 1000, # ms to fade out
'deltaRowDataMode': True,
# 'getRowId': 'js:function(params) { return params.data.id; }',
# "rowSelection": "multiple",
}
)

# 5) Update function: change data, reload, then flash changed cells
def update_scores():
global df, previous_df
previous_df = df.copy()
df['score'] = [random.randint(0,100) for _ in df.index]

# 5a) Mutate the grid's data and redraw
grid.options['rowData'] = df.to_dict('records')
grid.update()

# 5b) Detect which cells changed and call flashCellsx
changed = []
for i in df.index:
if df.at[i,'score'] != previous_df.at[i,'score']:
changed.append({'rowIndex': i, 'column': 'score'})
grid.run_method('api.flashCells', {'cells': changed})

# 6) Trigger button
ui.button('Update Scores', on_click=update_scores)

ui.run(host="127.0.0.1")

Continue reading...