Add in-place table row edit and delete UI

Use a compact data-row attribute on table row fragments and derive row API URLs in JavaScript from a page-level table URL. Add a /-/fragment endpoint so edited rows can be re-rendered with the active table template and render_cell hooks, then replaced in place after a successful save.

Document the custom _table.html data-row contract and cover the fragment endpoint, base_url handling, and row markup with tests.
This commit is contained in:
Simon Willison 2026-06-13 18:41:00 -07:00
commit e50d176722
8 changed files with 571 additions and 71 deletions

View file

@ -274,13 +274,20 @@ Here is an example of a custom ``_table.html`` template:
.. code-block:: jinja
{% for row in display_rows %}
<div>
<div data-row="{{ row.row_path }}">
<h2>{{ row["title"] }}</h2>
<p>{{ row["description"] }}<lp>
<p>Category: {{ row.display("category_id") }}</p>
</div>
{% endfor %}
If your custom table template should support Datasette's row editing UI, include
``data-row="{{ row.row_path }}"`` on the outer element that represents each row.
This does not need to be a ``<tr>``: it can be a ``<div>``, ``<li>`` or any other
element that wraps the HTML for that row. Datasette uses this attribute to find
the element to remove after a delete, or replace after an edit. Any edit or
delete controls should be rendered inside that same element.
.. _custom_pages:
Custom pages