Button not showing in ui.table custom column with add_slot

[Mogit21]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui

columns = [
    {'name': 'id', 'label': 'ID', 'field': 'id'},
    {'name': 'name', 'label': 'Name', 'field': 'name'},
    {'name': 'age', 'label': 'Age', 'field': 'age'},
    {'name': 'actions', 'label': 'Actions'},  # No field: 'actions' to avoid serialization error
]

rows = [
    {'id': 0, 'name': 'Paul', 'age': 38 }
]

table = ui.table(columns=columns, rows=rows, row_key='id', pagination=10).classes('w-full')
table.add_slot('body-cell-actions')
with ui.row().classes('gap-2').on('click.stop', None):
    ui.button('Delete', on_click=lambda: ui.notify('Deleted!'))    
ui.run()

Description

Hello,
I am trying to add a Delete button in an actions column of a table using table.add_slot('body-cell-actions').

Expected behavior:
Each row should display a Delete button in the “Actions” column.

Actual behavior:
No button appears in the table. It is appearing on the bottom of the table instead. The rest of the table renders correctly.

NiceGUI Version

2.24.0

Python Version

Python 3.12.2

Browser

Edge

Operating System

Windows

Additional Context

It seems that either I am misusing add_slot, or the docs/examples don’t cover how to return UI elements for body-cell slots without decorators.

Would appreciate clarification or a working example showing how to render per-row buttons in a table column using the context manager style.

[Mogit21]

I would like to update that the code finally worked when I used Quasar template in table.add_slot() instead of using context manager with ui.row as in the original code.
The code that works (displaying delete button on the column is ass follows:

from nicegui import ui

columns = [
    {'name': 'id', 'label': 'ID', 'field': 'id'},
    {'name': 'name', 'label': 'Name', 'field': 'name'},
    {'name': 'age', 'label': 'Age', 'field': 'age'},
    {'name': 'actions', 'label': 'Actions'},
]

rows = [{'id': 0, 'name': 'Paul', 'age': 38}]

table = ui.table(columns=columns, rows=rows, row_key='id').classes('w-full')

# Quasar template for Actions column
table.add_slot(
    'body-cell-actions',
    '''
    <q-btn color="red" label="Delete" @click="() => $q.notify({message: 'Deleted ' + props.row.name + '!'})" />
    '''
)

ui.run()

[Mogit21]

Hello,
Can I conclude that adding content (like a button in this example) to a specific cell in a table using add_slot works only if I use quasar template?
Thank you,

[BaccanoMob]

Yes, as far as I know that's the only way. It's similar to expandable rows example in the docs.

[Mogit21]

Thanks a lot for clarifying! You’re right — in my case I also had to use a Quasar template inside add_slot to make it work.

I realize now my use case is a bit different from the “expandable rows” example, since I only needed to add a custom button in a specific cell (an “Actions” column).

I think this could be a useful addition to the docs, so I might open a PR with a small example. Hopefully it can help others who run into the same situation.

[rodja]

Yes @Mogit21 a new demo for that would be great!