Skip to content

Data grids & charts

Goal

Opt in to AgGrid, Plotly, Altair, and Apache ECharts behind StreamTree elements so default installs stay light.

Install extras

pip install "streamtree[tables]"   # DataGrid + pandas + streamlit-aggrid
pip install "streamtree[charts]"   # Chart, AltairChart, EChartsChart + pins

See Dependency strategy for version policy.

Tables

DataGrid wraps streamlit-aggrid. Full demo:

"""``DataGrid`` demo (requires ``pip install \"streamtree[tables]\"``)."""

from __future__ import annotations

import pandas as pd

from streamtree import component, render
from streamtree.core.element import Element
from streamtree.elements import DataGrid, Page, Text, VStack


@component
def Demo() -> Element:
    df = pd.DataFrame({"name": ["Ada", "Grace"], "score": [99, 100]})
    return VStack(
        Text("Editable multi-select grid:"), DataGrid(df, editable=True, selection_mode="multiple")
    )


if __name__ == "__main__":
    render(Page(Demo()))

Selection callbacks after render: examples/datagrid_selection_demo.py (same page on Examples).

Charts

  • Chart — Plotly via st.plotly_chart
  • AltairChart — Altair via st.altair_chart
  • EChartsChart — streamlit-echarts

Demos: chart_demo.py, altair_chart_demo.py, echarts_demo.py.

Recipe: URL filter + grid

Pair Routing & URLs with sync_query_value so the grid’s query or sort state survives reruns and sharing URLs. See Performance for large-table guidance.

See also