Reflex Logo

Intro

Gallery

Hosting

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Datadisplay

/

Table

Tables are used to organize and display data efficiently. The table component differs from the `data_table`` component in that it is not meant to display large amounts of data. It is meant to display data in a more organized way.

Tables can be created with a shorthand syntax or by explicitly creating the table components. The shorthand syntax is great for simple tables, but if you need more control over the table you can use the explicit syntax.

Let's start with the shorthand syntax. The shorthand syntax has headers, rows, and footers props.

NameAgeLocation
John30New York
Jane31San Francisco
Joe32Los Angeles
Footer 1Footer 2Footer 3
rx.chakra.table_container(
    rx.chakra.table(
        headers=["Name", "Age", "Location"],
        rows=[
            ("John", 30, "New York"),
            ("Jane", 31, "San Francisco"),
            ("Joe", 32, "Los Angeles"),
        ],
        footers=["Footer 1", "Footer 2", "Footer 3"],
        variant="striped",
    )
)

Let's create a simple table explicitly. In this example we will make a table with 2 columns: Name and Age.

NameAge
John30
rx.chakra.table(
    rx.chakra.thead(
        rx.chakra.tr(
            rx.chakra.th("Name"),
            rx.chakra.th("Age"),
        )
    ),
    rx.chakra.tbody(
        rx.chakra.tr(
            rx.chakra.td("John"),
            rx.chakra.td(30),
        )
    ),
)

In the examples we will be using this data to display in a table.

columns = ["Name", "Age", "Location"]
data = [
    ["John", 30, "New York"],
    ["Jane", 25, "San Francisco"],
]
footer = ["Footer 1", "Footer 2", "Footer 3"]

Now lets create a table with the data we created.

Example Table
NameAgeLocation
John30New York
Jane25San Francisco
Footer 1Footer 2Footer 3

Tables can also be styled with the variant and color_scheme arguments.

NameAgeLocation
John30New York
Jane31San Francisco
Joe32Los Angeles
rx.chakra.table_container(
    rx.chakra.table(
        rx.chakra.thead(
            rx.chakra.tr(
                rx.chakra.th("Name"),
                rx.chakra.th("Age"),
                rx.chakra.th("Location"),
            )
        ),
        rx.chakra.tbody(
            rx.chakra.tr(
                rx.chakra.td("John"),
                rx.chakra.td(30),
                rx.chakra.td("New York"),
            ),
            rx.chakra.tr(
                rx.chakra.td("Jane"),
                rx.chakra.td(31),
                rx.chakra.td("San Francisco"),
            ),
            rx.chakra.tr(
                rx.chakra.td("Joe"),
                rx.chakra.td(32),
                rx.chakra.td("Los Angeles"),
            ),
        ),
        variant="striped",
        color_scheme="teal",
    )
)

A table component.

PropTypeDescriptionValues
color_schemestr

The color scheme of the table

variantstr

The variant of the table style to use

sizestr

The size of the table

placementstr

The placement of the table caption.

Event Triggers

See the full list of default event triggers

A table caption component.

PropTypeDescriptionValues
placementstr

The placement of the table caption. This sets the caption-side CSS attribute.

A table header component.

Props

No component specific props

A table body component.

Props

No component specific props

A table footer component.

Props

No component specific props

A table row component.

Props

No component specific props

A table header cell component.

PropTypeDescriptionValues
is_numericbool

invalid children components Aligns the cell content to the right.

A table data cell component.

PropTypeDescriptionValues
is_numericbool

invalid children components Aligns the cell content to the right.

The table container component renders a div that wraps the table component.

Props

No component specific props

Did you find this useful?

HomeGalleryChangelogIntroductionHosting