How to get filtered rows from AG Grid table?

[Anindya088]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

No sample code to share as this is a general question on AG Grid and how to get the filtered data

Description

Hi All,

I am struggling to get the filtered rows at backend when using AG Grid tables. Is there any easy way to do this?

So far, what I saw/understood is:
Option 1: use the await grid.run_grid_method('getFilterModel') to get the filter dictionary and apply those filters manually on your own dataframe

Option 2: I found some js code on AG Grid website about row iteration, but don't know how to use it in NiceGUI context, so what I found is this:

function onBtForEachNodeAfterFilter() {
  console.log("### api.forEachNodeAfterFilter() ###");
  gridApi.forEachNodeAfterFilter(printNode);
}

Please let me know if there is an easy way to achieve this. Thanks a lot for the help.

Regards,
Anindya

NiceGUI Version

2.14.1

Python Version

3.13.0

Browser

Chrome

Operating System

Windows

Additional Context

No response

[falkoschindler]

Hi @Anindya088,

Unfortunately I don't see an easier way than running custom JavaScript including forEachNodeAfterFilter. (I don't think we should replicate the filtering on the server with the result from getFilterModel.)

@ui.page('/')
def page():
    grid = ui.aggrid({
        'columnDefs': [
            {'headerName': 'Name', 'field': 'name', 'filter': 'agTextColumnFilter', 'floatingFilter': True},
            {'headerName': 'Age', 'field': 'age', 'filter': 'agNumberColumnFilter', 'floatingFilter': True},
        ],
        'rowData': [
            {'name': 'Alice', 'age': 18},
            {'name': 'Bob', 'age': 21},
            {'name': 'Carol', 'age': 42},
        ],
    })

    async def get_filtered_rows():
        rows = await ui.run_javascript(f'''
            const grid = getElement({grid.id});
            const rows = [];
            grid.api.forEachNodeAfterFilter(node => rows.push(node.data));
            return rows;
        ''')
        print(rows)

    ui.button('Get filtered rows', on_click=get_filtered_rows)

If you think this is a common use case, we could add a grid.get_filtered_rows() method hiding the details.

[Anindya088]

hI @falkoschindler , wow, that works great, many many thanks 😄
Yes, please make this as a method as you suggested, will be very helpful.

[falkoschindler]

Oh, I just noticed that it is already implemented:

async def get_filtered_rows():
    print(await grid.get_client_data(method='filtered_unsorted'))

The method get_client_data accepts four different methods that map to AG Grid's API methods like this:

nicegui/nicegui/elements/aggrid.py

Lines 210 to 215 in 29a4262

	API_METHODS = {
	'all_unsorted': 'forEachNode',
	'filtered_unsorted': 'forEachNodeAfterFilter',
	'filtered_sorted': 'forEachNodeAfterFilterAndSort',
	'leaf': 'forEachLeafNode',
	}

[Anindya088]

Oh this is great, thanks so much. Very very useful 🙏