Use checkbox for boolean columns in Table

[tofusoul]

Question

Hi, Trying to adapt the table with dropdown selection example from the documentation to a table column with boolean values, hoping to turn it into a checkbox column:

tried using the following code in place of the dropdown options

            <q-td key="is_true" :props="props">
                <q-checkbox
                    v-model="props.row.is_true"
                    @update:model-value="() => $parent.$emit('update_is_true', props.row)"
                />
           </q-td>

The checkbox renders in the column, but there seems to be no event emitted.

what am I doing wrong?

I don't have enough understanding of neither quasar nor javascript to know what to do.

I have 3 questions:

1. How do I understand what is going on when adding widgets to slots in order to do someting like adding a checkbox to boolean column?
2. If I were to do this to a date filied what would I have to do? Where in what documentation would I have to look at? If I wanted to do this with a date column, where would need to look to figure it out?
3. Are there plans for nicer API in the future for doing this? Does nicegui aim to build pythonic ways to deal with complex problems like building dynamic data tables?

Many thanks,

this is the code snippet I am referencing:

from nicegui import ui
from typing import Dict

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name'},
    {'name': 'age', 'label': 'Age', 'field': 'age'},
]
rows = [
    {'id': 0, 'name': 'Alice', 'age': 18},
    {'id': 1, 'name': 'Bob', 'age': 21},
    {'id': 2, 'name': 'Carol'},
]
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}')

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-tr>
''')
table.on('rename', rename)

ui.run()

[falkoschindler]

Have you subscribed to the event you're emitting? I tried it myself and it seems to be working nicely:

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)

To do something like this for dates, maybe with QDate, you should probably look into the Quasar documentation. Once you get a hang on emitting and receiving events from slot templates, adopting Vue code from the documentation should get easier.

These scoped slots are certainly one of the most complicated things NiceGUI has to offer. I'm thinking about ways to simplify it for some time now, but so far I don't see how. Since these elements q-tr, q-td, ... don't live in Python (they are no NiceGUI elements), we would need something new to define template objects. It would have to allow for all possible HTML tags and attributes. And we need the ability access row props and to handle and forward events. It all needs to be nice and simple enough to justify the implementation and learning this new API instead of learning to write Vue templates. Pretty complicated, but maybe not impossible. 🙂

[tofusoul]

Thanks again @falkoschindler, you are awesome!

I tried it again and it seems to work. Looked back at the previous commit, where it wasn't working... so it turns out that there was a typo in the first argument of my table.on function. So the message wasn't forwarded to the handler.

It's actually nice that we get to do this type of things in Nicegui. I am a fresh arrival from Streamlit, having fully hit the wall there, having access to the underlying JavaScript components is kind of handy and helps with learning, accepting and appreciating how Nicegui works. But as with things like in-line SQL strings and such, not having access to the usual editor tooling you depend on in, especially in a language you are not familiar with is kind of unnerving. I have no idea what that arrow function is doing for instance, what is the model-value type, what does $ mean in front of a variable in JavaScript? And it kinda draws attention away from the more obvious thing, which was that I just made a typo in handling the emitted message.

Re: simplifying this, maybe if there is an easier way to get more transparency on what's happening on the JavaScript side, for instance somehow being able to be aware of the fact that the client did emit a message and what the content of that message is. That might be enough.

Thanks again for the great work and the responsive help! Nicegui is really nice!