Access to changed rows in ui.table for save method

[bobanovo]

Question

Hi, I have ui.table definition with in-line editing possiblity.
But, I am not able to right solve "save function", as when I call SAVE, all rows in ui.table with changed rows/data also, save to somewhere (or send to some api...). Still I read origin rows data of the table, not changed...

with ui.table(title='Metadata', columns=columns, rows=rows).classes('w-96').props('hide-header') as table:

    def deleteRec(row):
        print(row['args'])
        table.remove_rows(row['args'])
        table.update()

    def save(rows):
        print(rows)
        print(table.rows)
        

    with table.add_slot('top-right'):
        ui.button('New',on_click=lambda: (
            table.add_rows({'id': time.time(), 'name': '...', 'age': '...'}),
            )).props('flat fab-mini icon=add')
        ui.button('Save',on_click=lambda: (save(table.rows))).props('flat fab-mini icon=save')
        
    table.add_slot('body', """
        <q-tr :props="props" auto-width>
        <q-td key="name" :props="props" class="text-blue">
            {{ props.row.name }}
            <q-popup-edit v-model="props.row.name" v-slot="scope" @save="$parent.$emit('save', {name: props.row.name, new_name: v})">
                <q-input v-model="scope.value" dense autofocus @keyup.enter="scope.set" />
        </q-popup-edit>

        </q-td>
        <q-td key="age" :props="props">
            <q-popup-edit v-model="props.row.age" v-slot="scope">
               <q-input v-model="scope.value" dense autofocus @keyup.enter="scope.set" />
            </q-popup-edit>
            {{ props.row.age}}
            
        </q-td>
        <q-td auto-width>
            <q-btn icon="delete" flat fab-mini color="primary" @click="$parent.$emit('delete', props.row)">
        </q-td>
        </q-tr>
    """)
    
    table.on('delete',deleteRec)

I try to find any example, but everywhere is with add, delete, but not also with save... and my solution also for save doesn't work...
thanks a lot,
Radek

[falkoschindler]

The delete button emits a "delete" event, which is subscribed to with table.on('delete',deleteRec) and handled in the deleteRec function.
Now you need to emit something like update events, subscribe to them and use the event handler to update the table rows.
The name column already emits a "save" event. But it isn't listened to. I would use the event name "update" instead to avoid confusion with the save function. The age column is missing such an event.

But sure, a CRUD example with ui.table would be helpful.

[Monkee1337]

As I understand it I had a similar problem. This was my approach. Noticeably I used table.update() before printing it out.

with ui.column().classes("w-full justify bg-cyan-200"):
    current_table_content = []
    with ui.card():
            ui.button('Save', on_click=lambda: (
                table.update(),
                write_to_file(json.dumps(table.rows, indent=4)),
                current_table_content.clear(), 
                current_table_content.append(table.rows), 
                print(current_table_content))