HTML Tables

rx.el.table(
    rx.el.tbody(
        rx.el.tr(rx.el.th("Name"), rx.el.th("Role")),
        rx.el.tr(rx.el.td("Ada"), rx.el.td("Engineer")),
        rx.el.tr(rx.el.td("Linus"), rx.el.td("Maintainer")),
    ),
)

rx.el.table(
    rx.el.caption("Monthly visitors", padding="4px", font_weight="600"),
    rx.el.thead(
        rx.el.tr(rx.el.th("Month", scope="col"), rx.el.th("Visitors", scope="col")),
        background=rx.color("indigo", 3),
    ),
    rx.el.tbody(
        rx.el.tr(rx.el.th("Jan", scope="row"), rx.el.td("1,200")),
        rx.el.tr(rx.el.th("Feb", scope="row"), rx.el.td("1,450")),
    ),
    rx.el.tfoot(
        rx.el.tr(rx.el.th("Total", scope="row"), rx.el.td("2,650", font_weight="bold")),
        border_top="2px solid gray",
    ),
    width="280px",
    text_align="left",
)

rx.el.table(
    rx.el.thead(rx.el.tr(rx.el.th(""), rx.el.th("Mon"), rx.el.th("Tue"), rx.el.th("Wed"))),
    rx.el.tbody(
        rx.el.tr(rx.el.th("9 am"), rx.el.td("Workshop", col_span=2, background=rx.color("indigo", 4)), rx.el.td("Free")),
        rx.el.tr(rx.el.th("10 am"), rx.el.td("Lunch prep", row_span=2, background=rx.color("amber", 4)), rx.el.td("Review"), rx.el.td("Free")),
        rx.el.tr(rx.el.th("11 am"), rx.el.td("Free"), rx.el.td("Demo")),
    ),
    border="1px solid gray",
    text_align="center",
    width="340px",
)

rx.el.table(
    rx.el.colgroup(rx.el.col(), rx.el.col(span=2)),
    rx.el.thead(rx.el.tr(rx.el.th("Plan"), rx.el.th("Price"), rx.el.th("Seats"))),
    rx.el.tbody(
        rx.el.tr(rx.el.td("Starter"), rx.el.td("$0"), rx.el.td("1")),
        rx.el.tr(rx.el.td("Team"), rx.el.td("$20"), rx.el.td("10")),
    ),
    width="300px",
    text_align="left",
    # style the columns from the table: Reflex puts a <style> tag next to a styled
    # element, and the browser moves a <style> found inside <colgroup> out of it
    style={
        "& col:first-child": {"background": rx.color("gray", 3)},
        "& col:last-child": {"background": rx.color("teal", 3)},
    },
)

rx.el.table(
    rx.el.tbody(
        rx.el.tr(rx.el.th("Fruit", id="htmltable_fruit"), rx.el.th("Price", id="htmltable_price")),
        rx.el.tr(rx.el.td("Kiwi", headers="htmltable_fruit"), rx.el.td("$2", headers="htmltable_price")),
    ),
    width="200px",
    text_align="left",
)

class HtmlTableScoreState(rx.State):
    rows: list[dict[str, str]] = [
        {"name": "Mina", "score": "88"},
        {"name": "Jun", "score": "95"},
        {"name": "Sora", "score": "72"},
    ]
    descending: bool = True

    @rx.event
    def flip_order(self):
        self.descending = not self.descending

    @rx.var
    def sorted_rows(self) -> list[dict[str, str]]:
        return sorted(self.rows, key=lambda r: int(r["score"]), reverse=self.descending)


rx.el.div(
    rx.el.button(
        rx.cond(HtmlTableScoreState.descending, "High to low", "Low to high"),
        on_click=HtmlTableScoreState.flip_order,
        padding="4px 12px",
        border="1px solid gray",
        border_radius="6px",
        margin_bottom="8px",
    ),
    rx.el.table(
        rx.el.thead(rx.el.tr(rx.el.th("Name"), rx.el.th("Score"))),
        rx.el.tbody(
            rx.foreach(
                HtmlTableScoreState.sorted_rows,
                lambda row: rx.el.tr(rx.el.td(row["name"]), rx.el.td(row["score"], align="right")),
            ),
        ),
        width="220px",
        text_align="left",
    ),
)

rx.el.table(
    rx.el.caption("Receipt #1024", padding="6px", font_weight="bold"),
    rx.el.colgroup(rx.el.col(), rx.el.col(span=2)),
    rx.el.thead(
        rx.el.tr(rx.el.th("Item", scope="col"), rx.el.th("Qty", scope="col"), rx.el.th("Price", scope="col")),
        border_bottom="2px solid gray",
    ),
    rx.el.tbody(
        rx.el.tr(rx.el.td("Latte"), rx.el.td("2", align="right"), rx.el.td("$9.00", align="right")),
        rx.el.tr(rx.el.td("Bagel"), rx.el.td("1", align="right"), rx.el.td("$3.50", align="right")),
    ),
    rx.el.tfoot(
        rx.el.tr(rx.el.th("Total", scope="row", col_span=2), rx.el.td("$12.50", align="right", font_weight="bold")),
        border_top="2px solid gray",
    ),
    width="300px",
    text_align="left",
    font_variant_numeric="tabular-nums",
    style={"& col:last-child": {"width": "70px"}},  # see the colgroup example above
)