Table toggle editable

[figoyouwei]

Still this page https://github.com/figoyouwei/taipy_success/blob/main/apps/yfin/pages/yfin.py

I want to realize toggle the editable between True and False, somehow not working.

[FlorianJacta]

First, use Taipy 4.0.0.dev0. So, the latest version.

You have created a toggle and bound a variable to it.

tgb.toggle(value="{table_mode}")

Binding a variable means interacting with the visual element, which will change the variable value. And changing the variable value will change your visual element.

When you put an on_change on the toggle, you say that when I change the variable of my toggle, I want to call this function, and in this function, you reassign the variable that was already changed.

Let's say table_mode=True at the beginning.

You change the visual element: table_mode=True -> table_mode=False

This also calls the on_change: table_mode=False-> table_mode=True

So, if you are using Taipy 4.0.0.dev0 and don't call the on_change (tgb.toggle(value="{table_mode}")), everything should work!

[FlorianJacta]

For 3.1:

"""
@author: Youwei Zheng
@target: yfinance table page
@update: 2024.08.26
"""

from datetime import datetime

from taipy.gui import notify
import taipy.gui.builder as tgb
import pandas as pd

from tools import download_yfin, process_yfin

# ------------------------------
# on_init
# ------------------------------

current_date = datetime.now().strftime("%Y-%m-%d")
args_in = (
    "^SPX",
    "1d",
    "2024-08-01",
    current_date,
)
df = download_yfin(args_in)
data_table = process_yfin(df)

# data_df is used for your table; this is your bound variable
# it is defined in the main.py so this variable is a global variable
# you could or should define it in yfin.py

# ------------------------------
# on_add
# ------------------------------

def on_add(state):
    empty_row = pd.DataFrame(
        [[None for _ in state.data_table.columns]], columns=state.data_table.columns
    )
    state.data_table = pd.concat([empty_row, state.data_table], axis=0, ignore_index=True)

    notify(state, "S", f"Added one row")

def on_edit(state, var_name, payload):
    index = payload["index"]  # row index
    col = payload["col"]  # column name
    value = payload["value"]  # new value cast to the column type
    user_value = payload["user_value"]  # new value as entered by the user

    old_value = state.data_table.loc[index, col]
    data_table = state.data_table.copy()
    data_table.loc[index, col] = value
    state.data_table = data_table
    notify(
        state=state,
        notification_type="I",
        message=f"Edited value from '{old_value}' to '{value}'. (index '{index}', column '{col}')",
    )

def on_delete(state, var_name, payload):
    index = payload["index"]  # row index

    state.data_table = state.data_table.drop(index=index)
    notify(state, "E", f"Deleted row at index '{index}'")

# ------------------------------
# Create page
# ------------------------------

table_mode = True

with tgb.Page() as page_yfin:
    # Create title
    tgb.toggle(theme=True)
    tgb.text("# Table Data from yfinance ", mode="md", class_name="text-center pb1")

    with tgb.layout("1", class_name="pb1 text-center"):
        tgb.toggle(
            value="{table_mode}"
            )
    with tgb.part(render="{table_mode == False}"):
        # Create table
        tgb.table(
            "{data_table}",
            editable=False,
            on_add=on_add,
            on_edit=on_edit,
            on_delete=on_delete
        )

    with tgb.part(render="{table_mode}"):
        # Create table
        tgb.table(
            "{data_table}",
            editable=True,
            on_add=on_add,
            on_edit=on_edit,
            on_delete=on_delete
        )

For 4.0:

"""
@author: Youwei Zheng
@target: yfinance table page
@update: 2024.08.26
"""

from datetime import datetime

from taipy.gui import notify
import taipy.gui.builder as tgb
import pandas as pd

from tools import download_yfin, process_yfin

# ------------------------------
# on_init
# ------------------------------

current_date = datetime.now().strftime("%Y-%m-%d")
args_in = (
    "^SPX",
    "1d",
    "2024-08-01",
    current_date,
)
df = download_yfin(args_in)
data_table = process_yfin(df)

# data_df is used for your table; this is your bound variable
# it is defined in the main.py so this variable is a global variable
# you could or should define it in yfin.py

# ------------------------------
# on_add
# ------------------------------

def on_add(state):
    empty_row = pd.DataFrame(
        [[None for _ in state.data_table.columns]], columns=state.data_table.columns
    )
    state.data_table = pd.concat([empty_row, state.data_table], axis=0, ignore_index=True)

    notify(state, "S", f"Added one row")

def on_edit(state, var_name, payload):
    index = payload["index"]  # row index
    col = payload["col"]  # column name
    value = payload["value"]  # new value cast to the column type
    user_value = payload["user_value"]  # new value as entered by the user

    old_value = state.data_table.loc[index, col]
    data_table = state.data_table.copy()
    data_table.loc[index, col] = value
    state.data_table = data_table
    notify(
        state=state,
        notification_type="I",
        message=f"Edited value from '{old_value}' to '{value}'. (index '{index}', column '{col}')",
    )

def on_delete(state, var_name, payload):
    index = payload["index"]  # row index

    state.data_table = state.data_table.drop(index=index)
    notify(state, "E", f"Deleted row at index '{index}'")

# ------------------------------
# Create page
# ------------------------------

table_mode = True

with tgb.Page() as page_yfin:
    # Create title
    tgb.toggle(theme=True)
    tgb.text("# Table Data from yfinance ", mode="md", class_name="text-center pb1")

    with tgb.layout("1", class_name="pb1 text-center"):
        tgb.toggle(
            value="{table_mode}"
            )

    # Create table
    tgb.table(
        "{data_table}",
        editable="{table_mode}",
        on_add=on_add,
        on_edit=on_edit,
        on_delete=on_delete
    )

[figoyouwei]

yes, the double toggle table works with double rendering. Now it is minor layout problem. How to align this a text and the toggle in the same line?

[FlorianJacta]

tgb.toggle(value="{table_mode}", label="Editing mode")