Dynamic table creation - how to place button at end?

[BlankAdventure]

Question

I've written some code that generates a kind of editable table. In this case, each new row consists of 3 knob elements. Adjusting any one of them calls efilter, which returns a nested list of all their values.

from nicegui import ui, ElementFilter

def efilter():
    table = []
    row = []
    for ii, e in enumerate(ElementFilter(marker='panel')):
        row.append(e.value)
        if (ii+1) % 3 == 0:
            table.append(row.copy())
            row = []
    print(table)


def add_row(col):
    with col:
        with ui.row() as r:
            ui.knob(0.3, show_value=True).mark('panel').on('update:model-value', lambda: efilter(),throttle=0.3,leading_events=False)
            ui.knob(0.3, show_value=True).mark('panel').on('update:model-value', lambda: efilter(),throttle=0.3,leading_events=False)
            ui.knob(0.3, show_value=True).mark('panel').on('update:model-value', lambda: efilter(),throttle=0.3,leading_events=False)
            ui.button(icon='delete', on_click = lambda: col.remove(r)).props('round dense')

with ui.row(): #column headers
    ui.label('Col-1')
    ui.label('Col-2')
    ui.label('Col-3')
with ui.column() as c:    
    ui.button('Add', on_click=lambda : add_row(c) )   
    
ui.run()

This all works fine. My actual issue is I can't seem to figure out how to keep the column headers at the top, and the Add button at the bottom. See image:

I want the Add button located at the end/bottom of the rows. It's probably something simple but I can't seem to figure it out.

[falkoschindler]

Hi @BlankAdventure,

By placing the target container above the Add button the new rows will appear there too:

with ui.row():  # column headers
    ui.label('Col-1')
    ui.label('Col-2')
    ui.label('Col-3')
c = ui.column()
ui.button('Add', on_click=lambda: add_row(c))

[BlankAdventure]

Ah, that makes perfect sense, thanks.