How to get the value of a cell slot within a table?

[thanhnguyen2187]

Description

Hi. Thanks for the awesome library!

I'm trying to customize specific cells within a table. To get into details, it is "converting" the strings not-started, or error, or success into equivalent badges. My code example is:

def status_badge(status: str):
    text = ""
    color = ""
    match status:
        case "not-started":
            text = "Not started"
            color = "gray"
        case "error":
            text = "Error"
            color = "red"
        case "success":
            text = "Success"
            color = "green"

    return ui.badge(text=text, color=color)


rows = [
    {"status": "not-started"},
    {"status": "success"},
    {"status": "error"},
]
columns = [
    {
        "name": "status",
        "label": "Status",
        "field": "status",
        "align": "left",
    },
]
with ui.table(
    rows=rows,
    columns=columns,
    row_key="index",
    pagination=5,
) as table:
    with table.add_slot(name="body-cell-status") as slot:
        with table.cell() as cell:
            status_badge(status="not-started")
            # how do I get the values from slot?

I found that we can customize body-cell-... with JS, but I'm wondering if we can do better. Following "the JS path" are these "roads":

• Inline-logic: it would get quite... ugly. Because I have 3 statuses, the ternary logic will not be simple nor maintainable.
• Global JS logic: I found that we can do ui.add_head_html, and add custom <script>...</script>. I probably would settle with it for now, but for long term, I would prefer having everything within Python.

The added logic in the second road can be something like:

function calculateStatusColor(status) {
    if (status === 'not-started') { return 'gray' }
    if (status === 'error') { return 'red' }
    if (status === 'success') { return 'green' }
    return ''
}

function calculateStatusText(status) {
    if (status === 'not-started') { return 'Not started' }
    if (status === 'error') { return 'Error' }
    if (status === 'success') { return 'Success' }
    return ''
}

EDIT: because of how Vue works, I cannot just define a global var, or window.myFunction and use it within the <q-td> 😅.

EDIT: I found that we can do something like:

    with ui.table(
        rows=rows,
        columns=columns,
        row_key="index",
        pagination=5,
    ) as table:
        table.add_slot(
            name="body-cell-status",
            template="""
                <q-td key="status" :props="props">
                    <q-badge :color="
                        (function(status) {
                            if (status === 'not-started') { return 'gray' }
                            if (status === 'error') { return 'red' }
                            if (status === 'success') { return 'green' }
                            return 'red'
                        })(props.value)
                    ">
                        {{
                            (function(status) {
                                if (status === 'not-started') { return 'Not started' }
                                if (status === 'error') { return 'Error' }
                                if (status === 'success') { return 'Success' }
                                return 'Invalid'
                            })(props.value)
                        }}
                    </q-badge>
                </q-td>
            """,
        )

Which is... good enough for now, but please let me know what do you think anyway!

Thanks!

[falkoschindler]

Hi @thanhnguyen2187,

Here's a trick I like to use:

COLORS = {
    'not-started': 'gray',
    'error': 'red',
    'success': 'green',
}
LABELS = {
    'not-started': 'Not started',
    'error': 'Error',
    'success': 'Success',
}

columns = [{"name": "status", "label": "Status", "field": "status", "align": "left"}]
rows = [{"status": "not-started"}, {"status": "success"}, {"status": "error"}]
with ui.table(rows=rows, columns=columns, row_key="index", pagination=5) as table:
    table.add_slot("body-cell-status", '''
        <q-td key="status" :props="props">
            <q-badge :color="''' + json.dumps(COLORS).replace('"', "'") + '''[props.value]">
                {{ ''' + json.dumps(LABELS) + '''[props.value] }}
            </q-badge>
        </q-td>
    ''')

Embedding a JSON-serialized dictionary in the template string keeps the JavaScript code simple while moving the lookup dictionaries of colors and labels into the Python world. We just need to replace double quotes " with single quotes ' to avoid clashing with the quotes for the XML attribute :color="...".

[thanhnguyen2187]

Thanks for the response! It's certainly a nice trick to use. Back to the main topic, I feel like it would be much better if have a way to get the value from Python itself:

with ui.table(
    rows=rows,
    columns=columns,
    row_key="index",
    pagination=5,
) as table:
    with table.add_slot(name="body-cell-status") as slot:
        with table.cell() as cell:
            status_badge(status="not-started")
            # how do I get the values from slot?

I dug into the code a bit and it does not seem like we can dynamically use slot._props. Do you think that we can incorporate such change?

[falkoschindler]

Well, that's an open question: #2625 (comment)