ui.aggrid/ui.table - Scroll to Bottom/Newest Row

[linkwww8]

Question

Big thxs to NiceGUI team for making a great tool!

Trying to find a way to scroll to the latest (appended) row with a ui.table or ui.aggrid. I've tried looking into 'scrollTo' but had no luck...

Using code kindly shared here (#408) by @phoskee to read new rows in from a file via csv.DictReader. Nothing fancy, simply using a ui.aggrid with an update button. But when clicked, table jumps back to top every time (update()).

Side note: I believe this method is the preferred option rather than from_pandas(df) which doesnt have an update_from_pandas() feature yet. Unsure if that info is still correct @falkoschindler , but tell me if there is a improved way lol.

[rodja]

Sorry @linkwww8 we do not have a ready-made solution for your use case. But scrolling to the bottom of a page is implemented in our chat app example:

nicegui/examples/chat_app/main.py

Line 15 in 0994ca6

ui.run_javascript('window.scrollTo(0, document.body.scrollHeight)')

Maybe you can adapt this?

[linkwww8]

Thxs @rodja! As everyone likes code lol - maybe example would help you/@falkoschindler in case better overall way.

grid = ui.aggrid({
    'defaultColDef': {'flex': 1},
    'columnDefs': [
        {'headerName': 'Name', 'field': 'name'},
        {'headerName': 'Age', 'field': 'age'},
        {'headerName': 'Parent', 'field': 'parent'},
    ],
    'rowData': [],
}).classes('max-h-100')

def grid_update():
    a = []
    with open('example.csv', 'rt') as f:
        reader = csv.DictReader(f)
        for row in reader:
            a.append(row)
    grid.options['rowData'] = a
    grid.update()

ui.button('Populate', on_click=grid_update)

In perfect would, click update, new row/s added and the grid 'snaps' to the bottom (to show latest). Currently, new rows added, but scroll needed.

ag.grid documentation discusses suppressScrollOnNewData but setting to 'True' had no effect. Also .run_method('scrollTo', <value>) doesn't seem to work with ui.aggrid? prepend_new: bool = True was seen in an example by Wolf, but no work either.

If more exposed with ui.table, happy to swap. Unsure if ui.run_javascript('window.scrollTo(0, document.body.scrollHeight)') will work as grid is not the only element on the page? Thxs!

[rodja]

According to https://stackoverflow.com/a/55768729 it should be possible to do "scroll-to-bottom" with ui.aggrid. But I found it much more easy to achieve with ui.table:

def add():
    item = os.urandom(10 // 2).hex()
    table.add_rows({'id': item, 'count': random.randint(0, 100)})
    table.run_method('scrollTo', len(table.rows)-1)


ui.button('add', on_click=add)
columns = [
    {'name': 'id', 'label': 'ID', 'field': 'id'},
    {'name': 'count', 'label': 'Count', 'field': 'count'},
]
table = ui.table(columns=columns, rows=[], row_key='id').classes('w-full h-96').props('virtual-scroll')
for _ in range(30):
    add()

Basically you need to enable virtual-scroll via props and then run the method scrollTo.

[smartWeatherman]

Do you achieve it with ui.aggrid?

[rjsicko]

for anyone who stumbles on this and wants to use ui.aggrid:

aggrid.props('virtual-scroll')
aggrid.run_grid_method('ensureIndexVisible', index)

[evnchn]

For anyone wondering where the methods came from:

• https://www.ag-grid.com/javascript-data-grid/grid-api/ for aggrid.run_grid_method
• https://www.ag-grid.com/javascript-data-grid/column-api/ for aggrid.run_column_method
• https://www.ag-grid.com/javascript-data-grid/row-object/ for aggrid.run_row_method

All of which are linked to in https://nicegui.io/documentation/aggrid