EXAMPLE / UI
Build a table from a data view
Compare a declarative account table with the shared client and server controller surfaces.
Follow the pattern. Inspect its limits.
Explore the source walkthrough, its evidence and the choices you would make in your own application.
Start with the declarative table
The README's DataViewSpec references a sample query and declares a table view. Its initial state uses four rows per page, descending ARR sorting, a hidden notes column, and the account column pinned left.
An exploration of the inspected source; no example is executed here.
The situation.
The same sample account grid appears through ContractSpec's data-view, headless table, web primitive, and design-system layers. You can inspect how sorting, selection, expansion, loading, and empty states are represented without adopting a whole business template.
What you will learn
- Connect a table specification to a query contract.
- Express initial sorting, page size, hidden columns, and pinned columns declaratively.
- Separate a table controller mode from evidence about a real backend.
Follow the operation.
- 01
Start with the declarative table
The README's DataViewSpec references a sample query and declares a table view. Its initial state uses four rows per page, descending ARR sorting, a hidden notes column, and the account column pinned left.
- 02
Compare rendering layers
The showcase exposes client, server, DataView, web primitive, and native primitive lanes around the same account data. Inspect how each layer maps the shared table behavior.
- 03
Explore visible states
The UI source includes pinning, sorting, row expansion, simulated loading, empty state, and an interaction log. Its smoke fixture checks rendering and selected interactions.
- 04
Adapt the source contract
Replace sample account fields and the query reference with your own data contract. Establish server filtering, pagination, authorization, and performance behavior in your host application.
What the source demonstrates.
- The source includes a declarative table contract and a shared account-grid showcase.
- The inspected smoke fixture asserts key UI controls, descending sort state, expansion, and row-press logging.
- The generated registry declares an inline UI preview for data-grid-showcase.
What it does not establish.
- Server throughput or database performance.
- A live production dataset or backend integration.
- A newly verified browser session in this review; the preview registration is source evidence.
Bring it into your environment.
Use the exact source context and prerequisites below. A source walkthrough is not a verified public-package installation recipe.
- Access to the inspected source repository and a checkout at the cited revision.
- The repository's Bun workspace dependencies and required generated package exports. These instructions were inspected; the examples were not executed in this review.
Working directory: examples/data-grid-showcase
bun test src/ui/DataGridShowcase.smoke.test.tsxThe smoke source checks the table surfaces and selected interactions in a Happy DOM environment.
Test and preview source inspected; not executed here.
Read the related guide →Make the pattern your own.
- Begin with one query and one table before adopting a full template.
- Map query results to explicit field data paths.
- Test the remote data path independently from local controller interactions.
Inspect the evidence.
Reviewed 2026-10-27 · b67c376f
Pinned source links require repository access; publication and anonymous package availability were not checked for this example.
- Declared maturity
- experimental
- Catalogue registration
- Registered; deliberately not template-eligible
- Inline preview
- Registered
- Execution in this review
- Not rerun
- Production qualification
- Not assessed