Data example

This standalone example shows copyable generic data surfaces using core plus app sheet CSS plus dashboard/data CSS, with optional core/app JavaScript for the sheet trigger.

Data primitives

Copyable data bundle composition

Data classes are generic presentation primitives in the dashboard CSS bundle. Host applications own records, filtering, editing, permissions, and persistence.

Dashboard docs
Records

Toolbar and action grouping with accessible controls.

Range: currentSort: updated
Generic records with action cells
RecordStateOwnerUpdatedActions
Record alphaReadyGroup AToday
Record betaReviewGroup BYesterday
Record gammaBlockedGroup COlder
2 records selected

Data card

Cards summarize a selected record or metric without product-specific naming.

Record
Alpha
State
Ready
Owner
Group A

Secondary card

Use the same surface for totals, checkpoints, or compact record summaries.

Total
128
Updated
2 min ago

Field list

Label
Value
Long value
Readable text wraps inside the data card surface.
Status
Neutral

Record list

Lists use semantic list markup and generic hds-data-record items.

  • Record note oneList metadata and actions can remain compact.
  • Record note twoUse with cards, tables, or dashboard sections.
  • Record note threeApplications provide routes and data.
Loading dataLoading states reserve readable space while the host application fetches data.
No matching recordsEmpty states explain the next safe action.
Unable to load recordsErrors should be clear and avoid internal details.
Neutral data stateUse for waiting, selected, or informational states.

Edit sheet visual pattern

Compose existing sheet and form classes from the app bundle with the generic data edit sheet visual parts. Host apps still own data load/save behavior.

Inline preview of the same sheet panel structure for copy/paste:

Edit record

Status belongs to the host app.

Record
Alpha
State
Ready