How I can add additional column (with button) in ui.table (qtable) for existing table

[bobanovo]

Hello,
I need help :-).
How I can add additional column in ui.table (qtable) for existing table.
My idea is, have a table with data with last column with button or clickable cell - as edit/open-view/etc.
I tried a lot of attempts :-), ui.table doesn't support html in row data. Therefore I think, that it could be possible to do through add_slot.
Idea is iterate existing table rows row by row, and for each row add slot or column and slot, with button and specific callback to manage behavior of click.
But, I don!t any idea how to do it, examples with add_slot which I found was too principle, and I am not able to use for this purpose...

thanks a lot, for any idea :-) and help.
br Radek

[dclause]

hi !

It is tricky to do with Quasar table already, so using it with niceGUI is even more! You can see an example at:
https://github.com/zauberzeug/nicegui/blob/main/examples/table_and_slots/main.py

Regarding your particular need, What you need is called "body slot' in Quasar element :
https://quasar.dev/vue-components/table#body-slots

Here is a minimal example :

with ui.table(columns=[
    {'name': 'name', 'label': 'Name', 'field': 'name', 'sortable': True, 'align': 'left'},
    {'name': 'age', 'label': 'Age', 'field': 'age', 'sortable': True, 'align': 'left'},
    {'name': 'actions', 'label': 'Actions', 'field': 'actions', 'align': 'left'},
], rows=[
    {'id': 1, 'name': 'Damien', 'age': 18, 'actions': ['edit', 'delete']},
    {'id': 2, 'name': 'Janine', 'age': 19, 'actions': ['edit']},
    {'id': 3, 'name': 'John', 'age': 20, 'actions': ['edit', 'delete']},
]) as table:
    table.add_slot('body', """
        <q-tr :props="props">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
                <q-btn v-if="col.name === 'actions'" v-for="action in col.value" : key="action"
                    round dense flat :icon="action" class="mr-2"
                    :href="'user/' + props.row.id + '/' + action"
                 />
                <span v-else>{{ col.value }}</span>
            </q-td>
        </q-tr>
    """)

You can also add a fully new column that is not passed to ui.table() by overriding both the body and the header slots:
https://quasar.dev/vue-components/table#header-slots

[bobanovo]

awesome - thanks a lot, I'll try it...
I was able to do with ag-grid through event cellClicked similarly, but here is different usage/design...
thanks again...

[bobwatcherx]

How to run function when button edit click in q-btn

from nicegui import ui

def showmoney():
    print("tololl 123")
    
with ui.table(columns=[
    {'name': 'name', 'label': 'Name', 'field': 'name', 'sortable': True, 'align': 'left'},
    {'name': 'age', 'label': 'Age', 'field': 'age', 'sortable': True, 'align': 'left'},
    {'name': 'actions', 'label': 'Actions', 'field': 'actions', 'align': 'left'},
], rows=[
    {'id': 1, 'name': 'Damien', 'age': 18, 'actions': ['edit', 'delete']},
    {'id': 2, 'name': 'Janine', 'age': 19, 'actions': ['edit']},
    {'id': 3, 'name': 'John', 'age': 20, 'actions': ['edit', 'delete']},
]) as table:
    table.add_slot('body', """
        <q-tr :props="props">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
                <q-btn v-if="col.name === 'actions'" v-for="action in col.value" : key="action"
                    round dense flat :icon="action" class="mr-2"
                   @click=showmoney
                 />
                <span v-else>{{ col.value }}</span>
            </q-td>
        </q-tr>
    """)
ui.run()

[falkoschindler]

@bobwatcherx You can emit and handle custom events like this:

def handle_action(msg) -> None:
    print(msg, flush=True)

with ui.table(columns=[
    {'name': 'name', 'label': 'Name', 'field': 'name', 'sortable': True, 'align': 'left'},
    {'name': 'age', 'label': 'Age', 'field': 'age', 'sortable': True, 'align': 'left'},
    {'name': 'actions', 'label': 'Actions', 'field': 'actions', 'align': 'left'},
], rows=[
    {'id': 1, 'name': 'Damien', 'age': 18, 'actions': ['edit', 'delete']},
    {'id': 2, 'name': 'Janine', 'age': 19, 'actions': ['edit']},
    {'id': 3, 'name': 'John', 'age': 20, 'actions': ['edit', 'delete']},
]) as table:
    table.add_slot('body', """
        <q-tr :props="props">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
                <q-btn v-if="col.name === 'actions'" v-for="action in col.value" :key="action"
                    round dense flat :icon="action" class="mr-2"
                   @click="$parent.$emit('action', action)"
                 />
                <span v-else>{{ col.value }}</span>
            </q-td>
        </q-tr>
    """)
    table.on('action', handle_action)