Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

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.

Name	Age	Location
John	30	New York
Jane	31	San Francisco
Joe	32	Los Angeles
Footer 1	Footer 2	Footer 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.

Name	Age
John	30

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
Name	Age	Location
John	30	New York
Jane	25	San Francisco
Footer 1	Footer 2	Footer 3

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

Name	Age	Location
John	30	New York
Jane	31	San Francisco
Joe	32	Los 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",
    )
)