Showcase

A data viewer with no viewer to build

The usual data table ships three times: the data, the component that renders it, and the wiring between them. SemText's sem-table collapses that to the markup: the authored <table> is the contract — sort and filter are chrome the reading bundle adds, and extraction returns the rows in authored order. A model reads the same cells a human sorts.

The document

Render it: headers become sort buttons (an aria-sort cycle), the filter box narrows rows, and the sticky header survives the scroll. data-value is an ordinary HTML sort key on a plain cell, not vocabulary syntax.

data-viewer example

data-viewer.md · authored SemText

source

      
      <sem-enhanced-document>
    
        <h1 data-kind="title">Service inventory</h1>
    
        <sem-table controls="sort,filter" sticky>
    
          <table>
    
            <caption>Services and owners</caption>
    
            <thead>
    
              <tr><th scope="col">Service</th><th scope="col">Region</th><th scope="col">Replicas</th></tr>
    
            </thead>
    
            <tbody>
    
              <tr><td>auth</td><td>eu</td><td data-value="3">3</td></tr>
    
              <tr><td>billing</td><td>us</td><td data-value="2">2</td></tr>
    
              <tr><td>pages</td><td>ap</td><td data-value="2">2</td></tr>
    
              <tr><td>search</td><td>eu</td><td data-value="5">5</td></tr>
    
            </tbody>
    
          </table>
    
        </sem-table>
    
        <sem-note variant="tip">Bigger data — CSV and YAML sources, a declarative join, an editable query — is the sem-data-visualizer family on the <a href="/dataviz/">data visualizer page</a>.</sem-note>
    
      </sem-enhanced-document>

render

Render view: this block wires to the SemText runtime bundle in the full example viewer (port-reference lane) — the source beside it is the same file, byte for byte.

Why this works

No payload duplication: there is no JSON beside the table to go stale — the <table> is the only copy of the data.
Extraction is in on it: the record comes back as {caption, columns[], rows[]} in authored order — the one recorded exception, stamped so the order is stable under sorting.
With scripts off the table is an ordinary, valid HTML table — the data never depended on the bundle.

The full visualizer family — sem-data-source, sem-data-join, sem-data-query — renders live on /dataviz/ ; each tag's contract is on its reference page .