Bulk Data Update with Fasthtml and HTMX

This example demonstrates how to create a simple web application using Fasthtml and HTMX that allows users to bulk update data displayed in an HTML table. Users can modify the values in the table's input fields and then click a button to submit all the changes at once.

Key Features

• Dynamic Table Generation: The HTML table is dynamically generated from a Python list of dictionaries. Each dictionary represents a row in the table.
• Client-Side Updates (with HTMX): The changes are submitted via an AJAX-like request using HTMX. This avoids a full page reload, providing a smoother user experience.
• Server-Side Processing: The updates are processed on the server using a Python function.
• Data Persistence (In-Memory): The example uses an in-memory data structure (a list of dictionaries) to store the data. In a real-world application, you would replace this with a database or other persistent storage.
• Preventing Accidental Submissions: The "Bulk Update" button uses _type="button" to prevent the form from being submitted when the user presses Enter in the input fields. This ensures that only a button click triggers the update process.

How it Works

1. Data Initialization: The data list of dictionaries holds the initial data for the table.

2. index Route (Table Display):

   • The index route function generates the HTML for the table.
   • It iterates through the data list and creates table rows (<tr>) with cells (<td>).
   • Each cell in the 'Name' and 'Age' columns contains an <input> element, allowing the user to edit the values.
   • The table is wrapped in a <form> element.
   • A "Bulk Update" button is included in the form. The hx_post attribute on the button specifies the route (/update) that will handle the form submission. The hx_target attribute specifies where the response from the server should be displayed (#response). hx_indicator shows a loading indicator while the request is in progress. _type="button" prevents form submission on Enter key press.

3. /update Route (Data Processing):

   • The update route function handles the POST request when the "Bulk Update" button is clicked.
   • It retrieves the form data using await request.form().
   • It iterates through the data list and compares the new values from the form with the original values.
   • If a value has changed, it updates the data list and adds a message to the changes list.
   • Finally, it returns a Div containing the messages about the changes.

How to Use

1. Run the example.
2. The table will be displayed in your browser.
3. Edit the 'Name' and 'Age' values in the input fields as needed.
4. Click the "Bulk Update" button.
5. The changes will be processed, and a message will appear below the button indicating which rows were updated.

Code Explanation (Key Parts)

@rt  # Root route
def index():
    # ... (code to generate the table HTML)
    return Div(
        Form(
            Table( #... ),
            Button('Bulk Update', hx_post="update", hx_target='#response', hx_indicator="#loading", _type="button")
        ),
        Div(id='response'),  # Target for the server response
        Div(id="loading", style="display:none;", _class="loader"), # Loading indicator
    )

@rt("update", methods=["POST"])
async def update(request):
    # ... (code to process the form data and update the data list)
    return Div(*[Div(change) for change in changes]) if changes else Div("No changes detected")