Creating Tables with buttons, that perfom actions based on their row

[miqsoft]

Question

Hey guys,

I'm trying to create a table with a column containing a button, which perfoms an action dependent on a value in the row where the button is located. What I achieved so far is creating icons dependent on the row value quasar code in the slow, but I did not figure out, how this can be done for clicks on a button. I'm glad for help and ideas!

The code with the icon, I got so far:

from nicegui import ui

columns = [
    {'name': 'key', 'label': 'key', 'field': 'key', 'sortable': True},
    {'name': 'value', 'label': 'value', 'field': 'value', 'sortable': True},
]
data = [
    {'key': 'total', 'value': 'success'},
    {'key': 'vagrant', 'value': 'warning'},
    {'key': 'gui automation', 'value': 'error'},
    {'key': 'parse and test', 'value': 'pending'},
]


with ui.table(columns, rows=data).classes('w-full bordered') as table:
    table.add_slot(f'body-cell-value',"""
        <q-td :props="props">
            <q-icon name="check_circle" color="green" v-if="props.value == 'success'" size="2rem"/>
            <q-icon name="error" color="warning" v-else-if="props.value == 'warning'" size="2rem"/>
            <q-icon name="cancel" color="red" v-else-if="props.value == 'error'" size="2rem"/>
            <q-icon name="pending" color="grey" v-else-if="props.value == 'pending'" size="2rem"/>
        </q-td> 
    """)

What I would like to have:

from nicegui import ui

columns = [
    {'name': 'key', 'label': 'key', 'field': 'key', 'sortable': True},
    {'name': 'value', 'label': 'value', 'field': 'value', 'sortable': True},
]
data = [
    {'key': 'total', 'value': 'success'},
    {'key': 'vagrant', 'value': 'warning'},
    {'key': 'gui automation', 'value': 'error'},
    {'key': 'parse and test', 'value': 'pending'},
]


with ui.table(columns, rows=data).classes('w-full bordered') as table:
    with table.add_slot(f'body-cell-value'):
        with table.cell() as td:
            # at this point I don't know what to do since I don't know how to access the certain row as it is done above by using the v-bind for props. 
            # If I can access the row anyhow here I can place row dependent icons as wells as buttons in here

[falkoschindler]

Hi @miqsoft! You can use a button that emits a custom event on the table:

with ui.table(columns, rows=data).classes('w-full bordered') as table:
    table.add_slot(f'body-cell-value', """
        <q-td :props="props">
            <q-btn @click="$parent.$emit('action', props)" icon="send" flat />
        </q-td>
    """)
    table.on('action', lambda msg: print(msg))

The received event message contains plenty of information about the current row.

[akai-1024]

It's a good answer.

I expanded a little bit with multiple actions under one field.

with ui.table(columns, rows=data).classes('w-full bordered') as table:
    table.add_slot(f'body-cell-value', """
        <q-td :props="props">
            <q-btn @click="$parent.$emit('add', props)" icon="add" flat dense color='green'/>
            <q-btn @click="$parent.$emit('edit', props)" icon="edit" flat dense color='blue'/>
            <q-btn @click="$parent.$emit('del', props)" icon="delete" flat dense color='red'/>
        </q-td>
    """)
    table.on('action', lambda msg: print(msg))
    table.on('add', lambda msg: print("add", msg))
    table.on('edit', lambda msg: print("edit", msg))
    table.on('del', lambda msg: print("del", msg))

[hurdlea]

This is fantastic and meets my needs except for 1 issue. If I add props on the table then the events don't fire. When I look at the Event Listeners on the page the "action" event is missing. If I comment out the table.props line the action Event Listener is present. What am I doing wrong?

with ui.table(columns, rows=data).classes('w-full bordered') as table:
    table.add_slot(f'body-cell-value', """
        <q-td :props="props">
            <q-btn @click="$parent.$emit('action', props)" icon="send" flat />
        </q-td>
    """)
    table.on('action', lambda msg: print(msg))
    table.props('flat bordered hide-header virtual-scroll dense')

[falkoschindler]

Strange. It seems to be caused by the "virtual-scroll" prop. I don't know this one and its implications. Do you really need it?

[hurdlea]

Wow! Thanks for the quick reply. Err, I don't think I need the virtual-scroll prop and if I remove it and everything works just fine!