DataView

Usage

items contains application data. Provide neuDataViewItem to render structured records; default rendering is not a domain-specific card. searchFields enables local matching and sortOptions names sortable fields. Omit total/currentPage for local paging; set both and handle pageChange to load a remote page. modeChange proposes the selected mode; apply it to mode. Templates replace content, not the paging engine.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

<neu-data-view
  (pageChange)="onPageChange($event)"
  [items]="items()"
  [mode]="'list'"
  (modeChange)="mode.set($event)"
  [modeLabels]="modes()"
  [loading]="false"
  [searchable]="true"
  [searchFields]="['name', 'region', 'amount']"
  [sortOptions]="sortOptions()"
  [pagination]="true"
  [pageSize]="3"
  [viewSwitcher]="true"
  [trackBy]="track"
  [viewAriaLabel]="'View mode'"
  [previousLabel]="'Previous'"
  [nextLabel]="'Next'"
  (pageChange)="record('pageChange', $event)"
  (searchChange)="record('searchChange', $event)"
  (sortChange)="record('sortChange', $event)"
  [emptyLabel]="'No projects'"
  [loadingLabel]="'Loading projects'"
  [paginationAriaLabel]="'Project pages'"
  [searchAriaLabel]="'Search projects'"
  [searchPlaceholder]="'Search projects'"
  [sortAriaLabel]="'Sort projects'"
><ng-template neuDataViewItem let-item let-index="index"
    ><article class="remaining-data-item">
      <strong>{{ item.name }}</strong
      ><span>{{ item.region }} · {{ item.amount }} €</span>
    </article></ng-template
  ></neu-data-view
>

import { signal } from '@angular/core';

export const items = signal([
  {
    "id": "atlas",
    "name": "Atlas",
    "region": "EU",
    "amount": 240
  },
  {
    "id": "birch",
    "name": "Birch",
    "region": "US",
    "amount": 180
  },
  {
    "id": "cedar",
    "name": "Cedar",
    "region": "EU",
    "amount": 420
  },
  {
    "id": "delta",
    "name": "Delta",
    "region": "US",
    "amount": 95
  },
  {
    "id": "elm",
    "name": "Elm",
    "region": "EU",
    "amount": 310
  },
  {
    "id": "fern",
    "name": "Fern",
    "region": "US",
    "amount": 160
  }
]);

export const modes = signal({
  "list": "List",
  "grid": "Grid",
  "table": "Table"
});

export const sortOptions = signal([
  {
    "value": "name",
    "label": "Name"
  },
  {
    "value": "amount",
    "label": "Amount",
    "direction": "desc"
  }
]);

export const track = () => { /* Handler in the complete example. */ };

State and events

items contains application data. Provide neuDataViewItem to render structured records; default rendering is not a domain-specific card. searchFields enables local matching and sortOptions names sortable fields. Omit total/currentPage for local paging; set both and handle pageChange to load a remote page. modeChange proposes the selected mode; apply it to mode. Templates replace content, not the paging engine.

Accessibility and keyboard

Tab reaches search, sorting, mode buttons and paginator. Enter/Space activates the buttons; custom item controls use their native behavior.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

import { NeuDataViewFooterDirective } from '@neural-ui/core/data-view';

// Public declaration (reference only)
export declare class NeuDataViewFooterDirective {
}

import { NeuDataViewFooterDirective } from '@neural-ui/core/data-view';

// Public declaration (reference only)
readonly templateRef: TemplateRef<void>;

import { NeuDataViewHeaderDirective } from '@neural-ui/core/data-view';

// Public declaration (reference only)
export declare class NeuDataViewHeaderDirective {
}

import { NeuDataViewHeaderDirective } from '@neural-ui/core/data-view';

// Public declaration (reference only)
readonly templateRef: TemplateRef<void>;

import { NeuDataViewItemDirective } from '@neural-ui/core/data-view';

// Public declaration (reference only)
export declare class NeuDataViewItemDirective {
}

import { NeuDataViewItemDirective } from '@neural-ui/core/data-view';

// Public declaration (reference only)
readonly templateRef: TemplateRef<{
    $implicit: unknown;
    index: number;
}>;

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuDataViewMode } from '@neural-ui/core/data-view';

// Public declaration (reference only)
export type NeuDataViewMode = 'list' | 'grid' | 'table';

import type { NeuDataViewPageEvent } from '@neural-ui/core/data-view';

// Public declaration (reference only)
export interface NeuDataViewPageEvent {
  page: number;
  pageSize: number;
}

import type { NeuDataViewSortDirection } from '@neural-ui/core/data-view';

// Public declaration (reference only)
export type NeuDataViewSortDirection = 'asc' | 'desc';

import type { NeuDataViewSortDirection } from '@neural-ui/core/data-view';

import type { NeuDataViewSortOption } from '@neural-ui/core/data-view';

// Public declaration (reference only)
export interface NeuDataViewSortOption {
  direction?: NeuDataViewSortDirection;
  label: string;
  value: string;
}

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Related components

Use related components when your task requires a different interaction or a composed control.

• FilterBar
• VirtualList
• Tree