Table questions

[AnonyDon]

Question

Hello @falkoschindler, your replies have been very helpful for me, Thank you!
I'm trying to implement checkboxes on a row of a table but cannot get the rows to update when the checkboxes are clicked.
The example you've provided here seems to be the solution to my issues but I get the following error when trying your example myself:

'GenericEventArguments' object is not subscriptable
Traceback (most recent call last):
  File "C:\Users\Admin\PycharmProjects\NiceGuiEncounterApp\.venv\Lib\site-packages\nicegui\events.py", line 413, in handle_event
    result = handler(arguments) if expects_arguments else handler()
             ^^^^^^^^^^^^^^^^^^
  File "C:\Users\Admin\PycharmProjects\NiceGuiEncounterApp\testing.py", line 24, in update_male
    if row['id'] == msg['args']['id']:
                    ~~~^^^^^^^^
TypeError: 'GenericEventArguments' object is not subscriptable

I can't seem to figure out a way to get the args from the event object...
Here is what I'm trying:

from nicegui import ui
from typing import Dict

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name'},
    {'name': 'age', 'label': 'Age', 'field': 'age'},
    {'name': 'male', 'label': 'Male'},
]
rows = [
    {'id': 0, 'name': 'Alice', 'age': 18, 'male': False},
    {'id': 1, 'name': 'Bob', 'age': 21, 'male': True},
    {'id': 2, 'name': 'Carol', 'male': False},
]
name_options = ['Alice', 'Bob', 'Carol']

def rename(msg: Dict) -> None:
    for row in rows:
        if row['id'] == msg['args']['id']:
            row['name'] = msg['args']['name']
    ui.notify(f'Table.rows is now: {table.rows}')

def update_male(msg: Dict) -> None:
    for row in rows:
        if row['id'] == msg['args']['id']:
            row['male'] = msg['args']['male']
    ui.notify(f'Table.rows is now: {table.rows}')

table = ui.table(columns=columns, rows=rows, row_key='name').classes('w-full')
table.add_slot('body', r'''
    <q-tr :props="props">
        <q-td key="name" :props="props">
            <q-select
                v-model="props.row.name"
                :options="''' + str(name_options) + r'''"
                @update:model-value="() => $parent.$emit('rename', props.row)"
            />
        </q-td>
        <q-td key="age" :props="props">
            {{ props.row.age }}
        </q-td>
        <q-td key="male" :props="props">
            <q-checkbox v-model="props.row.male" @update:model-value="() => $parent.$emit('update_male', props.row)" />
        </q-td>
    </q-tr>
''')
table.on('rename', rename)
table.on('update_male', update_male)

ui.run()

I apologize if there is something obvious I'm missing!

Also, I'm trying to make a label that displays only certain values of the selected rows.
I have no problem getting the list of selected rows with:

ui.label().bind_text_from(table, 'selected', lambda val: f'selected rows: {val}').classes('col-span-full')

But I cannot for the life of me figure out how to bind the label from the specific values of that list I'm looking for. I think the answer has something to do with async/await...
Any suggestions would be greatly appreciated!

[falkoschindler]

Hi @AnonyDon,

Nowadays the generic event registration .on() returns GenericEventArguments instead of a plain dictionary. You can access the argument dictionary like this:

from nicegui import events

...

def rename(e: events.GenericEventArguments) -> None:
    for row in rows:
        if row['id'] == e.args['id']:
            row['name'] = e.args['name']
    ui.notify(f'Table.rows is now: {table.rows}')

See https://nicegui.io/documentation/table#table_with_drop_down_selection for a very similar example.

Regarding your second question: How does it relate to the code above? Your table has no selection enabled, so there are not selected rows. If it is unrelated, it might be better to post a separate question with a minimal code example to avoid confusion. Thanks!

[AnonyDon]

Thank you!

[AnonyDon]

Hey @falkoschindler, I've noticed some odd behavior with the add_slot checkbox row if i have the table parameter selection='multiple' and .props('virtual-scroll')

Seems to break the functionality of the checkboxes, any idea why this is?

Example:

from nicegui import ui, events

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name'},
    {'name': 'age', 'label': 'Age', 'field': 'age'},
    {'name': 'male', 'label': 'Male'},
]
rows = [
    {'id': 0, 'name': 'Alice', 'age': 18, 'male': False},
    {'id': 1, 'name': 'Bob', 'age': 21, 'male': True},
    {'id': 2, 'name': 'Carol', 'male': False},
]
name_options = ['Alice', 'Bob', 'Carol']


def rename(e: events.GenericEventArguments) -> None:
    for row in rows:
        if row['id'] == e.args['id']:
            row['name'] = e.args['name']
    ui.notify(f'Table.rows is now: {table.rows}')


def update_male(e: events.GenericEventArguments) -> None:
    for row in rows:
        if row['id'] == e.args['id']:
            row['male'] = e.args['male']
    ui.notify(f'Table.rows is now: {table.rows}')


table = ui.table(columns=columns, rows=rows, row_key='name', selection='multiple'
                 ).classes('w-full').props('virtual-scroll')
table.add_slot('body', r'''
    <q-tr :props="props">
        <q-td key="name" :props="props">
            <q-select
                v-model="props.row.name"
                :options="''' + str(name_options) + r'''"
                @update:model-value="() => $parent.$emit('rename', props.row)"
            />
        </q-td>
        <q-td key="age" :props="props">
            {{ props.row.age }}
        </q-td>
        <q-td key="male" :props="props">
            <q-checkbox v-model="props.row.male" @update:model-value="() => $parent.$emit('update_male', props.row)" />
        </q-td>
    </q-tr>
''')
table.on('rename', rename)
table.on('update_male', update_male)

ui.run()

I seriously appreciate all of your help!

[falkoschindler]

1. I recommend using named cell slots instead of the whole body slot to avoid breaking the checkbox selection column on the left when using multi-selection:

   table.add_slot('body-cell-name', r'''
       <q-td key="name" :props="props">
           <q-select
               v-model="props.row.name"
               :options="''' + str(name_options) + r'''"
               @update:model-value="() => $parent.$emit('rename', props.row)"
           />
       </q-td>
   ''')
   table.add_slot('body-cell-age', r'''
       <q-td key="age" :props="props">
           {{ props.row.age }}
       </q-td>
   ''')
   table.add_slot('body-cell-male', r'''
       <q-td key="male" :props="props">
           <q-checkbox v-model="props.row.male" @update:model-value="() => $parent.$emit('update_male', props.row)" />
       </q-td>
   ''')

2. For virtual scrolling, it looks like you need to emit events from the parent's parent like this: $parent.$parent.$emit(...). I haven't looked into the details why this is, but it seems to work.