render.DataGrid

render.DataGrid(self, data, *, width='fit-content', height=None, summary=True, filters=False, editable=False, selection_mode='none', row_selection_mode='deprecated')

Holds the data and options for a data_frame output, for a spreadsheet-like view.

Parameters

data: pd.DataFrame | PandasCompatible

A pandas DataFrame object, or any object that has a .to_pandas() method (e.g., a Polars data frame or Arrow table).

width: str | float | None = ‘fit-content’

A maximum amount of horizontal space for the data grid to occupy, in CSS units (e.g. "400px") or as a number, which will be interpreted as pixels. The default is fit-content, which sets the grid’s width according to its contents. Set this to 100% to use the maximum available horizontal space.

height: str | float | None = None

A maximum amount of vertical space for the data grid to occupy, in CSS units (e.g. "400px") or as a number, which will be interpreted as pixels. If there are more rows than can fit in this space, the grid will scroll. Set the height to "auto" to allow the grid to grow to fit all of the rows (this is not recommended for large data sets, as it may crash the browser).

summary: bool | str = True

If True (the default), shows a message like “Viewing rows 1 through 10 of 20” below the grid when not all of the rows are being shown. If False, the message is not displayed. You can also specify a string template to customize the message, containing {start}, {end}, and {total} tokens. For example: "Viendo filas {start} a {end} de {total}".

filters: bool = False

If True, shows a row of filter inputs below the headers, one for each column.

editable: bool = False

If True, allows the user to edit the cells in the grid. When a cell is edited, the new value is sent to the server for processing. The server can then return a new value for the cell, which will be displayed in the grid.

selection_mode: SelectionModeInput = ‘none’

Single string or a set/list/tuple of string values to define possible ways to select data within the data frame.

Supported values: * Use "none" to disable any cell selections or editing. * Use "row" to allow a single row to be selected at a time. * Use "rows" to allow multiple rows to be selected by clicking on them individually.

Resolution rules: * If "none" is supplied, all other values will be ignored. * If both "row" and "rows" are supplied, "row" will be dropped (supporting "rows").

row_selection_mode: RowSelectionModeDeprecated = ‘deprecated’

Deprecated. Please use selection_mode= instead.

Returns

Type Description
An object suitable for being returned from a @render.data_frame-decorated output function.

See Also

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
import pandas  # noqa: F401 (this line needed for Shinylive to load plotly.express)
import plotly.express as px
from shinywidgets import output_widget, render_widget

from shiny import App, reactive, render, req, ui

# Load the Gapminder dataset
df = px.data.gapminder()

# Prepare a summary DataFrame
summary_df = (
    df.groupby("country")
    .agg(
        {
            "pop": ["min", "max", "mean"],
            "lifeExp": ["min", "max", "mean"],
            "gdpPercap": ["min", "max", "mean"],
        }
    )
    .reset_index()
)

summary_df.columns = ["_".join(col).strip() for col in summary_df.columns.values]
summary_df.rename(columns={"country_": "country"}, inplace=True)

app_ui = ui.page_fillable(
    {"class": "p-3"},
    ui.markdown(
        "**Instructions**: Select one or more countries in the table below to see more information."
    ),
    ui.layout_columns(
        ui.card(ui.output_data_frame("summary_data"), height="400px"),
        ui.card(output_widget("country_detail_pop"), height="400px"),
        ui.card(output_widget("country_detail_percap"), height="400px"),
        col_widths=[12, 6, 6],
    ),
)


def server(input, output, session):
    @render.data_frame
    def summary_data():
        return render.DataGrid(summary_df.round(2), selection_mode="rows")

    @reactive.calc
    def filtered_df():
        data_selected = summary_data.data_view(selected=True)
        req(not data_selected.empty)
        countries = data_selected["country"]
        # Filter data for selected countries
        return df[df["country"].isin(countries)]

    @render_widget
    def country_detail_pop():
        return px.line(
            filtered_df(),
            x="year",
            y="pop",
            color="country",
            title="Population Over Time",
        )

    @render_widget
    def country_detail_percap():
        return px.line(
            filtered_df(),
            x="year",
            y="gdpPercap",
            color="country",
            title="GDP per Capita Over Time",
        )


app = App(app_ui, server)