Table
Plans, prices, endpoints: anything compared across columns. On a phone each row becomes a card.
openvibe-shared/kitJSON
Build it
kit.table({ caption: 'Plans', columns: [{ key: 'plan', label: 'Plan', primary: true }, { key: 'price', label: 'Price', fmt: 'money' }, { key: 'streams', label: 'Streams', fmt: 'int' }, { key: 'clips', label: 'Clips kept' }], rows: [{ plan: 'Free', price: 0, streams: 1, clips: '30 days' }, { plan: 'Creator', price: 6, streams: 3, clips: '1 year' }, { plan: 'Studio', price: 18, streams: 10, clips: 'Forever' }] })Props
id- any?
rows- list?
empty- string?
label- string?
stack- boolean?
caption- string?
columns- list?
Anatomy
- tablePlans, prices, endpoints: anything compared across columns. On a phone each row becomes a card.
Behaviour and access
- Keyboard
- Standard focus order
- Outside tap
- Leaves it open
- Scroll
- The page still scrolls
- Reduced motion
- Remove movement; keep the state change.
- Name
- Table
- Target
- At least 44 × 44 px on touch
- Focus
- Visible keyboard focus; follow reading order
States
- default
- focused
Tokens
color.accent.basecolor.text.primary
Android · Jetpack Compose
Material 3 Table
Use Table in Jetpack Compose with the shared tokens.
iOS · SwiftUI
Use Table in SwiftUI with the shared tokens.
Markup
Default
<div class="ovk-table-wrap ovk-table--stack" role="region" tabindex="0"><table class="ovk-table"><caption>Plans</caption><thead><tr><th scope="col" class="is-primary">Plan</th><th scope="col">Price</th><th scope="col">Streams</th><th scope="col">Clips kept</th></tr></thead><tbody><tr><th scope="row" class="is-primary" data-label="Plan">Free</th><td data-label="Price">0</td><td data-label="Streams">1</td><td data-label="Clips kept">30 days</td></tr><tr><th scope="row" class="is-primary" data-label="Plan">Creator</th><td data-label="Price">6</td><td data-label="Streams">3</td><td data-label="Clips kept">1 year</td></tr><tr><th scope="row" class="is-primary" data-label="Plan">Studio</th><td data-label="Price">18</td><td data-label="Streams">10</td><td data-label="Clips kept">Forever</td></tr></tbody></table></div>