ui.aggrid render failed when `options["columnDefs"]["flex"] = 1` after upgrade to version 3.0

[guyingbo]

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.aggrid({
    "columnDefs": [
        {"headerName": "Name", "field": "name", "width": 200},
        {"headerName": "Age", "field": "age", "minWidth": 200, "flex": 1},
        {"headerName": "Parent", "field": "parent", "hide": True},
    ],
    "rowData": [
        {"name": "Alice", "age": 18, "parent": "David"},
        {"name": "Bob", "age": 21, "parent": "Eve"},
        {"name": "Carol", "age": 42, "parent": "Frank"},
    ],
    "rowSelection": {"mode": "multiRow"},
})

Description

When "flex": 1 is added, grid failed to render on version 3.x

NiceGUI Version

3.0.4

Python Version

3.12

Browser

Chrome

Operating System

macOS

Additional Context

No response

[falkoschindler]

Thanks for reporting this issue, @guyingbo!
Let me share the following analysis from Claude 4.5 Sonnet, which is pretty spot on:

The Issue: The grid fails to render when "flex": 1 is added to column definitions in NiceGUI 3.0.4.

Root Cause Hypothesis: I suspect there's a conflict between the auto_size_columns feature and AG Grid's flex property.

Looking at the code in aggrid.js (lines 77-79):

if (type === "gridSizeChanged" && this.auto_size_columns) {
  this.api.sizeColumnsToFit();
}

The auto_size_columns parameter defaults to True in NiceGUI's AgGrid class (line 27 in aggrid.py). This means every time the grid size changes, NiceGUI calls sizeColumnsToFit(), which overrides AG Grid's built-in flex sizing behavior.

Why This is a Problem

1. flex is a native AG Grid property for responsive column sizing that should automatically distribute available space
2. sizeColumnsToFit() is a method that proportionally sizes columns to fill the grid width, but it conflicts with flex-based sizing
3. AG Grid 34.x (which NiceGUI uses) may have stricter requirements about not mixing these two sizing strategies

Recommended Workaround for Users

The user should set auto_size_columns=False when using flex:

ui.aggrid({
    "columnDefs": [
        {"headerName": "Name", "field": "name", "width": 200},
        {"headerName": "Age", "field": "age", "minWidth": 200, "flex": 1},
        {"headerName": "Parent", "field": "parent", "hide": True},
    ],
    "rowData": [
        {"name": "Alice", "age": 18, "parent": "David"},
        {"name": "Bob", "age": 21, "parent": "Eve"},
        {"name": "Carol", "age": 42, "parent": "Frank"},
    ],
    "rowSelection": {"mode": "multiRow"},
}, auto_size_columns=False)

Suggested Fix for NiceGUI

The auto_size_columns feature should detect when any column has a flex property and automatically disable itself. Here's the logic that should be added to aggrid.js:

// In the handle_event method, before calling sizeColumnsToFit
if (type === "gridSizeChanged" && this.auto_size_columns) {
  // Don't auto-size if any column uses flex
  const hasFlexColumns = this.gridOptions.columnDefs?.some(col => col.flex !== undefined);
  if (!hasFlexColumns) {
    this.api.sizeColumnsToFit();
  }
}

This would be backward compatible and would allow flex to work as expected without requiring users to manually set auto_size_columns=False.

Verdict

This appears to be a legitimate bug introduced by the interaction between NiceGUI's automatic column sizing feature and AG Grid's native flex property. It should be fixed by making the auto-sizing smarter about when it's appropriate to call sizeColumnsToFit().

So you can use auto_size_columns=False for now. And we have to think about whether ui.aggrid should automatically disable it if a column uses flex. Alternatively we could add a note to the documentation.

[guyingbo]

OK, Thanks for your reply.

[PhilippMolitor]

also encountered this and was not able to find a solution until i stumbled upon this issue. I think it is really worth noting that in the docs, if not maybe catching that at runtime 👍