Bulk Update

from fasthtml.common import Button, Div, Form, Input, Style, Table, Tbody, Td, Th, Thead, Tr, fast_app

css = """\
#toast.htmx-settling {
  opacity: 100;
}

#toast {
  opacity: 0;
  transition: opacity 3s ease-out !important;
  background: blue;
  color: orange;
}
"""

app, rt = fast_app(hdrs=[Style(css)])


@app.get
def page():
    return Form(hx_post=update, hx_swap="outerHTML settle:3s", hx_target="#toast", cls="container")(
        Table(
            Thead(Tr(Th("Name"), Th("Email"), Th("Active"))),
            Tbody(
                Tr(Td("Kim 1"), Td("kim@1.org"), Td(Input(type="checkbox", name="active:kim@1.org"))),
                Tr(Td("Kim 2"), Td("kim@2.org"), Td(Input(type="checkbox", name="active:kim@2.org"))),
                Tr(Td("Kim 3"), Td("kim@3.org"), Td(Input(type="checkbox", name="active:kim@3.org"))),
                Tr(Td("Kim 4"), Td("kim@4.org"), Td(Input(type="checkbox", name="active:kim@4.org"))),
            ),
        ),
        Button("Bulk Update", cls="btn primary"),
        Div(id="toast"),
    )


@app.post("/users")
def update(x: dict):
    n = len(x)
    return Div(f"Activated {n} and deactivated {4-n} users", id="toast", aria_live="polite")

Server Calls