Need Assistance Calling the Search Filter Function Inside the Search Template in NiceGUI Table

[Swasthik-Jain]

I'm currently working on implementing a search feature within a NiceGUI table. Despite my efforts, I'm unable to call the search filter function from inside the search_template.

Below is a simplified snippet :

from nicegui import ui

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name', 'align': 'left'},
    {'name': 'age', 'label': 'Age', 'field': 'age', 'align': 'left'},
]

rows = [
    {'name': 'Alice', 'age': 18},
    {'name': 'Bob', 'age': 21},
    {'name': 'Carol', 'age': 42},
    {'name': 'jain', 'age': 37},
    {'name': 'pawan', 'age': 58},
    {'name:': 'cook', 'age': 50}
]

search_template = '''
<q-tr :props="props">
    <q-th>
        <!-- Search bar -->
        <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
            <template v-slot:append>
                <q-icon name="search" />
            </template>
        </q-input>
    </q-th>
</q-tr>
'''

table = ui.table(rows=rows, columns=columns, title='Results', pagination=2).style('height:24rem')

with table.add_slot('top-right', search_template):

    def toggle() -> None:
        table.toggle_fullscreen()
        button.props('icon=fullscreen_exit' if table.is_fullscreen else 'icon=fullscreen')
        if table.is_fullscreen:
            table.style('height:100%')
        else:
            table.style('height:24rem')
    button = ui.button(icon='fullscreen', on_click=toggle)

ui.run()

My attempts to incorporate the search filter function directly within the search_template have been unsuccessful.
I aim to call the search_filter function inside the search_template so that it can process user input and filter the table rows accordingly.

I'm seeking guidance on the proper method to invoke the search_filter function within the search_template to enable the search functionality. Any advice, corrections, or alternative approaches would be greatly appreciated.

Thank you for your assistance!

[falkoschindler]

Hi @Swasthik-Jain,

You can simply add a ui.input element to the "top-right" slot and bind it to the filter property:

with table.add_slot('top-right'):
    ui.input(placeholder='Search...').bind_value(table, 'filter')

    ...

[Swasthik-Jain]

Thank you sir 🙏
For your quick response 😀