Why Solara.Dataframe cannot update new data input

[bobwatcherx]

why doesn't the solara dataframe want to be updated when I enter a new data input from the text input

import solara
import pandas as pd
import plotly

@solara.component
def Page():
    name = solara.reactive("tolol")
    list_excel = solara.reactive([])
    df_component = None  # Inisialisasi df_component di luar fungsi
    
    
    def add_notes():
        nonlocal df_component  # Menggunakan nonlocal untuk mengakses variabel di luar fungsi
        list_excel.value.append(
            {"name": name.value}
        )
        print(list_excel.value)

        list_excel_df = pd.DataFrame(list_excel.value)
        # Ubah list_excel.value menjadi DataFrame
        print(list_excel_df)
        if df_component:
            df_component.data = list_excel_df  # Update data di dalam komponen DataFrame
        else:
            df_component = solara.DataFrame(list_excel_df, items_per_page=5)

    with solara.Column(margin=10):
        solara.InputText("input new name",
                         value=name, continuous_update=True)
        solara.Button("add", on_click=add_notes,
                      icon_name="add")

        # Inisialisasi DataFrame kosong untuk tabel awal
        df_component = solara.DataFrame(pd.DataFrame(), items_per_page=5)  # Menggunakan DataFrame kosong sebagai data awal

[iisakkirotko]

Hi @bobwatcherx,

This has to do with the fact that list_excel, even though it's value changes in your code, doesn't actually trigger a re-render of the component when you append to it - you should set it using the set() method. For instance the following works

import solara
import pandas as pd

@solara.component
def Page():
    name = solara.use_reactive("tolol")
    list_excel = solara.use_reactive([])
    df_component = pd.DataFrame(list_excel.value)
    
    
    def add_notes():
        nonlocal df_component

        list_excel.set([*list_excel.value, {'name': name.value}])

        print(list_excel.value)

    with solara.Column(margin=10):
        solara.InputText("input new name",
                         value=name, continuous_update=True)
        solara.Button("add", on_click=add_notes,
                      icon_name="add")
        
        solara.DataFrame(df_component)

[bobwatcherx]

why i canot refresh table dataframe when update data

import pandas as pd
import reacton.ipyvuetify as rv
import solara

@solara.component
def Page():
    name = solara.use_reactive("")
    list_excel = solara.use_reactive([])  # Use solara.use_reactive for list_excel
    id_select = solara.use_reactive(0)
    
    edit_name, set_edit_name = solara.use_state("")  # Use solara.use_state for edit_name

    def add_notes():
        nonlocal list_excel
        list_excel.set([*list_excel.value, {'name': name.value}])

    def on_action_cell(column, row_index):
        print(column, row_index)
        print(list_excel.value)
        
        if 0 <= row_index < len(list_excel.value):
            id_select.set(row_index)
            selected_name = list_excel.value[row_index]['name']
            set_edit_name(selected_name)
        else:
            set_edit_name("")  # Handle the case when the row_index is out of bounds.

    cell_actions = [solara.CellAction(icon="mdi-white-balance-sunny", name="User cell action", on_click=on_action_cell)]

    def update_name():
        current_id = id_select.value  # Get the selected id
        print(current_id)
        if 0 <= current_id < len(list_excel.value):
            # Use solara.use_reactive() to update the edit_name value
            print(list_excel.value[current_id]['name'])
            list_excel.value[current_id]['name'] = edit_name  # Corrected to edit_name.value
            print("Dwqd", edit_name)
            
            # Recreate the DataFrame after updating list_excel
            global df_component
            df_component = pd.DataFrame(list_excel.value)

        print(list_excel.value)

    global df_component
    df_component = pd.DataFrame(list_excel.value)  # Initialize df_component

    with solara.Column(margin=10):
        solara.InputText("input new name", value=name, continuous_update=True)
        solara.Button("add", on_click=add_notes, icon_name="add", color="primary")
        solara.DataFrame(df_component, cell_actions=cell_actions)
        
        with solara.Row():
            solara.InputText("edit", value=edit_name,
                on_value=set_edit_name,
                continuous_update=True
                )
            solara.Markdown(f"**You entered**: {edit_name}")
            solara.Button("update", icon_name="create", color="error", on_click=update_name)

[bobwatcherx]

here code update why dataframe not updating . and i update text again not click update button . and table will update .

import pandas as pd
import reacton.ipyvuetify as rv
import solara

@solara.component
def Page():
    name = solara.use_reactive("")
    list_excel = solara.use_reactive([])  # Use solara.use_reactive for list_excel
    df_component = pd.DataFrame(list_excel.value)
    id_select = solara.use_reactive(0)
    
    # edit_name, set_edit_name = solara.use_state("")  # Use solara.use_reactive for edit_name
    edit_name = solara.use_reactive("")
    def add_notes():
        list_excel.set([*list_excel.value, {'name': name.value}])

    def on_action_cell(column, row_index):
        print(column, row_index)
        print(list_excel.value)
        
        if 0 <= row_index < len(list_excel.value):
            id_select.set(row_index)
            selected_name = list_excel.value[row_index]['name']
            # set_edit_name(selected_name)
            edit_name.value = selected_name
        else:
            # set_edit_name("")  # Handle the case when the row_index is out of bounds.
            edit_name.value = ""
    cell_actions = [solara.CellAction(icon="mdi-white-balance-sunny", name="User cell action", on_click=on_action_cell)]

    def update_name():
        current_id = id_select.value  # Get the selected id
        print(current_id)
        if 0 <= current_id < len(list_excel.value):
            # Use solara.use_reactive() to update the edit_name value
            print(list_excel.value[current_id]['name'])
            list_excel.value[current_id]['name'] = edit_name.value
            print("Dwqd", edit_name.value)

    # Callback to observe changes in list_excel and update df_component
    def update_df_component():
        nonlocal df_component
        df_component = pd.DataFrame(list_excel.value)

    solara.use_effect(update_df_component, [list_excel.value])  # Listen for changes in list_excel.value

    with solara.Column(margin=10):
        solara.InputText("input new name", value=name, continuous_update=True)
        solara.Button("add", on_click=add_notes, icon_name="add", color="primary")
        solara.DataFrame(df_component, cell_actions=cell_actions)
        
        with solara.Row():
            # solara.InputText("edit", value=edit_name,
            #     on_value=set_edit_name,
            #     continuous_update=True
            #     )
            solara.InputText("edit", 
                value=edit_name, continuous_update=True)

            solara.Markdown(f"**You entered**: {edit_name}")
            solara.Button("update", icon_name="create", color="error", on_click=update_name)