Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

Datadisplay

Table

A semantic table for presenting tabular data.

Basic Example

Full name	Email	Group
Danilo Sousa	danilo@example.com	Developer
Zahra Ambessa	zahra@example.com	Admin
Jasper Eriksson	jasper@example.com	Developer

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

Your Team

Invite and manage your team members

Danilo Sousa	danilo@example.com	Developer
Zahra Ambessa	zahra@example.com	Admin
Jasper Eriksson	jasper@example.com	Developer

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

API Reference

TableRoot

A semantic table for presenting tabular data.

Full Name	Email	Group
Danilo Rosa	danilo@example.com	Developer
Zahra Ambessa	zahra@example.com	Admin

Prop	Type	Description
`size`	Literal	The size of the table: "1" \| "2" \| "3"
`variant`	Literal	The variant of the table
`align`	Union	Alignment of the table
`summary`	Union	Provides a summary of the table's purpose and structure

Event Triggers

See the full list of default event triggers

TableHeader

The header of the table defines column names and other non-data elements.

Prop	Type	Description	Values
`align`	Union	Alignment of the content within the table header

Event Triggers

See the full list of default event triggers

TableRow

A row containing table cells.

Full Name	Email	Group
Danilo Rosa	danilo@example.com danilo@yahoo.com danilo@gmail.com	Developer
Zahra Ambessa	zahra@example.com	Admin

Full Name

Group

Danilo Rosa

danilo@example.com

danilo@yahoo.com

danilo@gmail.com

Developer

Zahra Ambessa

zahra@example.com

Admin

Prop	Type	Description	Values
`align`	Literal	The alignment of the row
`align`	Union	Alignment of the content within the table row

Event Triggers

See the full list of default event triggers

TableColumnHeaderCell

A table cell that is semantically treated as a column header.

Full Name	Email	Group
Danilo Rosa	danilo@example.com	Developer
Zahra Ambessa	zahra@example.com	Admin

Prop	Type	Description
`justify`	Literal	The justification of the column
`align`	Union	Alignment of the content within the table header cell
`col_span`	Union	Number of columns a header cell should span
`headers`	Union	IDs of the headers associated with this header cell
`row_span`	Union	Number of rows a header cell should span
`scope`	Union	Scope of the header cell (row, col, rowgroup, colgroup)

Event Triggers

See the full list of default event triggers

TableBody

The body of the table contains the data rows.

Prop	Type	Description	Values
`align`	Union	Alignment of the content within the table body

Event Triggers

See the full list of default event triggers

TableCell

A cell containing data.

Full Name	Email	Group
Danilo Rosa	danilo@example.com	Developer
Zahra Ambessa	zahra@example.com	Admin

Prop	Type	Description
`justify`	Literal	The justification of the column
`align`	Union	Alignment of the content within the table cell
`col_span`	Union	Number of columns a cell should span
`headers`	Union	IDs of the headers associated with this cell
`row_span`	Union	Number of rows a cell should span

Event Triggers

See the full list of default event triggers

TableRowHeaderCell

A table cell that is semantically treated as a row header.

Full Name	Email	Group
Danilo Rosa	danilo@example.com	Developer
Zahra Ambessa	zahra@example.com	Admin

Prop	Type	Description
`justify`	Literal	The justification of the column
`align`	Union	Alignment of the content within the table header cell
`col_span`	Union	Number of columns a header cell should span
`headers`	Union	IDs of the headers associated with this header cell
`row_span`	Union	Number of rows a header cell should span
`scope`	Union	Scope of the header cell (row, col, rowgroup, colgroup)