DataTablePage

Composes page header, app actions, saved-view controls, table-owned query and selection chrome, and explicit regional states.@gemologic/sheen-patterns · application

Playground

This example has no scalar controls. Its validated source remains interactive below.

Accepted table region

<DataTablePage title="Accounts" toolbarLabel="Account actions" loadingFallback={<div>Loading accounts</div>}><section aria-label="Accounts table">Accepted table region</section></DataTablePage>

Variant matrix

Continuous client table page

Accepted table region

Anatomy

Package

@gemologic/sheen-patterns

Source

packages/patterns/src/DataTablePage.tsx

Tokens

--sheen-color-bg
--sheen-color-border
--sheen-color-danger-fg
--sheen-space-block-sm
--sheen-space-inline-sm

Accessibility

Role: region, heading, toolbar, form, alertKeyboard: Tab, Shift+Tab, ArrowLeft, ArrowRight, Home, End, Enter, Space, Escape

Do

Keep saved-view persistence and state application in the app adapter.
Let the child DataTable own search, filters, result counts, columns, and export controls.
Define DataTable actions once so row context and selection controls cannot drift.
Use refresh to retain accepted table DOM; use permission-denied to remove unauthorized content immediately.

Do not

Do not mirror DataTable query or selection controls into the page toolbar.
Do not show a cold fallback during background refresh.
Do not use saved-view records from localStorage as an implicit per-user persistence layer.

Generated props

Name	Type	Default	Description
`title` *	`string`	—	Visible page title and accessible loading-region label.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	Semantic heading level for the page title.
`breadcrumb`	`JSX.Element`	—	Optional breadcrumb rendered above the title.
`headerActions`	`JSX.Element`	—	Optional page-level actions beside the title.
`tabs`	`JSX.Element`	—	Optional page tabs below the title row.
`toolbarLabel` *	`string`	—	Required accessible name for the app-action toolbar.
`toolbarGroups`	`readonly ToolbarGroup[]`	—	Stable app action groups; whole trailing groups overflow together.
`views`	`DataTablePageViews`	—	Controlled app-backed saved-view records, selection, draft name, pending/error state, and operation callbacks.
`state`	`DataTablePageState`	`ready`	Ready content or an authorization-safe not-found, server-error, or permission-denied replacement.
`loadingPhase`	`"idle" \| "cold" \| "refresh"`	`idle`	Idle, delayed cold fallback, or retained-content refresh presentation.
`loadingFallback` *	`JSX.Element`	—	Layout-matched cold-load placeholder reserved in server markup.
`errorTitle`	`string`	—	Optional localized title overriding the selected regional error default.
`errorDescription`	`string`	—	Optional localized regional error detail.
`onRetry`	`() => void \| Promise<void>`	—	Optional regional error retry action.
`status`	`JSX.Element`	—	Optional page status/footer content.
`children` *	`JSX.Element`	—	The DataTable owner. Its actions prop owns row, context, and selection action behavior.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.