Data Grid

#| standalone: true
#| components: [viewer]
#| viewerHeight: 375

from palmerpenguins import load_penguins
from shiny import App, render, ui

penguins = load_penguins()

app_ui = ui.page_fluid(
    ui.h2("Palmer Penguins"),
    ui.output_data_frame("penguins_df"),  
)

def server(input, output, session):
    @render.data_frame  
    def penguins_df():
        return render.DataGrid(penguins)  

app = App(app_ui, server)

Express
Core

from palmerpenguins import load_penguins
from shiny import render
from shiny.express import ui

penguins = load_penguins()

ui.h2("Palmer Penguins")

@render.data_frame  
def penguins_df():
    return render.DataGrid(penguins)

from palmerpenguins import load_penguins
from shiny import App, render, ui

penguins = load_penguins()

app_ui = ui.page_fluid(
    ui.h2("Palmer Penguins"),
    ui.output_data_frame("penguins_df"),  
)

def server(input, output, session):
    @render.data_frame  
    def penguins_df():
        return render.DataGrid(penguins)  

app = App(app_ui, server)

Relevant Functions

ui.output_data_frame
ui.output_data_frame(id)
@render.data_frame
render.data_frame(fn=None)
render.DataGrid
render.DataGrid(self, data, *, width='fit-content', height='500px', summary=True, filters=False, row_selection_mode='none')

Details

A Data Grid presents tabular data in a spreadsheet-like view with cells separated by grid lines.

To make a reactive Data Grid, follow three steps:

Call ui.output_data_frame() in the UI of your app to create a div in which to display the table. Where you call this function within the UI functions will determine where the table will appear within the layout of the app. Set the id argument of ui.output_data_frame() to a unique value.
Within the server function, define a new function whose name matches the id used above. The function should assemble the table to display and then return the table wrapped in render.DataGrid(). Shiny will rerun this function whenever it needs to build or update the output that has the matching id.
Decorate the function with @render.data_frame

A Data Grid can also collect input from the user. To allow this, set render.DataGrid(row_selection_mode="single") or render.DataGrid(row_selection_mode="multiple") to allow the user to select one or more rows of the Data Grid.

The indices of the selected rows will be accessible within the server function as a reactive variable returned by input.<id>_selected_rows(), where is the id of the ui.output_data_frame() associated with the table.

The value returned will be None if no rows are selected, or a tuple of integers representing the indices of the selected rows. To filter a pandas data frame down to the selected rows, use df.iloc[list(input.<id>_selected_rows())].

If your table is a data frame that uses the pandas styler, replace ui.output_data_frame() with ui.output_table() and @render.data_frame with @render.table.

Variations

Select Rows

Set row_selection_mode in render.DataGrid() to "single" to allow the user to select one row at a time. Set it to "multiple" to allow the user to select multiple rows at a time. Access the selection(s) as input.<id>_selected_rows().

#| standalone: true
#| components: [viewer]
#| viewerHeight: 350

from palmerpenguins import load_penguins
from shiny import App, render, ui

penguins = load_penguins()

app_ui = ui.page_fluid(
    ui.h2("Palmer Penguins"),
    ui.output_ui("rows"),
    ui.output_data_frame("penguins_df"),
)

def server(input, output, session):
    @render.data_frame
    def penguins_df():
        return render.DataGrid(penguins, row_selection_mode="multiple")  

    @render.ui()
    def rows():
        rows = input.penguins_df_selected_rows()  
        selected = ", ".join(str(i) for i in sorted(rows)) if rows else "None"
        return f"Rows selected: {selected}"

app = App(app_ui, server)

Express
Core

from palmerpenguins import load_penguins
from shiny import render
from shiny.express import input, ui

penguins = load_penguins()

ui.h2("Palmer Penguins")

@render.ui()
def rows():
    rows = input.penguins_df_selected_rows()  
    selected = ", ".join(str(i) for i in sorted(rows)) if rows else "None"
    return f"Rows selected: {selected}"

@render.data_frame
def penguins_df():
    return render.DataGrid(penguins, row_selection_mode="multiple")

from palmerpenguins import load_penguins
from shiny import App, render, ui

penguins = load_penguins()

app_ui = ui.page_fluid(
    ui.h2("Palmer Penguins"),
    ui.output_ui("rows"),
    ui.output_data_frame("penguins_df"),
)

def server(input, output, session):
    @render.data_frame
    def penguins_df():
        return render.DataGrid(penguins, row_selection_mode="multiple")  

    @render.ui()
    def rows():
        rows = input.penguins_df_selected_rows()  
        selected = ", ".join(str(i) for i in sorted(rows)) if rows else "None"
        return f"Rows selected: {selected}"

app = App(app_ui, server)

Filterable Table

Set render.DataGrid(filters=True) to add a row of filter options to the header row. Users can interact with these options to filter the table.

#| standalone: true
#| components: [viewer]
#| viewerHeight: 350

from palmerpenguins import load_penguins
from shiny import App, render, ui

penguins = load_penguins()

app_ui = ui.page_fluid(
    ui.h2("Palmer Penguins"),
    ui.output_data_frame("penguins_df"),
)

def server(input, output, session):
    @render.data_frame
    def penguins_df():
        return render.DataGrid(penguins, filters=True)  

app = App(app_ui, server)

Express
Core

# shiny.express
from palmerpenguins import load_penguins
from shiny import render
from shiny.express import ui

penguins = load_penguins()

ui.h2("Palmer Penguins")

@render.data_frame
def penguins_df():
    return render.DataGrid(penguins, filters=True)

from palmerpenguins import load_penguins
from shiny import App, render, ui

penguins = load_penguins()

app_ui = ui.page_fluid(
    ui.h2("Palmer Penguins"),
    ui.output_data_frame("penguins_df"),
)

def server(input, output, session):
    @render.data_frame
    def penguins_df():
        return render.DataGrid(penguins, filters=True)  

app = App(app_ui, server)

Set Table Size

Set the height and width parameters of render.DataGrid() to constrain the output size of the table.

#| standalone: true
#| components: [viewer]
#| viewerHeight: 350

from palmerpenguins import load_penguins
from shiny import App, render, ui

penguins = load_penguins()

app_ui = ui.page_fluid(
    ui.h2("Palmer Penguins"),
    ui.output_data_frame("penguins_df"),
)

def server(input, output, session):
    @render.data_frame
    def penguins_df():
        return render.DataGrid(penguins, width="300px", height="250px")  

app = App(app_ui, server)

Express
Core

from palmerpenguins import load_penguins
from shiny import render
from shiny.express import ui

penguins = load_penguins()

ui.h2("Palmer Penguins")

@render.data_frame
def penguins_df():
    return render.DataGrid(penguins, width="300px", height="250px")

from palmerpenguins import load_penguins
from shiny import App, render, ui

penguins = load_penguins()

app_ui = ui.page_fluid(
    ui.h2("Palmer Penguins"),
    ui.output_data_frame("penguins_df"),
)

def server(input, output, session):
    @render.data_frame
    def penguins_df():
        return render.DataGrid(penguins, width="300px", height="250px")  

app = App(app_ui, server)

Customize Summary Statement

Set summary in render.DataGrid() to False to remove the statement “Viewing rows 1 through 10 of 20”. Set it to a string template containing {start}, {end}, and {total} tokens, to customize the message.

#| standalone: true
#| components: [viewer]
#| viewerHeight: 350

from palmerpenguins import load_penguins
from shiny import App, render, ui

penguins = load_penguins()

app_ui = ui.page_fluid(
    ui.h2("Palmer Penguins"),
    ui.output_data_frame("penguins_df"),
)

def server(input, output, session):
    @render.data_frame
    def penguins_df():
        return render.DataGrid(
            penguins,
            summary="Viendo filas {start} a {end} de {total}",  
        )

app = App(app_ui, server)

Express
Core

from palmerpenguins import load_penguins
from shiny import render
from shiny.express import ui

penguins = load_penguins()

ui.h2("Palmer Penguins")

@render.data_frame
def penguins_df():
    return render.DataGrid(
        penguins,
        summary="Viendo filas {start} a {end} de {total}",  
    )

from palmerpenguins import load_penguins
from shiny import App, render, ui

penguins = load_penguins()

app_ui = ui.page_fluid(
    ui.h2("Palmer Penguins"),
    ui.output_data_frame("penguins_df"),
)

def server(input, output, session):
    @render.data_frame
    def penguins_df():
        return render.DataGrid(
            penguins,
            summary="Viendo filas {start} a {end} de {total}",  
        )

app = App(app_ui, server)