Click To Load

Demonstrates clicking to load more rows in a table

Back | Explain | Code | Htmx Docs
             from fasthtml.common import Button, Div, Table, Tbody, Td, Th, Thead, Tr, fast_app

app, rt = fast_app()


@app.get
def page():
    return Div(cls="container overflow-auto")(
        Table(
            Thead(Tr(Th("Name"), Th("ID"))),
            Tbody(load_contacts(page=1)),
        )
    )



@app.get("/contacts")
def load_contacts(page: int, limit: int = 5):
    rows = [Tr(Td("Smith"), Td((page - 1) * limit + i)) for i in range(limit)]
    return *rows, make_last_row(page)


def make_last_row(page):
    return Tr(hx_target="this")(
        Td(colspan="3")(
            Button("Load More Agents...",
                   hx_get=load_contacts.rt(page=page + 1), hx_swap="outerHTML", cls="btn primary"),
        ),
    )
# fmt: on
           

Direct url