219 lines
7.7 KiB
Markdown
219 lines
7.7 KiB
Markdown
---
|
|
components:
|
|
- rx.table.root
|
|
- rx.table.header
|
|
- rx.table.row
|
|
- rx.table.column_header_cell
|
|
- rx.table.body
|
|
- rx.table.cell
|
|
- rx.table.row_header_cell
|
|
|
|
only_low_level:
|
|
- True
|
|
|
|
TableRoot: |
|
|
lambda **props: rx.radix.themes.table.root(
|
|
rx.radix.themes.table.header(
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.column_header_cell("Full Name"),
|
|
rx.radix.themes.table.column_header_cell("Email"),
|
|
rx.radix.themes.table.column_header_cell("Group"),
|
|
),
|
|
),
|
|
rx.radix.themes.table.body(
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.row_header_cell("Danilo Rosa"),
|
|
rx.radix.themes.table.cell("danilo@example.com"),
|
|
rx.radix.themes.table.cell("Developer"),
|
|
),
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.row_header_cell("Zahra Ambessa"),
|
|
rx.radix.themes.table.cell("zahra@example.com"),
|
|
rx.radix.themes.table.cell("Admin"),
|
|
),
|
|
),
|
|
width="80%",
|
|
**props,
|
|
)
|
|
|
|
TableRow: |
|
|
lambda **props: rx.radix.themes.table.root(
|
|
rx.radix.themes.table.header(
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.column_header_cell("Full Name"),
|
|
rx.radix.themes.table.column_header_cell("Email"),
|
|
rx.radix.themes.table.column_header_cell("Group"),
|
|
**props,
|
|
),
|
|
),
|
|
rx.radix.themes.table.body(
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.row_header_cell("Danilo Rosa"),
|
|
rx.radix.themes.table.cell(rx.radix.themes.text("danilo@example.com", as_="p"), rx.radix.themes.text("danilo@yahoo.com", as_="p"), rx.radix.themes.text("danilo@gmail.com", as_="p"),),
|
|
rx.radix.themes.table.cell("Developer"),
|
|
**props,
|
|
),
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.row_header_cell("Zahra Ambessa"),
|
|
rx.radix.themes.table.cell("zahra@example.com"),
|
|
rx.radix.themes.table.cell("Admin"),
|
|
**props,
|
|
),
|
|
),
|
|
width="80%",
|
|
)
|
|
|
|
TableColumnHeaderCell: |
|
|
lambda **props: rx.radix.themes.table.root(
|
|
rx.radix.themes.table.header(
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.column_header_cell("Full Name", **props,),
|
|
rx.radix.themes.table.column_header_cell("Email", **props,),
|
|
rx.radix.themes.table.column_header_cell("Group", **props,),
|
|
),
|
|
),
|
|
rx.radix.themes.table.body(
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.row_header_cell("Danilo Rosa"),
|
|
rx.radix.themes.table.cell("danilo@example.com"),
|
|
rx.radix.themes.table.cell("Developer"),
|
|
),
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.row_header_cell("Zahra Ambessa"),
|
|
rx.radix.themes.table.cell("zahra@example.com"),
|
|
rx.radix.themes.table.cell("Admin"),
|
|
),
|
|
),
|
|
width="80%",
|
|
)
|
|
|
|
TableCell: |
|
|
lambda **props: rx.radix.themes.table.root(
|
|
rx.radix.themes.table.header(
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.column_header_cell("Full Name"),
|
|
rx.radix.themes.table.column_header_cell("Email"),
|
|
rx.radix.themes.table.column_header_cell("Group"),
|
|
),
|
|
),
|
|
rx.radix.themes.table.body(
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.row_header_cell("Danilo Rosa"),
|
|
rx.radix.themes.table.cell("danilo@example.com", **props,),
|
|
rx.radix.themes.table.cell("Developer", **props,),
|
|
),
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.row_header_cell("Zahra Ambessa"),
|
|
rx.radix.themes.table.cell("zahra@example.com", **props,),
|
|
rx.radix.themes.table.cell("Admin", **props,),
|
|
),
|
|
),
|
|
width="80%",
|
|
)
|
|
|
|
TableRowHeaderCell: |
|
|
lambda **props: rx.radix.themes.table.root(
|
|
rx.radix.themes.table.header(
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.column_header_cell("Full Name"),
|
|
rx.radix.themes.table.column_header_cell("Email"),
|
|
rx.radix.themes.table.column_header_cell("Group"),
|
|
),
|
|
),
|
|
rx.radix.themes.table.body(
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.row_header_cell("Danilo Rosa", **props,),
|
|
rx.radix.themes.table.cell("danilo@example.com"),
|
|
rx.radix.themes.table.cell("Developer"),
|
|
),
|
|
rx.radix.themes.table.row(
|
|
rx.radix.themes.table.row_header_cell("Zahra Ambessa", **props,),
|
|
rx.radix.themes.table.cell("zahra@example.com"),
|
|
rx.radix.themes.table.cell("Admin"),
|
|
),
|
|
),
|
|
width="80%",
|
|
)
|
|
---
|
|
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Table
|
|
|
|
A semantic table for presenting tabular data.
|
|
|
|
## Basic Example
|
|
|
|
```python demo
|
|
rx.table.root(
|
|
rx.table.header(
|
|
rx.table.row(
|
|
rx.table.column_header_cell("Full name"),
|
|
rx.table.column_header_cell("Email"),
|
|
rx.table.column_header_cell("Group"),
|
|
),
|
|
),
|
|
rx.table.body(
|
|
rx.table.row(
|
|
rx.table.row_header_cell("Danilo Sousa"),
|
|
rx.table.cell("danilo@example.com"),
|
|
rx.table.cell("Developer"),
|
|
),
|
|
rx.table.row(
|
|
rx.table.row_header_cell("Zahra Ambessa"),
|
|
rx.table.cell("zahra@example.com"),
|
|
rx.table.cell("Admin"),
|
|
),rx.table.row(
|
|
rx.table.row_header_cell("Jasper Eriksson"),
|
|
rx.table.cell("jasper@example.com"),
|
|
rx.table.cell("Developer"),
|
|
),
|
|
),
|
|
)
|
|
```
|
|
|
|
## Real World Example
|
|
|
|
```python demo
|
|
rx.flex(
|
|
rx.heading("Your Team"),
|
|
rx.text("Invite and manage your team members"),
|
|
rx.flex(
|
|
rx.input(placeholder="Email Address"),
|
|
rx.button("Invite"),
|
|
justify="center",
|
|
spacing="2",
|
|
),
|
|
rx.table.root(
|
|
rx.table.body(
|
|
rx.table.row(
|
|
rx.table.cell(rx.avatar(fallback="DS")),
|
|
rx.table.row_header_cell(rx.link("Danilo Sousa")),
|
|
rx.table.cell("danilo@example.com"),
|
|
rx.table.cell("Developer"),
|
|
align="center",
|
|
),
|
|
rx.table.row(
|
|
rx.table.cell(rx.avatar(fallback="ZA")),
|
|
rx.table.row_header_cell(rx.link("Zahra Ambessa")),
|
|
rx.table.cell("zahra@example.com"),
|
|
rx.table.cell("Admin"),
|
|
align="center",
|
|
),
|
|
rx.table.row(
|
|
rx.table.cell(rx.avatar(fallback="JE")),
|
|
rx.table.row_header_cell(rx.link("Jasper Eriksson")),
|
|
rx.table.cell("jasper@example.com"),
|
|
rx.table.cell("Developer"),
|
|
align="center",
|
|
),
|
|
),
|
|
),
|
|
direction="column",
|
|
spacing="2",
|
|
)
|
|
```
|