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.

Asked By: mtjiran

||

Source

Answer 1

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()

Answered By: quamrana

Flet page.update() does not update my table

Question:

Answers: