Table cell slot without string template

[CrystalWindSnake]

This PR is based on discussion #3148. The goal is to table cell slots without writing any Vue string templates.

[CrystalWindSnake]

@falkoschindler Hi, I have already completed the basic functionality implementation. I will set aside time later to write tests and documentation. However, I encountered numerous challenges during the implementation process.

This is the basic flowchart.

• to monitor the creation and destruction of slots, I created a new 'table_slot_placeholder' component. I'm not sure if there's a simpler approach to this.

• the ValueElement components placed within Teleport must have their LOOPBACK attribute set to True. This is to ensure that the displayed values remain up-to-date when switching between table pages. I am unsure as to why is works.

[falkoschindler]

Ok, thanks, @CrystalWindSnake! Just let me known when you think it's a good time for a first code review. 🙂

[CrystalWindSnake]

Ok, thanks, @CrystalWindSnake! Just let me known when you think it's a good time for a first code review. 🙂

I've been quite busy with work recently, and I expect to need another two days to complete the unit tests. After that, I'll ask for your review, thanks.

[rodja]

@CrystalWindSnake are you still able to get this done? @wasabismile and others would greatly benefit from this. See #3484 (comment).

[CrystalWindSnake]

@rodja This approach encounters difficulties with ui.table. ui.table refreshes at certain moments, such as when switching pages or when the screen size changes, and after refreshing, the content of Teleport disappears. The following example should demonstrate the issue.

from nicegui import ui

columns = [
    {"name": "name", "label": "Product", "field": "name", "align": "center"},
    {"name": "sales", "label": "Sales", "field": "sales", "align": "center"},
]
rows = [
    {"name": "A", "data": [10, 8, 2, 4]},
    {"name": "B", "data": [3, 5, 7, 8]},
    {"name": "C", "data": [2, 1, 3, 7]},
]
table = ui.table(columns=columns, rows=rows, row_key="name", pagination=2).classes(
    "w-72"
)
for r, row in enumerate(rows):
    with ui.teleport(f"#c{table.id} tr:nth-child({r+1}) td:nth-child(2)"):
        ui.echart(
            {
                "xAxis": {"type": "category", "show": False},
                "yAxis": {"type": "value", "show": False},
                "series": [{"type": "line", "data": row["data"]}],
            }
        ).classes("w-44 h-20")

ui.run()

This example is largely identical to Example, with the sole modification being the setting of pagination=2 for ui.table. Upon transitioning to the second page, the content within teleport vanishes.

I have not found an easy solution to detect when ui.table is refreshed.

[wasabismile]

@CrystalWindSnake @falkoschindler
The example above mentioned that when switching to the second page, the content within teleport vanishes.
I found that when switching paging, through the following code， the client is triggered to reload the page. Solve this problem.

table.on('update:pagination', lambda _: ui.run_javascript('location.reload();'))

Maybe this method is not very good, I still hope that more people can use the table cell slot as soon as possible.

[CrystalWindSnake]

In addition to refreshing the pagination, there are other refresh issues to consider. I'll work on implementing the basic functions gather some examples of the problems over the next few days, and then submit a PR. We can discuss how to address other refresh problems after that.

[CrystalWindSnake]

When I use the latest version of NiceGUI, the issues I encountered before have disappeared. Vue 3.5 may have resolved a series of problems with teleport. This PR may be able to move forward.