68 lines
1.6 KiB
Markdown
68 lines
1.6 KiB
Markdown
---
|
|
components:
|
|
- rx.data_table
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# DataTable
|
|
|
|
The datatable component is a great way to display data in a table format.
|
|
You can pass in a pandas dataframe to the data prop to create the table.
|
|
|
|
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.
|
|
|
|
```python demo box
|
|
rx.data_table(
|
|
data=[
|
|
["Avery Bradley", "6-2", 25.0],
|
|
["Jae Crowder", "6-6", 25.0],
|
|
["John Holland", "6-5", 27.0],
|
|
["R.J. Hunter", "6-5", 22.0],
|
|
["Jonas Jerebko", "6-10", 29.0],
|
|
["Amir Johnson", "6-9", 29.0],
|
|
["Jordan Mickey", "6-8", 21.0],
|
|
["Kelly Olynyk", "7-0", 25.0],
|
|
["Terry Rozier", "6-2", 22.0],
|
|
["Marcus Smart", "6-4", 22.0],
|
|
],
|
|
columns=["Name", "Height", "Age"],
|
|
pagination=True,
|
|
search=True,
|
|
sort=True,
|
|
)
|
|
```
|
|
|
|
```python
|
|
import pandas as pd
|
|
nba_data = pd.read_csv("https://media.geeksforgeeks.org/wp-content/uploads/nba.csv")"""
|
|
...
|
|
rx.data_table(
|
|
data = nba_data[["Name", "Height", "Age"]],
|
|
pagination= True,
|
|
search= True,
|
|
sort= True,
|
|
)
|
|
```
|
|
|
|
The example below shows how to create a data table from from a list.
|
|
|
|
```python
|
|
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,
|
|
)
|
|
```
|