Spaces:
Running
Running
File size: 2,055 Bytes
ebec85b 2531445 ebec85b 1108474 0760113 ebec85b 1108474 ebec85b 1108474 ebec85b 0760113 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
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("[email protected]"), Td(Input(type="checkbox", name="active:[email protected]"))),
Tr(Td("Kim 2"), Td("[email protected]"), Td(Input(type="checkbox", name="active:[email protected]"))),
Tr(Td("Kim 3"), Td("[email protected]"), Td(Input(type="checkbox", name="active:[email protected]"))),
Tr(Td("Kim 4"), Td("[email protected]"), Td(Input(type="checkbox", name="active:[email protected]"))),
),
),
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")
DESC = "Demonstrates bulk updating of multiple rows of data"
DOC = """
This demo shows how to implement a common pattern where rows are selected and then bulk updated. This is accomplished by putting a form around a table, with checkboxes in the table, and then including the checked values in the form submission (POST request):
The server will bulk-update the statuses based on the values of the checkboxes. We respond with a small toast message about the update to inform the user, and use ARIA to politely announce the update for accessibility.
::css::
The cool thing is that, because HTML form inputs already manage their own state, we don’t need to re-render any part of the users table. The active users are already checked and the inactive ones unchecked!
You can see a working example of this code below.
::page update::
"""
HEIGHT = "300px"
|