Live Streaming example

Lastly let's add in an API so we can live stream data into our datatable.

Here we use a Background Task to stream the data into the table without blocking UI interactivity. We call an advice API using httpx and then append that data to the self.table_data state var. We also create a button that allows us to start and pause the streaming of the data by changing the value of the boolean state var running using the event handler toggle_pause. If the running state var is set to True we stream the API data, when it is set to False we break out of the while loop and end the background event.

class DataTableLiveState(BaseState):
    "The app state."

    running: bool = False
    table_data: list[dict[str, Any]] = []
    rate: int = 0.4
    columns: list[dict[str, str]] = [
        {
            "title": "id", 
            "id": "v1", 
            "type": "int",
            "width": 100,
        },
        {
            "title": "advice", 
            "id": "v2", 
            "type": "str",
            "width": 750,
        },
    
    ]

    @rx.background
    async def live_stream(self):
        while True:
            await asyncio.sleep(1 / self.rate)
            if not self.running:
                break

            async with self:
                if len(self.table_data) > 50:
                    self.table_data.pop(0)

                res = httpx.get('https://api.adviceslip.com/advice')
                data = res.json()
                self.table_data.append({"v1": data["slip"]["id"], "v2": data["slip"]["advice"]})


    def toggle_pause(self):
        self.running = not self.running
        if self.running:
            return DataTableLiveState.live_stream

rx.vstack(
    rx.stack(
        rx.cond(
            ~DataTableLiveState.running,
            rx.button(
                "Start",
                on_click=DataTableLiveState.toggle_pause,
                color_scheme="green",
            ),
            rx.button(
                "Pause",
                on_click=DataTableLiveState.toggle_pause,
                color_scheme="red",
            ),
        ),
    ),
    rx.data_editor(
        columns=DataTableLiveState.columns,
        data=DataTableLiveState.table_data,
        draw_focus_ring=True,
        row_height=50,
        smooth_scroll_x=True,
        smooth_scroll_y=True,
        column_select="single",
        # style
        theme=darkTheme,
    ),
    overflow_x="auto",
    width="100%",
    height="30vh",
)