How to make editable tables in Taipy

Question

I want to display an editable table in an expandable in Taipy.

I tried the following code:

def get_table():
    dic = {"key": [1,2,3], "Value":[3,4,5]}
    return pd.DataFrame(dic)

table = get_table()
page_content = """
<|SHOW TABLE|expandable|
<|{table}|table|show_all|editable|>
|>

pages = {"Design": page_content}

gui = Gui(pages=pages)
gui.run()

I have two issues:

First the table is bigger than the expandable
The table is not editable

I cannot figure out how to solve these.Thank you for nay help.

For information I am using Python 3.10, Taipy 2.2.0, Chrome on windows 10.

Hey Bobby, Feel free to join our Discord Server https://discord.com/invite/SNNsCDj9? and connect with like-minded individuals and collaborate on your web application buildings :) — Rym Guerbi Michaut, Jul 17 '23 at 09:51

score 2 · Answer 1 · answered Apr 27 '23 at 19:37

2

To know how you want to edit your table, Taipy needs an on_edit function. I have provided one example below: it can be customized as you want.

def get_table():
    dic = {"key": [1,2,3], "Value":[3,4,5]}
    return pd.DataFrame(dic)

table = get_table()
page_content = """
<|SHOW TABLE|expandable|
<|{table}|table|show_all|on_edit=on_edit|width=100%|>
|>
"""

pages = {"Design": page_content}

def on_edit(state,var_name,action,payload):
    index = payload["index"]
    col = payload["col"]
    value = payload["value"]
    
    temp = state.data.copy()
    temp.loc[index, col] = value
    state.data = temp

gui = Gui(pages=pages)
gui.run()

The table width being too broad will be fixed in the next release. Adding width=100% solves it.

answered Apr 27 '23 at 19:37

Florian Jacta

1,143
1
2
5

Thank you Jacta, for your answer. I assume that : - state contains the state like any other callback - var_name contains the name of the variable attached to the table control - payload contains the whole table with the new values But I don't get what action contains here? So If I understand correctly, that means I need to implement the edition by my own, copying payload into state.var_name? – bobby Apr 28 '23 at 08:20
You can see what each parameter of the `on_edit` is on this page: https://docs.taipy.io/en/latest/manuals/gui/viselements/table/ – Florian Jacta Apr 28 '23 at 17:26

bobby · Answer 2 · 2023-04-28T09:53:59.857

1

Thank you Jacta for your answer. Following the code that worked for me. Since on_edit works for any change, Taipy can include it as a default edition method, so we don't need to rewrite it all the time.

def get_table():
dic = {"key": [1,2,3], "Value":[3,4,5]}
return pd.DataFrame(dic)

table = get_table()
page_content = """
<|SHOW TABLE|expandable|
<|{table}|table|show_all|on_edit=on_edit|width=100%|>
|>
"""

pages = {"Design": page_content}

def on_edit(state, var_name, action, payload):
    cp = getattr(state, var_name).copy()
    cp.loc[payload["index"], payload["col"]] = payload["value"]
    state.assign(var_name, cp)

gui = Gui(pages=pages)
gui.run()

edited Apr 28 '23 at 09:53

answered Apr 28 '23 at 09:44

bobby

71
4

This is a very good remark! There is in fact an issue on this improvement https://github.com/Avaiga/taipy-gui/issues/646. It is in fact hard to create a generic function that will satisfy everyone for every case in the `on_edit` function. It is heavily dependent on the object types the user is manipulating, but we are thinking about doing it – Florian Jacta Apr 28 '23 at 17:23

How to make editable tables in Taipy

2 Answers2