Spaces:
Running
Running
File size: 2,695 Bytes
ebec85b 1108474 ebec85b 1108474 3b5501b ebec85b 3b5501b ebec85b 1108474 ebec85b 1108474 ebec85b 1108474 ebec85b 1108474 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
from fasthtml.common import Button, Div, Style, Table, Tbody, Td, Th, Thead, Tr, fast_app
css = """\
tr.htmx-swapping td {
opacity: 0;
transition: opacity 1s ease-out !important;
}
"""
app, rt = fast_app(hdrs=[Style(css)])
@app.get
def page():
return Div(cls="container overflow-auto")(
Table(
Thead(Tr(Th("Name"), Th("Email"), Th())),
Tbody(hx_confirm="Are you sure?", hx_target="closest tr", hx_swap="outerHTML swap:1s")(
Tr(
Td("Joe Smith"),
Td("[email protected]"),
Td(Button("Delete", hx_delete="/contacts/0", cls="btn secondary")),
),
Tr(
Td("Angie MacDowell"),
Td("[email protected]"),
Td(Button("Delete", hx_delete="/contacts/1", cls="btn secondary")),
),
Tr(
Td("Fuqua Tarkenton"),
Td("[email protected]"),
Td(Button("Delete", hx_delete="/contacts/2", cls="btn secondary")),
),
Tr(
Td("Kim Yee"),
Td("[email protected]"),
Td(Button("Delete", hx_delete="/contacts/3", cls="btn secondary")),
),
),
),
)
@rt("/contacts/{idx}")
def delete(idx: int):
# Delete actual data here
return None
DESC = "Demonstrates row deletion in a table"
DOC = """
This example shows how to implement a delete button that removes a table row upon completion. First let’s look at the table body:
```python
Table(
Thead(),
Tbody(
Tr(), Tr(), Tr(), Tr(),
hx_confirm="Are you sure?",
hx_target="closest tr",
hx_swap="outerHTML swap:1s",
)
)
```
The table body has a `hx-confirm` attribute to confirm the delete action. It also set the target to be the closest tr that is, the closest table row, for all the buttons (hx-target is inherited from parents in the DOM.) The swap specification in hx-swap says to swap the entire target out and to wait 1 second after receiving a response. This last bit is so that we can use the following CSS:
::css::
To fade the row out before it is swapped/removed.
Each row has a button with a hx-delete attribute containing the url on which to issue a DELETE request to delete the row from the server. This request responds with a 200 status code and empty content, indicating that the row should be replaced with nothing.
```python
Tr(
Td("Angie MacDowell"),
Td("[email protected]"),
Td(Button("Delete", hx_delete="/contacts/1", cls="btn secondary")),
)
```
"""
HEIGHT = "350px"
|