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.
In this example we will read data from a csv file, convert it to a pandas dataframe and display it in a data_table.
We will also add a search, pagination, sorting to the data_table to make it more accessible.
If you want to add, edit or remove data in your app or deal with anything but static data then the might be a better fit for your use case.
import pandas as pd
nba_data = pd.read_csv("data/nba.csv")
...
rx.data_table(
data=nba_data[["Name", "Height", "Age"]],
pagination=True,
search=True,
sort=True,
)📊 Dataset source: nba.csv
The example below shows how to create a data table from from a list.
class State(rx.State):
data: List = [["Lionel", "Messi", "PSG"], ["Christiano", "Ronaldo", "Al-Nasir"]]
columns: List[str] = ["First Name", "Last Name"]
def index():
return rx.data_table(
data=State.data,
columns=State.columns,
)Related
Explore the other ways to work with tabular data in Reflex, all in pure Python:
API Reference
rx.data_table
A data table component.
Props
| Prop | Type | Description |
|---|---|---|
data | Any | The data to display. Either a list of lists or a pandas dataframe. |
columns | Sequence | The list of columns to display. Required if data is a list and should not be provided if the data field is a dataframe. |
search | bool | Enable a search bar. |
sort | bool | Enable sorting on columns. |
resizable | bool | Enable resizable columns. |
pagination | Union[bool, dict] | Enable pagination. |