Table component cell slots may no longer require Vue string templates.

[CrystalWindSnake]

I accidentally discovered that Vue 3 has a component called teleport that allows specifying a component to render anywhere on the page. I vaguely feel that by leveraging this component's features, we can use any NiceGUI component instance directly in table cell slots without writing Vue string templates.

a simple demo repository.
The usage example :

table = ui.table(columns=columns, rows=rows, pagination=2).classes("w-full")

@table_cell_slot(table, "name")
def _(args: TableCellSlotProps):
    # This function is invoked when the cell is being rendered
    index = args.row_index
    ui.select(
        name_options,
        value=rows[index]["name"],
        on_change=lambda e: rename(e, index),
    )

I will fix some issues and submit the corresponding PR, in the coming days.
Todo list:

• Create the teleport component (a separate PR)
• Implement table cell slots
• Implement table row slots
• Implement the options slot for the select component.

flowchart

If you has any ideas or suggestions, please let me know.

[falkoschindler]

Oh WOW! This would be amazing, @CrystalWindSnake! Your demo already looks very promising. 🚀

This would resolve discussions like #846, #1138, #2080, and #2625.

Maybe we can nest the slot and argument type in the ui.table namespace:

table = ui.table(...)

@table.cell_slot("name")
def _(args: ui.table.CellSlotProps):
    ...

or simply:

@table.cell_slot("name")
def _(row_index: int, name: str):
    ...

Anyway, I'm very much looking forward to your pull request. 🙂

[CrystalWindSnake]

Thank you for your suggestion, the second option looks great

[me21]

VERY cool! Is it going by any chance to work not only in ui.table, but also in ui.aggrid and maybe even in nicegui_tabulator? 😊
Also, is this approach useful only for tables, or for other components as well? For example, rendering tooltips for dropdown elements as in #2664?

[CrystalWindSnake]

nicegui_tabulator now supports cell slots.In principle, it should work on any component, particularly those of Quasar.

[me21]

Indeed. Would it be useful to merge @table.add_cell_slot for tabulator and @table_cell_slot for ui.table to avoid code duplication (if any)?

[CrystalWindSnake]

The mechanisms for rendering table cells in ui.table and tabulator are somewhat different; I'm afraid they cannot share the same code.

[rodja]

For #3794 I needed to write a small demo where a ui.select is injected with ui.teleport into a table cell:

colors = ['red', 'green', 'blue']
columns = [
    {'name': 'product', 'label': 'Product', 'field': 'product', 'align': 'center'},
    {'name': 'color', 'label': 'Color', 'field': 'color', 'align': 'center'},
]
rows = [
    {'product': 'A', 'color': 'red'},
    {'product': 'B', 'color': 'green'},
    {'product': 'C', 'color': 'blue'},
]
table = ui.table(columns=columns, rows=rows, row_key='product').classes('w-72')
table.add_slot('body-cell-color', r'''<q-td key="color" :props="props"></q-td>''')
for r, row in enumerate(rows):
    with ui.teleport(f'#c{table.id} tr:nth-child({r+1}) td:nth-child(2)'):
        ui.select(colors).bind_value(row, 'color')

Is this something we could improve with @table.cell_slot?