Datatable is not updating after editing (using a RxList)

[till-fechteler]

Hi,

I'm currently stuck with the following problem. I have a Flet DataTable that can be edited line by line. Unfortunately, pressing Save in the edit dialogue does not result in the desired update to the table, even though the change is realized in the RxList data structure and the callback method for updating the table (currently implemented as complete rebuild) is executed. Do you have any idea what is going wrong? Or do you have any tips on how to implement this more cleverly?

I have attached the sources. The following requirements are needed to run the code:

Flet: 0.28.3
FletX: 0.1.4b230
PaginatedDataTable: source attached

Your help is appreciated.

Many thanks in advance

main.py

customers.py

paginated_dt.py

[Wgoeh]

Thanks for pointing that out.
Lemme check the code.

[Einswilli]

Hi @till-fechteler,
After reviewing your code, I noticed that you're using RxList to notify your UI. This approach only triggers updates when the list itself changes, such as when items are added or removed. However, modifications made within individual Customer objects will not notify the UI. To solve this, you should use Reactive[Customer] which allows you to listen for changes inside each Customer object and automatically notify listeners.

You can create a reactive component by inheriting from ft.DataRow that updates itself whenever the Reactive[Customer] model changes, using the @obx decorator.

Additionally, it would be more efficient to manage pagination directly in your controller. This improves data persistence and prevents the need to reload data every time you navigate to the page.

For a better project structure, we recommend creating a FletX project. You can refer to this example for guidance: https://github.com/AllDotPy/fake-shop/

[till-fechteler]

Hi @Einswilli,

thank you very much for reviewing my code and for your tips. I will definitely try them out and see if I can solve the problem that way. I actually used the Fake Shop project as a template because I am working on a more complex application. I created the source files only for testing purposes. Nevertheless, thank you for the tip.

[Einswilli]

Great @till-fechteler .
Don't hesitate to take a look at the documentation or ask for any questions , we are here to help.

[till-fechteler]

Hi @Einswilli,

I tried to implement as you suggested but got the following error:

Traceback (most recent call last):
  File "C:\Projekte\Andere\simscm\simscm-flet\.venv\Lib\site-packages\fletx\core\routing\router.py", line 232, in navigate
    await self._apply_transition_and_update(
  File "C:\Projekte\Andere\simscm\simscm-flet\.venv\Lib\site-packages\fletx\core\routing\router.py", line 535, in _apply_transition_and_update
    self.page.update()
  File "C:\Projekte\Andere\simscm\simscm-flet\.venv\Lib\site-packages\flet\core\page.py", line 735, in update
    r = self.__update(self)
        ^^^^^^^^^^^^^^^^^^^
  File "C:\Projekte\Andere\simscm\simscm-flet\.venv\Lib\site-packages\flet\core\page.py", line 801, in __update
    commands, added_controls, removed_controls = self.__prepare_update(*controls)
                                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Projekte\Andere\simscm\simscm-flet\.venv\Lib\site-packages\flet\core\page.py", line 817, in __prepare_update
    control.build_update_commands(
  File "C:\Projekte\Andere\simscm\simscm-flet\.venv\Lib\site-packages\flet\core\control.py", line 490, in build_update_commands
    innerCmds = ctrl._build_add_commands(
                ^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Projekte\Andere\simscm\simscm-flet\.venv\Lib\site-packages\flet\core\control.py", line 545, in _build_add_commands
    childCmd = control._build_add_commands(
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Projekte\Andere\simscm\simscm-flet\.venv\Lib\site-packages\flet\core\control.py", line 526, in _build_add_commands
    self.build()
  File "C:\Projekte\Andere\simscm\simscm-flet\src\reactivity.py", line 62, in build
    controls=[self.build_datatable(), ft.Button("Change User", on_click=self.change_user)]  # type: ignore
              ^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Projekte\Andere\simscm\simscm-flet\src\reactivity.py", line 72, in build_datatable
    return ft.DataTable(
           ^^^^^^^^^^^^^
  File "C:\Projekte\Andere\simscm\simscm-flet\.venv\Lib\site-packages\flet\core\datatable.py", line 431, in __init__
    self.rows = rows
    ^^^^^^^^^
  File "C:\Projekte\Andere\simscm\simscm-flet\.venv\Lib\site-packages\flet\core\datatable.py", line 517, in rows
    assert all(
AssertionError: rows must contain only DataRow instances

The datatable complains that the rows array must only contain DataRow objects. Here is the code:

from fletx.core import Reactive, FletXPage
from fletx.decorators import obx
from fletx.app import FletXApp
from fletx.navigation import router_config
import flet as ft
import dataclasses
from typing import TypeVar, Generic


# Custom reactive object
@dataclasses.dataclass
class User:
    name: str
    age: int = 30


# rx_user = Reactive(User("Henri"))
# rx_user.listen(
#     lambda: print(f"User changed: {rx_user.value.name}, {rx_user.value.age}")
#     # lambda e: print(f"User changed: {e}")  # type: ignore
# )
# rx_user.value = User("Sarah", 25)  # Triggers listener
# rx_user.value.age = 26  # Does NOT trigger listener

rx_user = Reactive(User("Luc"))
rx_user.listen(lambda u: print(f"User changed to: {u.value.name}"))  # type: ignore
rx_user.value = User("Sarah")  # Prints: User changed to: Sarah

T = TypeVar("T")


class ReactiveDataRow:
    def __init__(self, dataObj: Reactive[T]):
        self.dataObj: Reactive[T] = dataObj
        self._cells = self.build_cells()  # type: ignore
        self._row = self.build_row()  # type: ignore

    def build_cells(self):
        cells = [
            ft.DataCell(
                content=ft.Text(value=str(getattr(self.dataObj.value, field.name)))
            )
            for field in dataclasses.fields(self.dataObj.value)
        ]
        return cells

    @obx
    def build_row(self):
        self.dataObj.value  # to register dependency
        return ft.DataRow(cells=self._cells)

    @property
    def row(self):
        return self._row


class TestPage(FletXPage):
    user1 = Reactive(User("Henri"))  # type: ignore

    def build(self):
        col = ft.Column(
            controls=[self.build_datatable(), ft.Button("Change User", on_click=self.change_user)]  # type: ignore
        )  # type: ignore
        return col  # type: ignore

    def change_user(self, e):
        self.user1.value = User("Sarah", 25)  # type: ignore

    # @obx
    def build_datatable(self):  # type: ignore
        print(f"build_datatable called: {self.user1.value}")  # type: ignore
        return ft.DataTable(
            columns=[
                ft.DataColumn(label=ft.Text(field.name))  # type: ignore
                for field in dataclasses.fields(self.user1.value)  # type: ignore
            ],
            rows=[self.build_datarow(self.user1)],  # type: ignore
        )

    def build_datarow(self, item: Reactive[T]):  # type: ignore
        print(f"build_datarow called: {item.value}")  # type: ignore
        return ReactiveDataRow(item).row  # type: ignore


def main():

    # Defining route
    router_config.add_route(path="/", component=TestPage)
    app = (
        FletXApp(title="My Counter", initial_route="/", debug=True)
        .with_window_size(400, 600)
        .with_theme(ft.Theme(color_scheme_seed=ft.Colors.BLUE))
    )

    # Run sync
    app.run()


if __name__ == "__main__":
    main()

By the way, if I comment the builder function in the datarow object and uncomment the builder function build_datatable everything is working.

Your help is appreciated.

Many thanks

[Einswilli]

Hi @till-fechteler , thanks for your patience.
Can you provide a preview please??