Data display · core

Actionable data grid

data.data-grid

Actionable data grid: A structured display for reading, comparing, or inspecting information.

actionable data gridthe structured information blockthe data display

States4

Touch targetDisplay

Evidence4

Introduced by1 kits

Visual specimen

Same contract. Every kit voice.

Actionable data grid
Name	Status	Updated
Foundation	Ready	1h
Components	Ready	2h
Evidence	Ready	3h

MAVAN renderingdefault

Translation table

What code calls it.

Webrole=gridThe closest native or standardized web primitive.direct

ARIAgridThe primary accessibility role or state pattern.direct

SwiftUICustom View compositionSwiftUI has no single direct equivalent; compose and name the behavior explicitly.approximation

AppKitNSCollectionView or NSTableViewThe nearest named AppKit API.direct

Anatomy

Every part, named.

1Data container
2Primary values
3Labels or headers
4Grouping or separators
5Empty and error treatment

Often confused with

Similar shape. Different contract.

Listdata.list

Shares a visual family, but has a different role, state model, or interaction contract.

Tabledata.table

Shares a visual family, but has a different role, state model, or interaction contract.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Actionable data grid component (data.data-grid). Actionable data grid: A structured display for reading, comparing, or inspecting information. Support these states: default, loading, empty, error. Use semantic design tokens rather than raw visual values. Preserve a minimum appropriatepx touch target where interactive. Provide and verify: implementation, state-matrix, responsive, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.

Studio contract

What must be proven.

Required states

default · loading · empty · error

Required evidence

implementation · state-matrix · responsive · reduced-motion

Source union

jade