ContractSpec Sandbox
Workspace
Template
Environment
Loading preview...
Canonical example
One example, five lanes: contract definition, headless controller, raw web primitive, native-first primitive, and the composed design-system surface.
Contract layer
@lssm-tech/lib.contracts-spec
Owns the declarative DataViewSpec contract for the account grid, including execution mode, selection, pinning, resizing, expansion, and initial state.
Native primitive
@lssm-tech/lib.ui-kit
Provides the native-first primitive table renderer. The same controller and row model can be rendered inside Expo and React Native without changing the contract layer.
Web primitive
@lssm-tech/lib.ui-kit-web
Provides the raw web primitive table renderer with pagination, visibility, pinning, resizing, selection, expansion, loading, and empty states.
Composed surface
@lssm-tech/lib.design-system
Wraps the web primitive into an opinionated card surface that adds title, description, header actions, and canonical product-facing presentation.
client + server execution
single + multiple selection
sorting
pagination
column visibility
column resizing
left/right pinning
row expansion
loading + empty states
row press logs
DataView adapter
Interaction Log
Row presses and control actions are logged here so the demo shows state changes instead of only static screenshots.
No interactions yet. Click a row or one of the capability controls.
Client mode
Selected 0
Account width 240px
Pin state none
| Quartz Health | Samir Gupta | Healthy | North America | $275,000 | 9/10/2026 | 3/18/2026, 1:25:00 PM | ||
| Northwind Cloud | Avery Chen | Healthy | North America | $240,000 | 7/12/2026 | 3/19/2026, 9:30:00 AM | ||
| Helix Freight | Nora Silva | Healthy | APAC | $187,000 | 8/1/2026 | 3/18/2026, 8:10:00 AM | ||
| Aster Labs | Mina Patel | Attention | Europe | $165,000 | 5/18/2026 | 3/17/2026, 4:15:00 PM |