Translating table example to Python

[me21]

There is an example of drop-down control inside a table cell: https://nicegui.io/documentation/table#table_with_drop_down_selection
While it works fine, it heavily uses Javascript. Would it be possible in the future to translate it to Python?
Namely, I'm talking about this snippet:

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

Would it be possible to work on making it look like

table = ui.table(columns=columns, rows=rows, row_key='name').classes('w-full')
with table.add_slot('body'), table.row():
    with table.cell().props('key=name') as cell:
        ui.select(name_options).bind_value(cell)
    with table.cell().props('key=age') as cell:
        ui.label().bind_value(cell)

Of course, it is just a pseudocode and does not work as intended, but you get the idea.
I think I might be able to help, but I would need a roadmap since I don't know where to start.

[falkoschindler]

Hi @me21,
We get this kind of question pretty often and I need to refer to previous comments about this subject:

• Use checkbox for boolean columns in Table #846 (comment)
• Tables, bindings and add_slot API #1138 (comment)
• is it possible to always use nicegui's widgets in slot directly? #2080 (comment)

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. 🙂