Flet page.update() does not update my table

Question

In my code I am trying to update a table which is called bag_table (in the row of the container of the right column). And when running my code it does show the table initially, but when I hit the submit button the backed is working. It is actually updating the bag_table variable, but it does not update in the gui itself.

Below is my full code.

pd.options.display.max_columns = 100
from services.bag import PCHN
from utils.convertors import dataframe_to_datatable
import flet as ft

def main(page: ft.page):
    
    def bag_service(e):
        pc = '9722LA' if postal_code_field.value == '' else postal_code_field.value
        hn = '29' if house_number_field.value == '' else house_number_field.value
        address = PCHN(pc, 
                       hn).result
        bag_table = dataframe_to_datatable(address)
        page.add(bag_table) # I added this for debugging, it is actually adding the table at the bottom of my page, so it is updating the actual bag_table
        page.update() # This is not updating my bag_table in place though. It stays static as it is.

    # define form fields
    postal_code_field = ft.TextField(label='Postal code')
    house_number_field = ft.TextField(label='House number')
    submit_button = ft.ElevatedButton(text='Submit', on_click=bag_service)

    # fields for the right column
    address = PCHN('9722GN', '5').result
    bag_table = dataframe_to_datatable(address)
    
    # design layout
    # 1 column to the left as a frame and one to the right with two rows
    horizontal_divider = ft.Row
    left_column = ft.Column
    right_column = ft.Column
    
    # fill the design
    page.add(
        horizontal_divider(
        [left_column(
            [postal_code_field,
                 house_number_field,
                 submit_button
                 ]
            ),
         right_column(
             [
                 ft.Container(
                     ft.Row([bag_table], 
                        scroll='always'),
                     bgcolor=ft.colors.BLACK,
                     width=800
                              )
                 ]
             )
        ]
        )
    )
    
    

if __name__ == '__main__':
    ft.app(target=main,
           view=ft.WEB_BROWSER,
           port=666
           )

I have been trouble shooting this like craze (hence all the print statements), but it's a classical thing of looking at a thing for hours, and it's probably a stupid mistake. Any help would be much appreciated.

score 1 · Accepted Answer · answered Jan 12 '23 at 20:57

This is a classic "python variables are just references, not values" problem.

You need something that references the table, but isn't the table itself.

Fortunately you already use a container here:

ft.Row([bag_table],

So we can take advantage of that.

In your setup where you create the original table you also need a container:

bag_table = dataframe_to_datatable(address)
bag_container = [bag_table]

and

...
               ft.Container(
                     ft.Row(bag_container, 
                        scroll='always'),
                     bgcolor=ft.colors.BLACK,
                     width=800
                              )
...

Now you can change what bag_container contains:

    def bag_service(e):
        pc = '9722LA' if postal_code_field.value == '' else postal_code_field.value
        hn = '29' if house_number_field.value == '' else house_number_field.value
        address = PCHN(pc, 
                       hn).result
        bag_container[0] = dataframe_to_datatable(address)
        page.update()

Dude, I would never have found out. Would you be kind enough to explain why this works? Why is the function updating the reference working, but updating the actual value is not working? I kind of get it, but not fully. — mtjiran, Jan 12 '23 at 21:13
Its encapsulated in this [article](https://nedbatchelder.com/text/names.html) about how python variables work. — quamrana, Jan 12 '23 at 21:14

Flet page.update() does not update my table

1 Answers1