HTMX Guides

When the browser loads database.html, it contains a table-element for data with HTMX attributes for loading data dynamically.

<tbody id="databases-rows"  
    hx-get="/api/v1/{{{customerId}}}/databases" 
    hx-trigger="load"
    hx-target="this" 
    hx-swap="innerHTML"
    hx-indicator="this"
>
    <div class="mx-1 spinner-border spinner-border-sm htmx-indicator" role="status"></div>
</tbody>
                        

This means that when the page has loaded, it will request the database-endpoint for all database-table rows for the account. As the browser sends a text/html as the Accept-header, OINO.cloud finds the best matching template where method=get and statusCode=200.

<tr id="OINOApiRow-databases-{{{_OINOID_}}}">
<td>{{{type}}}</td>
<td>{{{name}}}</td>
<td>{{{host}}}</td>
<td>{{{port}}}</td>
<td>{{{user}}}</td>
<td>
<a hx-get="/api/v1/DevAccount/databases/{{{_OINOID_}}}/edit" hx-target="#OINOApiRow-databases-{{{_OINOID_}}}" hx-swap="outerHTML">
<i class="bi bi-pencil-square"></i>
</a>
<a hx-delete="/api/v1/DevAccount/databases/{{{_OINOID_}}}" hx-confirm="Delete row '{{{_OINOID_}}}', are you sure?">
<i class="bi bi-trash"></i>
</a>
</td>
</tr>
                        

This will transform each row of the table using the template and insert that HTML inside the <tbody> element, completing the table with data. Note that you can have multiple templates for each endpoint method separated command parameter edit in the url, allowing different html to be generated for the row.