Redirecting from a button in a table's row

[PoshoDev]

Question

First of all, I'm having a lot of fun with niceGUI so far, it really feels like a gift from heaven, haha. 😁

I'm experimenting a bit with tables, and noticed that adding elements to them is not as straightforward as everything else and will mostly require a bit of HTML scripting. All I'm trying to do at the moment is having a button at the beginning of each row that redirects to a specific link. Looking into Quasar, it seems like normally you'd need to define a redirection function with JavaScript, but I have no clue where to begin with that.

I'm using this example from the docs as the base for my script.

from nicegui import ui

table = ui.table(columns=columns, rows=rows, row_key='name').classes('w-72')
    table.add_slot('header', r'''
        <q-tr :props="props">
            <q-th auto-width />
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.label }}
            </q-th>
        </q-tr>
    ''')
    table.add_slot('body', r'''
        <q-tr :props="props">
            <q-td auto-width>
                <q-btn size="sm" color="accent" round dense
                    @click="() => $router.push('{{ props.row.link }}')"
                    :icon="'visibility'" />
            </q-td>
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.value }}
            </q-td>
        </q-tr>
    ''')

ui.run()

Thank you very much for reading this. Any guidance would be appreciated. 🥲

[falkoschindler]

Thanks a lot for your warm words, @PoshoDev! 😊

You're approach using template slots is good, but can be simplified. Quasar's QTable allows you to specify templates for individual cells, so you don't need to write the whole body template. And maybe you don't need buttons but simple links:

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name'},
    {'name': 'age', 'label': 'Age', 'field': 'age'},
    {'name': 'link', 'label': 'Link', 'field': 'link'},
]
rows = [
    {'name': 'Alice', 'age': 18, 'link': 'https://example.com'},
    {'name': 'Bob', 'age': 21, 'link': 'https://example.com'},
    {'name': 'Carl', 'age': 42, 'link': 'https://example.com'},
]
table = ui.table(columns=columns, rows=rows, row_key='name')
table.add_slot('body-cell-link', r'<td :props="props"><a :href="props.row.link">{{props.row.link}}</a></td>')

[PoshoDev]

Thank you very much, I actually do need buttons since the table I'm trying to create uses many more columns and having URLs in the table would make it get bloated very quick. However, thanks to your example, I was able to figure out how to do exactly what I needed!

from nicegui import ui

columns = [
        {'name': 'name', 'label': 'Name', 'field': 'name'},
        {'name': 'age', 'label': 'Age', 'field': 'age'},
        {'name': 'link', 'label': 'Link', 'field': 'link'},
    ]
    rows = [
        {'name': 'Alice', 'age': 18, 'link': 'https://example.com'},
        {'name': 'Bob', 'age': 21, 'link': 'https://example.com'},
        {'name': 'Carl', 'age': 42, 'link': 'https://example.com'},
    ]
    table = ui.table(columns=columns, rows=rows, row_key='name')
    table.add_slot('body-cell-link', r'''
                   <td :props="props">
                        <q-btn size="sm" color="accent" round dense 
                        :href="props.row.link" icon="visibility" />
                   </td>
                   ''')

site.run()

Thank you so much! Seriously! 😄

[retsyo]

what if every site uses its own icon file? Thanks

[falkoschindler]

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name'},
    {'name': 'age', 'label': 'Age', 'field': 'age'},
    {'name': 'link', 'label': 'Link', 'field': 'link'},
    {'name': 'icon', 'label': 'Icon', 'field': 'icon', 'classes': 'hidden', 'headerClasses': 'hidden'},
]
rows = [
    {'name': 'Alice', 'age': 18, 'link': 'https://example.com', 'icon': 'home'},
    {'name': 'Bob', 'age': 21, 'link': 'https://example.com', 'icon': 'home'},
    {'name': 'Carl', 'age': 42, 'link': 'https://example.com', 'icon': 'home'},
]
table = ui.table(columns=columns, rows=rows, row_key='name')
table.add_slot('body-cell-link', r'''
    <td :props="props">
        <q-btn size="sm" color="accent" round dense :href="props.row.link" :icon="props.row.icon" />
    </td>
''')

[UStar987]

Hello, how to set up a new page after clicking LINK?

[rodja]

@UStar987 how is this related to the current topic? Could you please create a new question? And explain your problem in more detail with a reproducible example. That makes it much easier for the community to help you.