ag-grid "jerking" on updates after v3 (significant decline in user experience)

[amks1]

First Check

• I added a very descriptive title here.
• This is not a Q&A. I am sure something is wrong with NiceGUI or its documentation.
• I used the GitHub search to find a similar issue and came up empty.

Example Code

@ui.page('/datatable_update')
async def datatable_update_test():
    columns = [
        {
            'field': 'product',
            'headerName': 'Product Name',
            'editable': False,
        },
        {
            'field': 'quantity',
            'headerName': 'Quantity',
            'editable': True
        },
        {
            'field': 'price',
            'headerName': 'Unit Price',
            'editable': True
        },
        {
            'field': 'category',
            'headerName': 'Category',
            'editable': False
        },
        {
            'field': 'in_stock',
            'headerName': 'In Stock',
            'editable': True
        },
        {
            'field': 'supplier',
            'headerName': 'Supplier',
            'editable': False
        },
        {
            'field': 'rating',
            'headerName': 'Rating',
            'editable': True
        },
    ]

    sample_data = [
        {
            'product': 'Laptop',
            'quantity': 10,
            'price': 1200.00,
            'category': 'Electronics',
            'in_stock': True,
            'supplier': 'TechCorp',
            'rating': 4.5
        },
        {
            'product': 'Mouse',
            'quantity': 25,
            'price': 25.50,
            'category': 'Accessories',
            'in_stock': True,
            'supplier': 'GadgetPro',
            'rating': 4.2
        },
        {
            'product': 'Keyboard',
            'quantity': 15,
            'price': 45.00,
            'category': 'Accessories',
            'in_stock': False,
            'supplier': 'GadgetPro',
            'rating': 4.0
        },
        {
            'product': 'Monitor',
            'quantity': 8,
            'price': 300.00,
            'category': 'Electronics',
            'in_stock': True,
            'supplier': 'DisplayWorld',
            'rating': 4.7
        },
        {
            'product': 'Desk Lamp',
            'quantity': 20,
            'price': 18.99,
            'category': 'Furniture',
            'in_stock': True,
            'supplier': 'HomeEssentials',
            'rating': 4.1
        },
        {
            'product': 'Chair',
            'quantity': 5,
            'price': 85.00,
            'category': 'Furniture',
            'in_stock': False,
            'supplier': 'HomeEssentials',
            'rating': 3.9
        },
        {
            'product': 'Webcam',
            'quantity': 12,
            'price': 60.00,
            'category': 'Electronics',
            'in_stock': True,
            'supplier': 'TechCorp',
            'rating': 4.3
        },
    ]

    options = {
        'columnDefs': columns,
        'rowData': sample_data
    }

    def get_nicegui_version():
        from importlib.metadata import version
        return version('nicegui')

    def update_datatable(e):
        current_data = grid.options['rowData']
        for i in range(10):
            for item in current_data:
                item['quantity'] += 1
                if get_nicegui_version() != '3.0.3':
                    grid.update()


    ui.button('trigger update', on_click=update_datatable)
    grid = ui.aggrid(options=options)

Description

Before version 3, if we updated aggrid options, we would call grid.update() after making all the changes to the options. Such updates would be smooth on the frontend without any jerking of the grid.

After v3, these updates cause the aggrid frontend to jerk significantly. It's barely noticeable in the above test, but in our app where there are a lot of elements on the page it's VERY noticeable. Still, in the given code you can make out the difference between v3 and earlier. I have added the grid.update() inside the for loop to test v2, and there's still no jerking.

To be clear: I understand that props now update the frontend immediately, and that we can defer these updates by making a copy of the column definitions dict and changing that first, then assigning the grid.options to it later. That's not the issue. The issue is that whenever we update grid.options, it's not smooth on the frontend.

I'll try to upload a screencap video later.

NiceGUI Version

3.0.3

Python Version

3.13.7

Browser

Chrome

Operating System

Windows

Additional Context

No response

[evnchn]

Hello @amks1 thanks for the report.

We didn't change AG Grid much. https://github.com/zauberzeug/nicegui/commits/main/nicegui/elements/aggrid/aggrid.js

Things point to a later-than-expected emission of event gridSizeChanged, and I don't think we can do anything about it.

Still, you may consider hiding the AG Grid with a content placeholder with a nice fade-out animation. That's generally good UI practice since you can only push performance so much.

[amks1]

Still, you may consider hiding the AG Grid with a content placeholder with a nice fade-out animation. That's generally good UI practice since you can only push performance so much.

It's not really practical in my case, due to several quick changes needed. Have a look:

Untitled.video.-.Made.with.Clipchamp.mp4

[falkoschindler]

Hi @amks1, I agree that the jitter is really annoying!

It looks like we can reproduce it with this snippet:

grid = ui.aggrid({
    'columnDefs': [{'field': 'name', 'headerName': 'Name'}, {'field': 'number', 'headerName': 'Number'}],
    'rowData': [{'name': f'Person {i}', 'number': i} for i in range(10)],
})
ui.button('Update', on_click=grid.update)

The official demo is flickering as well.

But I get a similar behavior with v2.24.2. So maybe the problem didn't came with the update to 3.0.0?

And it seems to be (almost) gone when setting 'defaultColDef': {'flex': 1} in the options dictionary. That might at least be a workaround for the moment.

[amks1]

I found that we can completely avoid this by using the native ag-grid APIs. Example:

ui.run_javascript(f"""
    const grid = getElement('{grid.id}');
    if (grid && grid.api) {{
        grid.api.setGridOption('rowData', {json.dumps(data)});
    }}
""")

Or grid.api.setGridOption("columnDefs", updatedColDefs);

For changing individual cells one can even use

const node = grid.api.getDisplayedRowAtIndex({row_index});
node.setDataValue('{column_id}', {json.dumps(value)});

So I guess using these in the options setter, then somehow updating self._props without triggering the _handle_change of the ObservableDict would solve this issue. Or making the appropriate modifications on the aggrid.js side, I guess.

[koei6666]

Hi @amks1 , I have tried the solutions you provided but it doesnt solve the jerking on my end, have you implemented anything else than this?

[amks1]

@koei6666 It works for me, can you share your exact code?

[koei6666]

@amks1 , this is my code, its for change the background color of selected columns, and it works fine without jerking before 3.0

ui.add_head_html('''
                 <style>
                        .selected-column {
                         background-color: #00DEC4;
                         color: #003A33;
                         font-weight: bold;
                         }
                        .selected-column:hover {
                         background-color: #89FFF1 !important;
                         color: #003A33;
                         }
                        .selected-column-table {
                         color: #D6D6D9;
                         font-weight: bold;
                         }
                        .selected-column-table:hover {
                         background-color: #ECECED !important;
                         color: #D6D6D9;
                         }
                    </style>''')

class AgGrid():
    def __init__(self):
        self.grid = None
        self.grid_container = None
        self.indexed_col_header = None
        self.column_list: Dict[str, ColumnVisbility] = {}
        self.options = {'allow_select_all': True,
                        }
        self.aggrid_col_setting = None

    def aggrid_creator(self, dataframe: pd.DataFrame, _classes: str = None, _table_view: bool = False, row_id: str = 'lotid') -> Tuple[ui.element, ui.aggrid]:
        with ui.element('div').classes('w-full h-full flex-grow overflow-hidden') as aggrid_container:
            # Create the AgGrid to display the data
            #print(aggrid_column_setting)
            columnsettings = self.aggrid_col_setting
            if columnsettings is None:
                raise E.InternalErrorExc('column setting is not defined.')
            grid = ui.aggrid.from_pandas(dataframe, options=
                        {
                'columnDefs' : columnsettings.copy(),
                'defaultColDef' : {'flex': 'auto'} if not _table_view else  {'width': 150, 'minWidth': 100},
                'rowSelection': 'multiple',
                'enableSelectionWithoutKeys': False,
                'localeText': japanese_locale_text,
                'selectAll': 'filtered',
                'rowClassRules': color_tag_rules(),
                ':getRowId': f'(params) => params.data.{row_id}' if row_id else None,
                
            }
            ).classes('h-[calc(65vh-2rem)] overscroll-auto' if _classes is None else _classes)
        self.grid = grid
        self.grid_container = aggrid_container

        return aggrid_container, grid



    def highlight_column(self):
        if self.indexed_col_header is None:
            raise E.InternalErrorExc('indexed_col_header is not defined.')
        grid = self.grid
        global CLICK_EVENT_CACHE
        e = CLICK_EVENT_CACHE
        if not e:
            return
        col_name = e.args['colId']
        selection = self.column_list
        ind = self.indexed_col_header[col_name][0]
        altered_defs = dict(grid.options)
        attribute_target = altered_defs['columnDefs'][ind]
        if 'headerClass' not in attribute_target or attribute_target['headerClass'] != 'selected-column':
            attribute_target['headerClass'] = 'selected-column'
            selection[col_name].highlight_flip(True)
        elif attribute_target['headerClass'] == 'selected-column':
            attribute_target['headerClass'] = 'None'
            selection[col_name].highlight_flip(False)
        aggrid_update(grid, altered_defs)

def aggrid_update(grid: ui.aggrid, grid_options: dict):
    grid.run_method('setGridOption', 'columnDefs', grid_options['columnDefs'])

[amks1]

@koei6666, don't use grid.run_method, use ui.run_javascript

ui.run_javascript(f"""
    const grid = getElement('{grid.id}');
    if (grid && grid.api) {{
        grid.api.setGridOption('rowData', {json.dumps(data)});
    }}
""")

[koei6666]

Thank you, I have tried that too but it doesn't work. Does it have something to do with which part of aggrids' data being altered? I'm trying to change the columndefs, but you are trying to change rowdata