How can I get the number of filtered rows in ui.table in real time？

[Xsakura1314]

Question

I know that the documentation provides a get_filtered_sorted_rows method to retrieve the number of rows in the currently filtered table, but it requires clicking a button. I want to achieve updating the number of filtered rows in the current table after I input the filter criteria, without needing to click a button. I couldn't find a relevant method in the documentation to implement this.

I try to use the following code:

from nicegui import ui

@ui.page("/")  # normal index page (e.g. the entry point of the app)
def main():
    async def show_filtered_sorted_rows():
        ui.notify(await table.get_computed_rows_number())

    async def show_computed_rows():
        ui.notify(await table.get_computed_rows())

    table = ui.table(
        columns=[
            {
                "name": "name",
                "label": "Name",
                "field": "name",
                "align": "left",
                "sortable": True,
            },
            {
                "name": "age",
                "label": "Age",
                "field": "age",
                "align": "left",
                "sortable": True,
            },
        ],
        rows=[
            {"name": "Noah", "age": 33},
            {"name": "Emma", "age": 21},
            {"name": "Rose", "age": 88},
            {"name": "James", "age": 59},
            {"name": "Olivia", "age": 62},
            {"name": "Liam", "age": 18},
        ],
        row_key="name",
        pagination=3,
    )
    ui.input("Search by name/age").bind_value(table, "filter")
    ui.button("Show filtered/sorted rows", on_click=show_filtered_sorted_rows)
    ui.button("Show computed rows", on_click=show_computed_rows)

    # ui.label().bind_text_from(table, "rows", backward=lambda x: len(x))
    ui.label().bind_text_from(table, "filter", backward=lambda x: table.get_computed_rows_number())

ui.run()

However, nicegui just show a error.

TypeError: Type is not JSON serializable: coroutine

[falkoschindler]

Hi @Xsakura1314,

You can subscribe to value changes of the input element:

async def update_row_count_label():
    count = await table.get_computed_rows_number()
    row_count_label.text = f'{count} rows'

filter_input = ui.input("Search by name/age").bind_value(table, "filter")
filter_input.on_value_change(update_row_count_label)
row_count_label = ui.label()

Because get_computed_rows_number needs to be awaited before passing it to the row_count_label, we need to wrap the call in an async update_row_count_label function.

[Xsakura1314]

@falkoschindler

Thank you for help, it worked.

from nicegui import ui


@ui.page("/")
def main():
    table = ui.table(
        columns=[
            {
                "name": "name",
                "label": "Name",
                "field": "name",
                "align": "left",
                "sortable": True,
            },
            {
                "name": "age",
                "label": "Age",
                "field": "age",
                "align": "left",
                "sortable": True,
            },
        ],
        rows=[
            {"name": "Noah", "age": 33},
            {"name": "Emma", "age": 21},
            {"name": "Rose", "age": 88},
            {"name": "James", "age": 59},
            {"name": "Olivia", "age": 62},
            {"name": "Liam", "age": 18},
        ],
        row_key="name",
        pagination=3,
    )

    async def update_row_count_label():
        count = await table.get_computed_rows_number()
        row_count_label.text = f"{count} rows"

    filter_input = ui.input("Search by name/age").bind_value(table, "filter")
    filter_input.on_value_change(update_row_count_label)
    row_count_label = ui.label(f"{len(table.rows)} rows")


ui.run()