DataView

Uso

items contiene los datos de aplicación. Usa neuDataViewItem para renderizar registros estructurados; el contenido por defecto no es una tarjeta de dominio. searchFields permite buscar localmente y sortOptions nombra campos ordenables. Omite total/currentPage para paginación local; asigna ambos y procesa pageChange para cargar páginas remotas. modeChange propone el modo; aplícalo a mode. Los Templates sustituyen contenido, no el motor de páginas.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

<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"
  (pageChange)="record('pageChange', $event)"
  (searchChange)="record('searchChange', $event)"
  (sortChange)="record('sortChange', $event)"
  [emptyLabel]="'Sin proyectos'"
  [loadingLabel]="'Cargando proyectos'"
  [nextLabel]="'Siguiente'"
  [paginationAriaLabel]="'Páginas de proyectos'"
  [previousLabel]="'Anterior'"
  [searchAriaLabel]="'Buscar proyectos'"
  [searchPlaceholder]="'Buscar proyectos'"
  [sortAriaLabel]="'Ordenar proyectos'"
  [viewAriaLabel]="'Modo de vista'"
><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": "Lista",
  "grid": "Cuadrícula",
  "table": "Tabla"
});

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

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

Estado y eventos

items contiene los datos de aplicación. Usa neuDataViewItem para renderizar registros estructurados; el contenido por defecto no es una tarjeta de dominio. searchFields permite buscar localmente y sortOptions nombra campos ordenables. Omite total/currentPage para paginación local; asigna ambos y procesa pageChange para cargar páginas remotas. modeChange propone el modo; aplícalo a mode. Los Templates sustituyen contenido, no el motor de páginas.

Accesibilidad y teclado

Tab alcanza búsqueda, orden, botones de modo y paginador. Intro/Espacio activa los botones; los controles personalizados conservan su comportamiento nativo.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

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

// Declaración pública (solo referencia)
export declare class NeuDataViewFooterDirective {
}

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

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<void>;

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

// Declaración pública (solo referencia)
export declare class NeuDataViewHeaderDirective {
}

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

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<void>;

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

// Declaración pública (solo referencia)
export declare class NeuDataViewItemDirective {
}

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

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<{
    $implicit: unknown;
    index: number;
}>;

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

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

// Declaración pública (solo referencia)
export type NeuDataViewMode = 'list' | 'grid' | 'table';

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

// Declaración pública (solo referencia)
export interface NeuDataViewPageEvent {
  page: number;
  pageSize: number;
}

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

// Declaración pública (solo referencia)
export type NeuDataViewSortDirection = 'asc' | 'desc';

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

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

// Declaración pública (solo referencia)
export interface NeuDataViewSortOption {
  direction?: NeuDataViewSortDirection;
  label: string;
  value: string;
}

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.

• FilterBar
• VirtualList
• Tree