Skip to content

CRUD list

Preview Available in release assets

Render a server-authoritative collection with durable detail/edit links and optional fragment refresh.

Server contract

Use .thin-crud-list on a stable identified region. Keep every view/edit destination as a real link and return the whole region after mutation.

Links and ordinary server-submitted forms retain complete list, detail, edit, validation, and cancellation workflows without Datastar or JavaScript.

CRUD list primary example

Show code
<section class="thin-crud-list" id="projects">
  <header>
    <h2>Projects</h2>
    <a  href="/projects/new">New project</a>
  </header>
  <ul role="list">
    <li class="thin-crud-row">
      <a href="/projects/alpha">Alpha migration with a deliberately long title</a>
      <a href="/projects/alpha/edit">Edit</a>
    </li>
    <li class="thin-crud-row">
      <a href="/projects/beacon">Beacon</a>
      <a href="/projects/beacon/edit">Edit</a>
    </li>
  </ul>
</section>

Anatomy

  • Stable server-owned region
  • Durable links or form action
  • Native controls
  • Server-rendered result or validation error

Variants and sizes

  • Linked list
  • Table-like rows

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Pending
  • Empty
  • Not found
  • Forbidden
  • Validation error
  • Long content
  • Narrow container
  • Reconnect after morph

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Links navigate normally. Optional Datastar filtering or mutation responses replace the complete list region; the server owns ordering, pagination, permissions, and empty state.

Accessibility

Use headings, landmarks, links, native controls, explicit labels, server error text, and predictable focus. Datastar patches the same stable region and must preserve an understandable full-page response and focus target.

Contract
COMPOSE
Basis
Native links, forms, headings, lists, and buttons; no client grid/widget role
Evidence
  • tests/unit/library/crud-recipes.test.ts

API

Use .thin-crud-list on a stable identified region. Keep every view/edit destination as a real link and return the whole region after mutation.

Behavior tier: datastar-required

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Links and ordinary server-submitted forms retain complete list, detail, edit, validation, and cancellation workflows without Datastar or JavaScript.

Assets and dependencies

  • /components.css

Dependencies: datastar@1.0.2

Source: packages/ui/src/items/crud/style.ts

Composition

Derived from the examples and style specs, not authored.

Used by