How to handle table row click event and show clicked row in a popup window

[muratbedir]

I am using sample code in below and I want to "When user click in a row of this table, I want to show content on popup windows."

But I can't find to handle button click event on this table.

Thanks for read and help.

from nicegui import ui

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name', 'align': 'left'},
    {'name': 'length', 'label': 'Length', ':field': 'row => row.name.length'},
]
rows = [
    {'name': 'Alice'},
    {'name': 'Bob'},
    {'name': 'Christopher'},
]
ui.table(columns=columns, rows=rows, row_key='name')

ui.run()

[muratbedir]

I found answer ; below code usable

ref: [(https://github.com//discussions/815)]

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-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))

ui.run()