Runtime fingerprintToken readout from the active provider chain.
Live DS
Runtime
Platform
Rottay
Rottay / ModernPlatform Flagship
Primary
#0A0A0ASecondary #6B6B6B
Radius
14pxxl 18px
Density
normalBorder-light cards
Accent
Badge
Compact runtime evidence across 3+ token signals.
Published DS package · Pattern Library · Rottay / modernShared route metadata for the active runtime, kept inline so the shell reads like a thin header band.
Full-featured data table with sorting, filtering, pagination, selection, and virtual scrolling
Data patterns should demonstrate density, scanning speed, and operational control without collapsing under real volume.
How to read this pageUse the showroom switchers in the sidebar to change engine and tenant. The comparison grid below keeps the active tenant and swaps engines so we can inspect the pattern instead of page-local editorial chrome.
TierPatternReusable workflow or composition contract.
GroupDataStart with sorting and filtering cues.
Best paired withCollectionHeaderUsually lands inside ListSurface.
Live preview
Compare the same pattern across engines
Sidebar tenant drives this
Data Table
This comparison is the documentation surface. If the pattern only reads well inside local chrome, we should fix the pattern or its preview runtime before teams style around it.
Preview heuristics
3 items
Compare density, action placement, and state readability before aesthetic flavor.
Judge the pattern itself, not any showroom-local framing around it.
If the pattern only works with extra chrome, the pattern or preview runtime still needs work.
Structure pairing
3 items
CollectionHeader
TableToolbar
ActiveFiltersBar
Rottay
3 live engines
Same tenant, isolated engine
Consumption
Import and usage
Treat the pattern as a reusable task contract. Keep route-specific business rules outside and use these snippets as the fast-reading baseline.
Consumption contract
Usage notes
3 items
Import from the published package rather than building route-local wrappers first.
Pass data, config, and callbacks while keeping product semantics in the consuming app.
Escalate to a surface only once the whole screen contract is stable, not just the task module.
Surface fit
3 items
ListSurface
ReportSurface
CollectionWorkspaceSurface
API surface
Props
6 rows
Data Table propsProp contracts stay readable across dark-first and light-first tenants.
6 props
2 required
4 optional
Fast readStart with required props, then scan defaults before dropping to per-row details.
Contract postureThis reference stays intentionally concise so the primitive contract remains scannable.
Engine comparisonEngine comparisonThe active tenant stays real while the same component is rendered by every engine. The wrapper stays intentionally quiet so engine differences come from the DS itself.
ClassicAnt Design
Live provider
Data patternPatternDataTable
Check scanning speed, selection, and whether the runtime is coming from the real DS export.
Identity directoryRottay
Platform user access centerDense user management needs to stay crisp, safe, and scannable under the active DS runtime.
Runtime expectationRow density, badges, and table chrome should stay readable even when Rottay pushes a darker shell.
Managed accounts3,842Across 128 active tenant environments.
MFA coverage96%Only 41 privileged accounts still exempt.
Blue River CapitalRole escalation exceeds policy baseline
Unique key accessor used for selection and row identity.
columns
ColumnConfig<T>[]
none
Column definitions controlling layout, labels, and cell rendering.
toolbar
ReactNode
none
Optional table-level controls rendered above the data rows.
className
string
none
Additional class names for product-specific composition and layout hooks.
style
CSSProperties
none
Inline overrides for one-off layout or diagnostic preview adjustments.
data
Required
T[]none
Record set rendered into the table body.
rowKey
Optional
keyof T | (item) => stringnone
Unique key accessor used for selection and row identity.
columns
Required
ColumnConfig<T>[]none
Column definitions controlling layout, labels, and cell rendering.
toolbar
Optional
ReactNodenone
Optional table-level controls rendered above the data rows.
className
Optional
stringnone
Additional class names for product-specific composition and layout hooks.
style
Optional
CSSPropertiesnone
Inline overrides for one-off layout or diagnostic preview adjustments.
Review queue7 accountsEscalated access or SSO drift needs follow-up.
Operator rosterPrivilege and tenant access inventoryThe table is the analysis layer. It should feel dense and actionable without stealing urgency from the review queue.
Risk + statusAccess review queueThis rail owns urgency. Escalations and posture drift should visually separate from the broader operator inventory.
Policy guardrailsWhat keeps this screen governance-safeRuntime switching is only valid if operator scanning, escalations, and row actions still feel trustworthy under every tenant and engine.
Privileged access reviewsAll super admins require weekly attestation and named ownership.
Dormant operator sweepAccounts inactive for 14 days are queued for deprovisioning review.
Cross-tenant driftBadge, table density, and row actions must stay readable under every runtime.
MFA coverage96%Only 41 privileged accounts still exempt.
Review queue7 accountsEscalated access or SSO drift needs follow-up.
Operator roster
Privilege and tenant access inventory
The table is the analysis layer. It should feel dense and actionable without stealing urgency from the review queue.
Risk + status
Access review queue
This rail owns urgency. Escalations and posture drift should visually separate from the broader operator inventory.
Blue River CapitalRole escalation exceeds policy baseline