Data Table

Reflex's data table component (rx.data_table) is a great way to display static data — such as a pandas DataFrame — as an interactive table in pure Python. You can pass a pandas dataframe to the data prop to create the table, with built-in search, sorting, and pagination.

If you want to add, edit or remove data in your app or deal with anything but static data then the rx.table might be a better fit for your use case.

The data_table component displays tabular data with optional search, sorting, and pagination features.

The data_table component works seamlessly with pandas DataFrames. Pass the DataFrame directly to the data prop and the column names are extracted automatically.

import pandas as pd
import reflex as rx

nba_data = pd.read_csv("data/nba.csv")


def index():
    return rx.data_table(
        data=nba_data[["Name", "Height", "Age"]],
        pagination=True,
        search=True,
        sort=True,
    )

📊 Dataset source: nba.csv

Enable sorting by setting sort=True. Users can click column headers to sort ascending or descending.

rx.data_table(
    data=nba_data[["Name", "Team", "Salary"]],
    sort=True,
)

You can also programmatically control the default sort order in your state:

class TableState(rx.State):
    data: pd.DataFrame = pd.read_csv("data/nba.csv")

    @rx.var
    def sorted_data(self) -> pd.DataFrame:
        return self.data.sort_values("Name")


def index():
    return rx.data_table(
        data=TableState.sorted_data,
        sort=True,
    )

Enable pagination by setting pagination=True. This automatically splits large datasets into pages and adds navigation controls. By default, the table shows 10 rows per page.

rx.data_table(
    data=nba_data,
    pagination=True,
)

Enable search by setting search=True. The search box filters rows across all columns in real time as the user types.

rx.data_table(
    data=nba_data,
    search=True,
)

Search is case-insensitive and matches partial strings. When combined with pagination, search results are automatically paginated.

The example below builds a data table from rows and columns stored in state. Any event handler that updates TableState.data re-renders the table.

import reflex as rx


class TableState(rx.State):
    data: list[list[str]] = [
        ["Lionel", "Messi", "Argentina"],
        ["Cristiano", "Ronaldo", "Portugal"],
        ["Neymar", "Jr", "Brazil"],
        ["Kylian", "Mbappé", "France"],
    ]
    columns: list[str] = ["First Name", "Last Name", "Country"]


def index():
    return rx.data_table(
        data=TableState.data,
        columns=TableState.columns,
        pagination=True,
        search=True,
        sort=True,
    )

Explore the other ways to work with tabular data in Reflex, all in pure Python:

• Table — Composable semantic table for custom layouts
• Data Editor — Spreadsheet-style editable data grid
• Tables and Data Grids — Overview of all table components
• AG Grid — Enterprise data grid with advanced features