Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Datadisplay

/

Table

A semantic table for presenting tabular data.

Full nameEmailGroup
Danilo Sousadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
Jasper Erikssonjasper@example.comDeveloper
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"),
        ),
    ),
)

Your Team

Invite and manage your team members

Danilo Sousadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
Jasper Erikssonjasper@example.comDeveloper
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",
)

A semantic table for presenting tabular data.

Full NameEmailGroup
Danilo Rosadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
PropTypeDescriptionValues
sizeLiteral

The size of the table: "1" | "2" | "3"

variantLiteral

The variant of the table

alignUnion

Alignment of the table

summaryUnion

Provides a summary of the table's purpose and structure

Event Triggers

No component specific event triggers

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

PropTypeDescriptionValues
alignUnion

Alignment of the content within the table header

Event Triggers

No component specific event triggers

A row containing table cells.

Full NameEmailGroup
Danilo Rosa

danilo@example.com

danilo@yahoo.com

danilo@gmail.com

Developer
Zahra Ambessazahra@example.comAdmin
PropTypeDescriptionValues
alignLiteral

The alignment of the row

alignUnion

Alignment of the content within the table row

Event Triggers

No component specific event triggers

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

Full NameEmailGroup
Danilo Rosadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
PropTypeDescriptionValues
justifyLiteral

The justification of the column

alignUnion

Alignment of the content within the table header cell

col_spanUnion

Number of columns a header cell should span

headersUnion

IDs of the headers associated with this header cell

row_spanUnion

Number of rows a header cell should span

scopeUnion

Scope of the header cell (row, col, rowgroup, colgroup)

Event Triggers

No component specific event triggers

The body of the table contains the data rows.

PropTypeDescriptionValues
alignUnion

Alignment of the content within the table body

Event Triggers

No component specific event triggers

A cell containing data.

Full NameEmailGroup
Danilo Rosadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
PropTypeDescriptionValues
justifyLiteral

The justification of the column

alignUnion

Alignment of the content within the table cell

col_spanUnion

Number of columns a cell should span

headersUnion

IDs of the headers associated with this cell

row_spanUnion

Number of rows a cell should span

Event Triggers

No component specific event triggers

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

Full NameEmailGroup
Danilo Rosadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
PropTypeDescriptionValues
justifyLiteral

The justification of the column

alignUnion

Alignment of the content within the table header cell

col_spanUnion

Number of columns a header cell should span

headersUnion

IDs of the headers associated with this header cell

row_spanUnion

Number of rows a header cell should span

scopeUnion

Scope of the header cell (row, col, rowgroup, colgroup)

Event Triggers

No component specific event triggers

← ScrollAreaAccordion →

Did you find this useful?