Data table

Preview Available in release assets

Present server-filtered and server-sorted tabular data with native semantics and a canonical GET URL.

Server contract

GET /reports/services?q=<query>&sort=<enum> returns the complete view. Enhanced GET /api/data-display returns one deterministic datastar-patch-elements fragment. Server output owns table rows and chart geometry.

Without Datastar, native GET controls, sort links, table navigation, chart summary, and equivalent data table remain complete.

Data table primary example

<section class="thin-data-table" aria-labelledby="services-title" data-signals="{q: '', sort: 'requests-desc'}">
  <h1 id="services-title">Service traffic</h1>
  <form action="/reports/services" method="get" aria-label="Filter and sort service traffic" data-on:input__debounce.200ms="@get('/api/data-display')" data-indicator:loading>
    <label for="table-query">Filter services</label>
    <input class="thin-input" id="table-query" type="search" name="q" data-bind="q" />
    <label for="table-sort">Sort</label>
    <select class="thin-select" id="table-sort" name="sort" data-bind="sort">
      <option value="requests-desc">Requests, high to low</option>
      <option value="name-asc">Name</option>
    </select>
    <button class="thin-button">Apply</button>
    <a href="/reports/services">Clear</a>
    <p role="status" data-show="$loading" style="display:none">Updating data…</p>
  </form>
  <div data-table-scroll tabindex="0" role="region" aria-label="Service traffic table, scroll horizontally">
    <table>
      <caption>Requests and errors for the last 24 hours. Server updated August 1.</caption>
      <thead>
        <tr>
          <th scope="col">
            <a href="/reports/services?sort=name-asc">Service</a>
          </th>
          <th scope="col">
            <a href="/reports/services?sort=requests-desc" aria-current="page">Requests</a>
          </th>
          <th scope="col">Errors</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            <a href="/services/gateway">Gateway</a>
          </th>
          <td>12,480</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Show code

<section class="thin-data-table" aria-labelledby="services-title" data-signals="{q: '', sort: 'requests-desc'}">
  <h1 id="services-title">Service traffic</h1>
  <form action="/reports/services" method="get" aria-label="Filter and sort service traffic" data-on:input__debounce.200ms="@get('/api/data-display')" data-indicator:loading>
    <label for="table-query">Filter services</label>
    <input class="thin-input" id="table-query" type="search" name="q" data-bind="q" />
    <label for="table-sort">Sort</label>
    <select class="thin-select" id="table-sort" name="sort" data-bind="sort">
      <option value="requests-desc">Requests, high to low</option>
      <option value="name-asc">Name</option>
    </select>
    <button class="thin-button">Apply</button>
    <a href="/reports/services">Clear</a>
    <p role="status" data-show="$loading" style="display:none">Updating data…</p>
  </form>
  <div data-table-scroll tabindex="0" role="region" aria-label="Service traffic table, scroll horizontally">
    <table>
      <caption>Requests and errors for the last 24 hours. Server updated August 1.</caption>
      <thead>
        <tr>
          <th scope="col">
            <a href="/reports/services?sort=name-asc">Service</a>
          </th>
          <th scope="col">
            <a href="/reports/services?sort=requests-desc" aria-current="page">Requests</a>
          </th>
          <th scope="col">Errors</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            <a href="/services/gateway">Gateway</a>
          </th>
          <td>12,480</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Anatomy

Ordinary GET filter and sort form
Captioned native table
Column and row headers
Durable sort links
Focusable overflow region

Variants and sizes

Operational data
Financial data
Long localized labels
RTL

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

States and difficult content

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

Results
Sorted
Filtered
Pending
Empty
Server error
Disconnected
Reconnected
Long data
RTL

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The server owns filtering, sorting, aggregation, scales, labels, and SVG geometry. Ordinary GET forms and links are canonical; Datastar may patch returned table/chart HTML. No client grid, data-shaping layer, or chart engine is included.

Accessibility

This is an ordinary semantic form, not a search landmark: its query refines the current table and its sort control changes row order. Preserve the form labels, table caption, thead/tbody, scope headers, numeric text, and labelled keyboard-scrollable overflow region. Announce concise server counts/errors, not every cell.

Contract

NATIVE

Basis

Native captioned <table>; do not assign APG Grid while navigation remains ordinary table navigation

Evidence

tests/unit/library/data-display.test.ts

API

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

Without Datastar, native GET controls, sort links, table navigation, chart summary, and equivalent data table remain complete.

Assets and dependencies

/foundation.css
/components.css

Dependencies: datastar@1.0.2, responsive-table, status

Source: packages/ui/src/items/data-display/style.ts

Composition

Derived from the examples and style specs, not authored.