DATABETA

DataView

Present one immutable collection as a polished list or responsive grid with typed templates, controlled Signals, deterministic local state and remote request ownership.

Typed templatesLocal + remoteHeadless ready

GET STARTED

Import

Import the canonical component and only the standalone template directives used by the view.

import {
  NeuralDataView,
  NeuralDataViewListItemTemplate,
  NeuralDataViewGridItemTemplate,
} from '@neural-ng/core/data-view';

@Component({ imports: [NeuralDataView, NeuralDataViewListItemTemplate,
  NeuralDataViewGridItemTemplate] })

List and grid from one collection

The header composes NeuralSelect and NeuralButton controls. DataView owns presentation, stable sorting and current-page slicing.

Product catalog8 agent-ready products

Compute

Agent Hub

A command center for autonomous workflows.

$1,149In stock

Office

Context Board

Keep intent visible to every collaborator.

$199In stock

Accessories

Headless Clock

Timezone-safe focus for distributed agents.

$89In stock

Lighting

Hydration Lamp

Adaptive light with instant startup.

$129Low stock

Audio

Neural Speaker

Clear spatial sound for focused teams.

$249In stock

Office

Signal Desk

A calm workspace for reactive products.

$899In stock

Deterministic local state

Local mode clones before sorting, supports nested paths such as metadata.category, preserves equal-value order and clamps paging without mutating source data.

Controlled models

layout, first, rows and sort state remain writable Signals.

Stable sorting

Equal values retain their source order.

Serializable state

Every semantic event carries the complete state snapshot.

Remote request ownership

Remote mode renders the page exactly as supplied and emits state for the application to fetch. It never sorts or slices server data.

Signal DeskOffice

Hydration LampLighting

Standalone ChairOffice

Request 1 · records 1–3 of 80

Loading and empty states

Busy content is replaced by stable skeletons or a typed loading template. Empty content can be fully owned without losing its label context.

No matching productsTry changing the current filters.

Synchronizing remote productsTyped loading content replaces fallback skeletons.

Six typed template surfaces

List and grid contexts infer T from their bound collection. State templates receive the configured label; header and footer remain ordinary composition surfaces.

<ng-template neuralDataViewHeader>...</ng-template>
<ng-template [neuralDataViewListItem]="products"
  let-product let-index="originalIndex" let-first="first">...</ng-template>
<ng-template [neuralDataViewGridItem]="products" let-product>...</ng-template>
<ng-template neuralDataViewLoading let-label>...</ng-template>
<ng-template neuralDataViewEmpty let-label>...</ng-template>
<ng-template neuralDataViewFooter>...</ng-template>

Identity and custom sorting

trackBy keeps DOM identity stable. sortComparator replaces value comparison while DataView still owns stable tie-breaking and sort direction.

readonly productTrackBy = (product: Product) => product.id;

readonly domainSort: NeuralDataViewSortComparator<Product> =
  (a, b, field, order) => compareDomainValues(a, b, field, order);

Unstyled and typed class slots

Headless mode removes every NeuralNg visual class while semantic structure, state, typed contexts and Paginator behavior remain.

Consumer-owned catalog

1Signal DeskOffice

2Hydration LampLighting

3Standalone ChairOffice

Responsibility boundaries

DataView owns

Presentation, layout, paging, sorting, templates, loading/empty state and accessible collection structure.

Application owns

Fetching, filtering, selection, editing and business actions. Use VirtualScroller for windowing.

ACCESSIBILITY

Semantic collection presentation

DataView provides structure and state announcements while interaction remains owned by the controls composed around or inside each item.

Region naming

The root exposes role="region". Set a concise ariaLabel that distinguishes the collection from other regions.

Collection semantics

Both visual layouts retain role="list" and native article items with role="listitem". Grid is visual, not an interactive ARIA grid.

Interactive controls

Layout, sort and item actions must be real controls with names and state such as aria-pressed. DataView does not make an entire item clickable implicitly.

Reduced motion

Skeleton animation and item hover movement stop under prefers-reduced-motion: reduce.

PUBLIC CONTRACT

DataView API

Inputs and controlled models

Name	Type	Default	Purpose
value	readonly T[]	[]	Immutable source or current remote page.
layout	'list' \| 'grid'	'list'	Controlled visual layout model.
first	number	0	Controlled first record offset model.
rows	number	6	Controlled page-size model; normalized to at least one.
sortField	string	''	Controlled property path model; nested paths work.
sortOrder	1 \| -1	1	Controlled ascending or descending model.
dataMode	'local' \| 'remote'	'local'	Ownership of sorting and paging.
totalRecords	number	0	Full remote result count.
paginator	boolean	true	Composes Neural Paginator.
pageSizeOptions	readonly number[]	[6, 12, 24]	Paginator sizes.
loading	boolean	false	Replaces content and exposes busy state.
loadingRows	number	6	Fallback skeleton count.
emptyMessage	string	'No records found'	Empty state label/context.
loadingMessage	string	'Loading records'	Accessible loading label/context.
ariaLabel	string	'Data view'	Accessible region name.
unstyled	boolean	false	Removes NeuralNg visual classes.
dataViewClass	string	''	Additive root class.
classes	NeuralDataViewClasses	{}	Typed additive slot classes.
trackBy	NeuralDataViewTrackBy<T> \| null	null	Stable item identity.
sortComparator	NeuralDataViewSortComparator<T> \| null	null	Domain comparator.

Outputs

Name	Payload	Meaning
layoutChange	NeuralDataViewLayout	Generated by layout model.
firstChange	number	Generated by first model.
rowsChange	number	Generated by rows model.
sortFieldChange	string	Generated by sortField model.
sortOrderChange	1 \| -1	Generated by sortOrder model.
stateChange	NeuralDataViewStateChange	Unified page/layout/sort event.
pageChange	NeuralDataViewPageEvent	Semantic paginator event.
layoutChanged	NeuralDataViewLayoutChange	Layout event with previous value.
sortChange	NeuralDataViewSortChange	Sort event with previous field/order.

Template directives

neuralDataViewListItem

NeuralDataViewItemTemplateContext<T>

neuralDataViewGridItem

NeuralDataViewItemTemplateContext<T>

neuralDataViewHeader

void

neuralDataViewFooter

void

neuralDataViewEmpty

NeuralDataViewStateTemplateContext

neuralDataViewLoading

NeuralDataViewStateTemplateContext

Typed class slots

rootheadercontentlistgriditememptyloadingskeletonpaginatorfooter

Types and helper

NeuralDataViewLayout

'list' | 'grid'

NeuralDataViewDataMode

'local' | 'remote'

NeuralDataViewSortOrder

1 | -1

NeuralDataViewState

Serializable controlled state snapshot.

NeuralDataViewStateChange

State plus reason: 'page' | 'layout' | 'sort'.

NeuralDataViewItemTemplateContext<T>

Typed item and positional context.

compareDataViewValues

Public null-safe default comparison helper.

DESIGN TOKENS

DataView visual contract

Component variables resolve after semantic theme tokens and before additive consumer classes.

Root, header and footer

--neural-data-view-color

Component foreground color.

--neural-data-view-background

Component background surface.

--neural-data-view-border

Component border shorthand.

--neural-data-view-radius

Component corner radius.

--neural-data-view-shadow

Component box shadow.

--neural-data-view-header-padding

Header internal spacing.

--neural-data-view-header-background

Header background surface.

--neural-data-view-header-border

Header border shorthand.

--neural-data-view-footer-padding

Footer internal spacing.

--neural-data-view-footer-background

Footer background surface.

--neural-data-view-footer-border

Footer border shorthand.

Layout and items

--neural-data-view-content-background

Content background surface.

--neural-data-view-grid-min

Minimum item width used by the responsive grid layout.

--neural-data-view-grid-gap

Spacing between grid items.

--neural-data-view-grid-padding

Grid internal spacing.

--neural-data-view-list-divider

Border drawn between adjacent items in list layout.

--neural-data-view-list-item-padding

List item internal spacing.

--neural-data-view-item-background

Item background surface.

--neural-data-view-item-border

Item border shorthand.

--neural-data-view-item-radius

Item corner radius.

--neural-data-view-item-shadow

Item box shadow.

--neural-data-view-item-hover-border

Item hover border shorthand.

--neural-data-view-item-hover-shadow

Item hover box shadow.

Loading and empty states

--neural-data-view-empty-min-height

Empty minimum block size.

--neural-data-view-empty-gap

Spacing between empty items.

--neural-data-view-empty-padding

Empty internal spacing.

--neural-data-view-empty-color

Empty foreground color.

--neural-data-view-empty-icon-color

Empty icon foreground color.

--neural-data-view-loading-gap

Spacing between loading items.

--neural-data-view-loading-padding

Loading internal spacing.

--neural-data-view-skeleton-min-height

Skeleton minimum block size.

--neural-data-view-skeleton-background

Skeleton background surface.

--neural-data-view-skeleton-radius

Skeleton corner radius.

--neural-data-view-skeleton-duration

Skeleton animation duration.

Paginator wrapper

--neural-data-view-paginator-padding

Paginator internal spacing.

--neural-data-view-paginator-border

Paginator border shorthand.

Primary

Surface

DataView

Import

List and grid from one collection

Agent Hub

Context Board

Headless Clock

Hydration Lamp

Neural Speaker

Signal Desk

Deterministic local state

Remote request ownership

Loading and empty states

Six typed template surfaces

Identity and custom sorting

Unstyled and typed class slots

Responsibility boundaries

Semantic collection presentation

Region naming

Collection semantics

Interactive controls

Reduced motion

DataView API

Inputs and controlled models

Outputs

Template directives

Typed class slots

Types and helper

DataView visual contract

Root, header and footer

Layout and items

Loading and empty states

Paginator wrapper