reflex/docs/library/datadisplay/table.md

components	only_low_level	TableRoot	TableRow	TableColumnHeaderCell	TableCell	TableRowHeaderCell
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	True	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, )	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%", )	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%", )	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%", )	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%", )

import reflex as rx

Table

A semantic table for presenting tabular data.

Basic Example

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

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",
)