Table

Example:

---

Code example:

from htmy import ComponentType, html

from htmui.basecoat.table import table, table_container


def example() -> ComponentType:
    return table_container(
        table(
            html.caption("Upcoming sprint tasks."),
            html.thead(
                html.tr(
                    html.th("Task", class_="w-[100px]"),
                    html.th("Owner"),
                    html.th("Priority"),
                    html.th("Estimate", class_="text-end"),
                ),
            ),
            html.tbody(
                html.tr(
                    html.td("AUTH-12", class_="font-medium"),
                    html.td("Maya"),
                    html.td("High"),
                    html.td("5 pts", class_="text-end"),
                ),
                html.tr(
                    html.td("API-48", class_="font-medium"),
                    html.td("Jonah"),
                    html.td("Medium"),
                    html.td("3 pts", class_="text-end"),
                ),
                html.tr(
                    html.td("UI-07", class_="font-medium"),
                    html.td("Priya"),
                    html.td("Low"),
                    html.td("2 pts", class_="text-end"),
                ),
            ),
            html.tfoot(
                html.tr(
                    html.td("Total", colspan="3"),
                    html.td("10 pts", class_="text-end"),
                ),
            ),
        ),
    )

---

Component implementation:

For more details, see the BasecoatUI documentation.

from htmy import ComponentType, PropertyValue, html, join_classes

__version__ = "0.2.0"
__framework__ = "BasecoatUI"
__framework_version__ = "1"
__framework_url__ = "https://basecoatui.com/components/table/"


def table(
    *children: ComponentType,
    class_: str | None = None,
    **kwargs: PropertyValue,
) -> ComponentType:
    """
    Table component.

    Arguments:
        *children: Table content.
        class_: Extra CSS classes for the table.
        **kwargs: Extra attributes for the table element.
    """
    return html.table(*children, class_=join_classes("table", class_), **kwargs)


def table_container(
    *children: ComponentType,
    class_: str | None = None,
    **kwargs: PropertyValue,
) -> ComponentType:
    """
    Horizontally scrollable wrapper for wide tables.

    Arguments:
        *children: Container content, usually a single `table`.
        class_: Extra CSS classes for the container.
        **kwargs: Extra attributes for the container.
    """
    return html.div(*children, class_=join_classes("table-container", class_), **kwargs)