DataFrame

Displays a Pandas dataframe in a table.

@solara.component
def DataFrame(
    df,
    items_per_page=20,
    column_actions: List[ColumnAction] = [],
    cell_actions: List[CellAction] = [],
    scrollable=False,
    on_column_header_hover: Optional[Callable[[Optional[str]], None]] = None,
    column_header_info: Optional[solara.Element] = None,
):

    ...

Pass in a dataframe as first argument, and optionally how many items per page to display.

import solara
import pandas as pd
import plotly

df = plotly.data.iris()

@solara.component
def Page():
    solara.DataFrame(df, items_per_page=5)

#	sepal_length	sepal_width	petal_length	petal_width	species	species_id
0	5.1	3.5	1.4	0.2	setosa	1
1	4.9	3.0	1.4	0.2	setosa	1
2	4.7	3.2	1.3	0.2	setosa	1
3	4.6	3.1	1.5	0.2	setosa	1
4	5.0	3.6	1.4	0.2	setosa	1

Live output

Custom column header info

Use the column_header_info argument to display a custom component on the column header when the user hover above it. In this case we display the value counts for the column.

import solara
import pandas as pd
import plotly

df = plotly.data.iris()

@solara.component
def Page():
    column_hover, set_column_hover = solara.use_state(None)

    with solara.Column(margin=4) as column_header_info:
        if column_hover:
            solara.Text("Value counts for " + column_hover)
            display(df[column_hover].value_counts())
        # if no column is hovered above, we provide an empty container
        # so we always see the triple dot icon on the column header

    solara.DataFrame(df, column_header_info=column_header_info, on_column_header_hover=set_column_hover)

#	sepal_length	sepal_width	petal_length	petal_width	species	species_id
0	5.1	3.5	1.4	0.2	setosa	1
1	4.9	3.0	1.4	0.2	setosa	1
2	4.7	3.2	1.3	0.2	setosa	1
3	4.6	3.1	1.5	0.2	setosa	1
4	5.0	3.6	1.4	0.2	setosa	1
5	5.4	3.9	1.7	0.4	setosa	1
6	4.6	3.4	1.4	0.3	setosa	1
7	5.0	3.4	1.5	0.2	setosa	1
8	4.4	2.9	1.4	0.2	setosa	1
9	4.9	3.1	1.5	0.1	setosa	1
10	5.4	3.7	1.5	0.2	setosa	1
11	4.8	3.4	1.6	0.2	setosa	1
12	4.8	3.0	1.4	0.1	setosa	1
13	4.3	3.0	1.1	0.1	setosa	1
14	5.8	4.0	1.2	0.2	setosa	1
15	5.7	4.4	1.5	0.4	setosa	1
16	5.4	3.9	1.3	0.4	setosa	1
17	5.1	3.5	1.4	0.3	setosa	1
18	5.7	3.8	1.7	0.3	setosa	1
19	5.1	3.8	1.5	0.3	setosa	1

Live output

Arguments

df - DataFrame - a Pandas dataframe.
items_per_page - int - number of items per page.
column_actions - Triggered via clicking on the triple dot icon on the headers (visible when hovering).
cell_actions - Triggered via clicking on the triple dot icon in the cell (visible when hovering).
on_column_header_hover - Optional callback when the user hovers over the triple dot icon on a header.
column_header_info - Element to display in the column menu popup (visible when hovering), provide an empty container element (like Column) to force showing the trigle dot icon (see example).

DataFrame

Custom column header info

Arguments

Example

Demo

Below we show display the titanic dataset, and demonstrate a user column and cell action. Try clicking on the triple icon when hovering above a column or cell. And see the following values changes:

Column action on: None
Cell action on: {}

#	sepal_length	sepal_width	petal_length	petal_width	species	species_id
0	5.1	3.5	1.4	0.2	setosa	1
1	4.9	3.0	1.4	0.2	setosa	1
2	4.7	3.2	1.3	0.2	setosa	1
3	4.6	3.1	1.5	0.2	setosa	1
4	5.0	3.6	1.4	0.2	setosa	1
5	5.4	3.9	1.7	0.4	setosa	1
6	4.6	3.4	1.4	0.3	setosa	1
7	5.0	3.4	1.5	0.2	setosa	1
8	4.4	2.9	1.4	0.2	setosa	1
9	4.9	3.1	1.5	0.1	setosa	1
10	5.4	3.7	1.5	0.2	setosa	1
11	4.8	3.4	1.6	0.2	setosa	1
12	4.8	3.0	1.4	0.1	setosa	1
13	4.3	3.0	1.1	0.1	setosa	1
14	5.8	4.0	1.2	0.2	setosa	1
15	5.7	4.4	1.5	0.4	setosa	1
16	5.4	3.9	1.3	0.4	setosa	1
17	5.1	3.5	1.4	0.3	setosa	1
18	5.7	3.8	1.7	0.3	setosa	1
19	5.1	3.8	1.5	0.3	setosa	1

View source