ui.table export data

[bderkk]

Hi! I've been trying some ways to export all data from a ui.table, but I couldn't... finally I use table.on() to call a function everytime a cell changes. But I still want to know if it is possible to save all data for exemple pressing a button and save data to a variable, but always with all that I have tried the code returns None...

Thank you very much!

[falkoschindler]

I'm not sure what exactly you're trying to do. Is the data manipulated on the client? What returns None? Can you show what you've got so far?

[Diegiwg]

Well, I don't know if that's what you wanted, but I managed to extract the information, such as a list of data present in the table.

Below is an example code, and output value when ordering to extract the information.

from nicegui import ui

table = ui.table


async def export_data():
    js = f"""
    const table = getElement({table.id});
    const raw = table.gridOptions.api.getDataAsCsv();
    const data = [];
    raw.split('\\r\\n').forEach(el => data.push(el.replaceAll('"',"").split(',')))
    return data;
    """

    data: list[str] = await ui.run_javascript(js)

    print(data)
    for el in data:
        print(f"{el[0]} | {el[1]}")


@ui.page("/")
async def page():
    global table
    ui.label("Table Extract Info")

    table = ui.table(
        {
            "columnDefs": [
                {"headerName": "Name", "field": "name"},
                {"headerName": "Age", "field": "age"},
            ],
            "rowData": [
                {"name": "John", "age": 30},
                {"name": "Jane", "age": 25},
                {"name": "Mary", "age": 20},
                {"name": "João", "age": 30},
                {"name": "Anas", "age": 25},
                {"name": "Russ", "age": 20},
            ],
            "editType": "fullRow",
            "singleClickEdit": "true",
        }
    )

    ui.button(text="Export", on_click=export_data)


ui.run()

As output from the function, you receive a list of strings, rs.

Example when run on the previous table:

# Output from export_data
# [['Name', 'Age'], ['John', '30'], ['Jane', '25'], ['Mary', '20'], ['João', '30'], ['Anas', '25'], ['Russ', '20']]

# Output when given Print on each list item
# Name | Age
# John | 30
# Jane | 25
# Mary | 20
# João | 30
# Anas | 25
# Russ | 20

I don't know if this is what you wanted, but here it is.

[bderkk]

Hi! yes that works! Actually I was trying something similar but with bad results... I still confused how to use ag grid commands, but that works perfectly.

Thank you very much!