How to access buttons created via table slot?

[vahuynh12]

Question

Hello,

In the below code, I created a table with row buttons following the example in #815. I want to be able to enable/disable the buttons programmatically, but I'm not sure how to access them since they were created through the table's body-cell-[name] scoped slot.

I would appreciate any help, and thank you in advance!

from nicegui import ui

table = ui.table(
    columns=[
        {
            "name": "name",
            "label": "Name",
            "field": "name",
            "required": True,
            "align": "left",
        },
        {
            "name": "age",
            "label": "Age",
            "field": "age",
            "required": True,
            "align": "left",
        },
        {
            "name": "buttons",
            "label": "",
            "field": "buttons",
            "align": "center",
        },
    ],
    rows=[
        {"id": "0", "name": "Bob", "age": 34},
        {"id": "1", "name": "Jill", "age": 35},
    ],
    row_key="id",
    title="Entries",
    selection=None,
    pagination=0,
    on_select=None,
    on_pagination_change=None,
)


table.add_slot(
    name="body-cell-buttons",
    template=r"""
        <q-td :props="props" colspan="100%">
            <q-btn icon="edit" flat dense />
            <q-btn icon="people" flat dense />
        </q-td>
    """,
)

ui.run()

[python-and-fiction]

from nicegui import ui


table = ui.table(
    columns=[
        {
            "name": "name",
            "label": "Name",
            "field": "name",
            "required": True,
            "align": "left",
        },
        {
            "name": "age",
            "label": "Age",
            "field": "age",
            "required": True,
            "align": "left",
        },
        {
            "name": "buttons",
            "label": "",
            "field": "buttons",
            "align": "center",
        },
    ],
    rows=[
        {"id": "0", "name": "Bob", "age": 34},
        {"id": "1", "name": "Jill", "age": 35},
    ],
    row_key="id",
    title="Entries",
    selection=None,
    pagination=0,
    on_select=None,
    on_pagination_change=None,
)

switch = ui.switch('show or hide',value=False)

with table.add_slot("body-cell-buttons"),ui.element('q-td').props('colspan="100%'):
    ui.button(icon='edit').props('flat dense').bind_visibility_from(switch,'value')
    ui.button(icon='people').props('flat dense').bind_visibility_from(switch,'value')

switch.move()
ui.run()

[falkoschindler]

@python-and-fiction I think you can't add buttons to table slots like this. When adding click handlers, they don't work. 😕

[vahuynh12]

Thank you for the help. With your approach, how could I achieve the same functionality as the code below (where I am able to handle the GenericEventArguments from a button's emitted event)?

from nicegui import ui
from nicegui.events import GenericEventArguments

table = ui.table(
    columns=[
        {
            "name": "name",
            "label": "Name",
            "field": "name",
            "required": True,
            "align": "left",
        },
        {
            "name": "age",
            "label": "Age",
            "field": "age",
            "required": True,
            "align": "left",
        },
        {
            "name": "buttons",
            "label": "",
            "field": "buttons",
            "align": "center",
        },
    ],
    rows=[
        {"id": "0", "name": "Bob", "age": 34},
        {"id": "1", "name": "Jill", "age": 35},
    ],
    row_key="id",
    title="Entries",
    selection=None,
    pagination=0,
    on_select=None,
    on_pagination_change=None,
)


table.add_slot(
    name="body-cell-buttons",
    template=r"""
        <q-td :props="props" colspan="100%">
            <q-btn icon="edit" flat dense @click="$parent.$emit('edit', props)"/>
            <q-btn icon="people" flat dense @click="$parent.$emit('contact', props)"/>
        </q-td>
    """,
)


def handle_edit(e: GenericEventArguments) -> None:
    name: str = e.args["row"]["name"]

    ui.notify(f"Editing row of {name}")


def handle_contact(e: GenericEventArguments) -> None:
    name: str = e.args["row"]["name"]

    ui.notify(f"Contacting {name}")


table.on("edit", handle_edit)
table.on("contact", handle_contact)

ui.run()

Similarly, is there a way for me to access the "props" with your approach? This snippet below with "slot.props" from #501 is what I had in mind, but I don't think this is supported.

with ui.table(title='Foo', rows=rows, columns=columns) as table:
   with table.add_slot('body') as slot:
        with ui.tr():
            with ui.td(key='name'):
                ui.label(slot.props.row.name).classes('text-center')

[falkoschindler]

You can add an "enabled" field to the row data and use it in your slot template:

table = ui.table(
    columns=[
        {'name': 'name', 'label': 'Name', 'field': 'name'},
        {'name': 'age', 'label': 'Age', 'field': 'age'},
        {'name': 'buttons', 'label': '', 'field': 'buttons'},
    ],
    rows=[
        {'id': '0', 'name': 'Bob', 'age': 34, 'enabled': True},
        {'id': '1', 'name': 'Jill', 'age': 35, 'enabled': True},
    ],
)
table.add_slot(name='body-cell-buttons', template=r'''
    <q-td :props="props" colspan="100%">
        <q-btn icon="edit" flat dense :disable="!props.row.enabled" />
        <q-btn icon="people" flat dense :disable="!props.row.enabled" />
    </q-td>
''')

def enable(value: bool):
    for row in table.rows:
        row['enabled'] = value
    table.update()

ui.button('Disable', on_click=lambda: enable(False))
ui.button('Enable', on_click=lambda: enable(True))

[vahuynh12]

Thank you, this approach works for my needs!