What is the correct way to load a dataframe in datatable?

[rohitsathish]

I'm still experiencing the issue outlined in #279, so I'm unable to setup a dataframe with rx.State like df: pd.DataFrame. Would state even be the right place to keep a dataframe that needs to be loaded in the frontend?

I would like to know the right approach if I have a structure like the one shown below.

Also some other allied questions:

1. How does one use asyncio.run with reflex? I always seem to get errors regarding the event loop.
2. Is there a way to show dicts, lists and other python natives in the frontend directly? I'm okay with strings and ints but seem to have trouble showing the others.

data.py (sync with state)

import asyncio
import pandas as pd

async def long_running_task(state):
    for i in range(5):
        await asyncio.sleep(1)
        if i == 2 or i == 4:
            async with state: 
                state.progress = i
                yield 
    async with state:
        state.df = pd.DataFrame({"col1": [1, 2], "col2": [3, 4]})

data.py (just return df)

import asyncio
import pandas as pd

async def long_running_task():
    return pd.DataFrame({"col1": [1, 2], "col2": [3, 4]})

state.py

import data

class State(rx.State):
    progress: int = 0
    #df: ???

    @rx.background
    async def run_long_task(self):
        async with self: 
            async for _ in data.long_running_task(self):
                pass

ui.py

import pandas as pd
import asyncio

from data import long_running_task
from state import State

@rx.page("/")
def index():
    return rx.vstack(
        # rx.button(
        #     "Start Long Task",
        #     on_click=State.run_long_task,
        # ),
        rx.data_table(
            data=asyncio.run(long_running_task()),
            # data = State.df
        ),
    )

app = rx.App()
app.compile()

[picklelo]

@rohitsathish Thanks so much for bringing this up - a recent release may have introduced a bug that we are not registering the Pandas data frame serializer.

Try this code for now:

import reflex as rx
a = rx.data_table

import asyncio
import pandas as pd


i = 0


async def long_running_task():
    global i
    i += 1
    return pd.DataFrame({"col1": [i, 2], "col2": [3, 4]})


class State(rx.State):
    progress: int = 0
    df: pd.DataFrame = pd.DataFrame({"col1": [i, 2], "col2": [3, 4]})

    @rx.background
    async def run_long_task(self):
        async with self:
            self.df = await long_running_task()


@rx.page("/")
def index():
    return rx.vstack(
        rx.button(
            "Start Long Task",
            on_click=State.run_long_task,
        ),
        rx.data_table(data=State.df),
    )


app = rx.App()
app.compile()

Your approach of setting the data frame as a state var is correct, but in a recent PR we made the component loading lazy. So that doing import reflex as rx didn't import the datatable component automatically. This is where we tell reflex how to serialize data frames. For now as a hack I've added the line a = rx.data_table at the top just to force it to import that file.

I'll file an issue for this and make sure this is fixed in an upcoming release. #2277