Table | Neural UI v2

Mostrar datos

Pasa los registros mediante data, describe los campos visibles con columns y aporta una función rowKey estable. La clave identifica un registro entre actualizaciones; no uses su posición actual. Este ejemplo aporta tres pedidos de clientes y la definición de sus columnas.

Usa Table para registros planos. Elige TreeTable si las filas tienen relaciones padre–hijo, o Tree si la jerarquía no necesita columnas.

Cliente	Importe (€)	Región
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Configurador

Prueba apariencia, selección, ordenación, búsqueda global, filtros de columna, paginación, edición, detalles de fila y acciones de columna. Cada opción actualiza la vista previa y su código. Despliega los grupos para explorar sus controles. Las opciones que dependen de otra función se habilitan al activarla.

Vista previa

6 filas; página 1; 0 seleccionadas; orden: sin ordenar


Atlas	240	EU
Birch	180	US
Cedar	420	EU

Código de tu configuración

Este fragmento se actualiza al cambiar las opciones. La pestaña Código incluye el componente completo, los datos y los templates.

Opciones avanzadas · 1

<neu-table
  [data]="records()"
  [columns]="columns()"
  [rowKey]="rowKey"
  [appearance]='{
    "density": "normal",
    "borders": "rows",
    "striped": false,
    "stickyHeader": false,
    "responsive": "contained-scroll"
  }'
  [selectionOptions]='{
    "mode": "none"
  }'
  [sortOptions]='{
    "mode": "single",
    "removable": true,
    "defaultDirection": "asc",
    "resetPageOnChange": true
  }'
  [filterOptions]='{
    "surfaces": [],
    "globalFields": [],
    "predicates": {},
    "debounceMs": 0,
    "commit": "immediate"
  }'
  [paginationOptions]='{
    "enabled": true,
    "pageSizeOptions": [
      3,
      6,
      10
    ],
    "position": "bottom",
    "report": "range",
    "showPageJump": false
  }'
  [columnOptions]='{
    "reorderable": false,
    "resizable": false,
    "hideable": false,
    "pinnable": false
  }'
  [editingOptions]='{
    "mode": "none",
    "activation": "click",
    "commitOnBlur": false
  }'
  [expansionOptions]='{
    "enabled": false,
    "toggleOnRowClick": false
  }'
  [interactionOptions]='{
    "navigation": "native",
    "wrapFocus": false,
    "announceChanges": true
  }'
  [query]="query()"
  (queryChange)="query.set($event)"
  [selection]="selection()"
  (selectionChange)="selection.set($event.next)"
  [layout]="layout()"
  (layoutChange)="layout.set($event.next)"
  [editState]="editState()"
  (editStateChange)="editState.set($event.next)"
  (editCommit)="save($event)"
  [expandedKeys]="expanded()"
  (expandedKeysChange)="expanded.set($event.next)"
>
  <!-- Incluye los templates de editor y detalle del ejemplo completo. -->
</neu-table>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

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

export const records = signal([
  {
    "id": 101,
    "customer": "Atlas",
    "amount": 240,
    "region": "EU"
  },
  {
    "id": 102,
    "customer": "Birch",
    "amount": 180,
    "region": "US"
  },
  {
    "id": 103,
    "customer": "Cedar",
    "amount": 420,
    "region": "EU"
  },
  {
    "id": 104,
    "customer": "Delta",
    "amount": 95,
    "region": "US"
  },
  {
    "id": 105,
    "customer": "Elm",
    "amount": 310,
    "region": "EU"
  },
  {
    "id": 106,
    "customer": "Fern",
    "amount": 160,
    "region": "US"
  }
]);

export const columns = signal([
  {
    "id": "customer",
    "field": "customer",
    "header": "Cliente",
    "minWidth": "14rem",
    "sort": {
      "field": "customer"
    }
  },
  {
    "id": "amount",
    "field": "amount",
    "header": "Importe (€)",
    "minWidth": "10rem",
    "sort": {
      "field": "amount"
    }
  },
  {
    "id": "region",
    "field": "region",
    "header": "Región",
    "minWidth": "10rem",
    "sort": {
      "field": "region"
    }
  }
]);

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

export const query = signal({
  "page": 0,
  "pageSize": 3,
  "search": "",
  "sort": [],
  "filters": null
});

export const selection = signal({
  "kind": "keys",
  "keys": []
});

export const layout = signal({
  "order": [],
  "hidden": [],
  "widths": {},
  "pinnedStart": [],
  "pinnedEnd": []
});

export const editState = signal({
  "kind": "none"
});

export const expanded = signal([]);

Inputs de datos, callbacks y configuración estructurada

Estos inputs requieren un modelo o función, no un checkbox. Modifica el campo del mismo nombre en el componente de Código y enlázalo al template; los datos que ya usa esta vista previa se muestran en el estado anterior.

data · readonly T[]

En Código: define data con este tipo y utiliza [data]="data" (o data() si es una signal).

grouping · NeuTableGroupingState<F> | null

En Código: define grouping con este tipo y utiliza [grouping]="grouping" (o grouping() si es una signal).

groupingOptions · NeuTableGroupingOptions<T, F>

En Código: define groupingOptions con este tipo y utiliza [groupingOptions]="groupingOptions" (o groupingOptions() si es una signal).

labels · NeuTableLabels

En Código: define labels con este tipo y utiliza [labels]="labels" (o labels() si es una signal).

metadata · NeuTableMetadata

En Código: define metadata con este tipo y utiliza [metadata]="metadata" (o metadata() si es una signal).

rowKey · NeuRowKey<T, K>

En Código: define rowKey con este tipo y utiliza [rowKey]="rowKey" (o rowKey() si es una signal).

rowOptions · NeuTableRowOptions<T, K>

En Código: define rowOptions con este tipo y utiliza [rowOptions]="rowOptions" (o rowOptions() si es una signal).

rowTrackBy · NeuRowTrackBy<T> | undefined

En Código: define rowTrackBy con este tipo y utiliza [rowTrackBy]="rowTrackBy" (o rowTrackBy() si es una signal).

virtualizationOptions · NeuTableVirtualizationOptions

En Código: define virtualizationOptions con este tipo y utiliza [virtualizationOptions]="virtualizationOptions" (o virtualizationOptions() si es una signal).

Ejemplos por función

Explora una función cada vez. Cada ejemplo tiene su propio estado y código completo. La función seleccionada queda en la URL para compartirla o volver a ella directamente.

Selección

Activa la selección con selectionOptions y aporta las claves seleccionadas mediante selection. selectionChange propone next; al aplicarlo se actualizan las casillas. El componente no sustituye tu input.

Este ejemplo selecciona solo registros cargados. Usa la selección all-matching únicamente cuando tu aplicación pueda conservar el ámbito de consulta y las claves excluidas entre páginas del servidor.

Cliente	Importe (€)	Región
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Identificadores seleccionados: —

Accesibilidad y teclado

Core aporta la estructura de tabla y los controles de las funciones activadas. Tu aplicación aporta cabeceras comprensibles, contenido útil y nombres para los controles de las plantillas. Mantén accesible por teclado el contenido interactivo y no comuniques selección o errores solo mediante color.

Usa focusCell cuando la navegación de tu aplicación necesite una celda renderizada concreta; comprueba su resultado booleano. scrollTo puede llevar una fila al área visible. Prueba los editores personalizados, detalles de fila y mensajes de carga dentro del recorrido de teclado de tu aplicación.

Tecla	Acción
`Tab / Shift+Tab`	Recorre los controles habilitados y el contenido interactivo de las plantillas.
`Enter / Space`	Activa el control nativo enfocado, por ejemplo de ordenación o expansión.
`Enter / Escape`	En el editor del ejemplo, confirma o cancela el borrador.

API

Los inputs configuran la tabla y aportan el estado de la aplicación. Los outputs de cambio proponen actualizaciones; no son modelos bidireccionales. Despliega las interfaces referenciadas para consultar sus opciones y datos de eventos. Los métodos públicos actúan sobre la instancia actual; no sustituyen los datos ni realizan peticiones de red.

Inputs

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

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`appearance`	`NeuTableAppearance`	`{ density: 'normal', borders: 'rows', striped: false, stickyHeader: false, responsive: 'contained-scroll', }`	`[appearance]`	Densidad, bordes, filas alternas, cabecera fija y disposición responsive desplazable o apilada.
`columnOptions`	`NeuTableColumnOptions`	`{}`	`[columnOptions]`	Activa el redimensionado, reordenado, ocultación o fijación de columnas. Todos los controles están desactivados inicialmente. Aplica layoutChange.next a layout para aceptar los cambios.
`columns`	`readonly NeuTableColumn<T, F>[]`	`[]`	`[columns]`	Identificadores, cabeceras, campos y descriptores opcionales de ordenación, filtrado o edición de columnas.
`data`	`readonly T[]`	`[]`	`[data]`	Registros que se mostrarán. En modo remoto aporta las filas de la respuesta, no un conjunto que se suponga completo.
`dataMode`	`NeuTableDataMode`	`'client'`	`[dataMode]`	client procesa los registros cargados; remote delega su carga en la aplicación.
`editingOptions`	`NeuTableEditingOptions<T, K, F>`	`{ mode: 'none' }`	`[editingOptions]`	Modo de edición, gesto de activación, validación opcional y confirmación al perder el foco.
`editState`	`NeuTableEditState<K>`	`{ kind: 'none', }`	`[editState]`	Sesión aplicada de edición de celda o fila, o kind none.
`expandedKeys`	`readonly K[]`	`[]`	`[expandedKeys]`	Claves aplicadas cuyas regiones de detalle están abiertas.
`expansionOptions`	`NeuTableExpansionOptions<T>`	`{ enabled: false, toggleOnRowClick: false, }`	`[expansionOptions]`	Activa los detalles, limita las filas expandibles y permite alternarlos al pulsar la fila.
`filterOptions`	`NeuTableFilterOptions<T, F>`	`{ surfaces: [], globalFields: [], predicates: {}, debounceMs: 0, commit: 'immediate', }`	`[filterOptions]`	Superficies de filtro, campos globales, predicados personalizados, retardo y estrategia de aplicación.
`grouping`	`NeuTableGroupingState<F> \| null`	`null`	`[grouping]`	Campos de agrupación e identificadores de grupos abiertos aplicados; null desactiva la agrupación.
`groupingOptions`	`NeuTableGroupingOptions<T, F>`	`{ mode: 'subheader', scope: 'loaded', }`	`[groupingOptions]`	Modo de presentación de grupos cargados y funciones opcionales de valor y agregado.
`interactionOptions`	`NeuTableInteractionOptions`	`{ navigation: 'native', wrapFocus: false, announceChanges: false, }`	`[interactionOptions]`	Navegación de teclado nativa, por filas o celdas, retorno circular del foco y anuncios de cambios.
`labels`	`NeuTableLabels`	`{ ariaLabel: 'Data table', empty: 'No data', loading: 'Loading', error: 'Unable to load data', retry: 'Retry', selection: 'Selection', pagination: 'Pagination', }`	`[labels]`	Mensajes localizados de controles y estados de la tabla.
`layout`	`NeuTableLayoutState`	`{ order: [], hidden: [], widths: {}, pinnedStart: [], pinnedEnd: [], }`	`[layout]`	Orden, visibilidad, anchos y fijación inicial/final de columnas aplicados.
`metadata`	`NeuTableMetadata`	`{ totalItems: null, loading: false, error: null, queryRevision: 0, appliedRequestId: null, }`	`[metadata]`	Total remoto, estado de carga/error e identidad de la respuesta (queryRevision y appliedRequestId).
`paginationOptions`	`NeuTablePaginationOptions`	`{ enabled: false, pageSizeOptions: [], position: 'bottom', report: 'none', showPageJump: false, }`	`[paginationOptions]`	Activa y coloca la paginación, elige tamaños de página y el resumen visible.
`query`	`NeuTableQuery<F>`	`{ page: 0, pageSize: 25, search: '', sort: [], filters: null, }`	`[query]`	Página, tamaño, búsqueda, ordenación y expresión de filtro aplicados. Aplica queryChange para aceptar cambios.
`rowKey`	`NeuRowKey<T, K>`	Obligatorio	`[rowKey]`	Función obligatoria que devuelve una clave única y estable para cada registro.
`rowOptions`	`NeuTableRowOptions<T, K>`	`{ reorderable: false, }`	`[rowOptions]`	Estado deshabilitado, clases, fijación y disponibilidad de reordenación de filas.
`rowTrackBy`	`NeuRowTrackBy<T> \| undefined`	Sin valor por defecto	`[rowTrackBy]`	Función opcional de identidad de filas para Angular; no sustituye a rowKey como identidad del estado.
`selection`	`NeuTableSelection<K, F>`	`{ kind: 'keys', keys: [], }`	`[selection]`	Claves seleccionadas aplicadas o ámbito all-matching con exclusiones.
`selectionOptions`	`NeuTableSelectionOptions<T>`	`{ mode: 'none' }`	`[selectionOptions]`	Modo e indicadores de selección, comportamiento al pulsar filas, modificadores, intervalos y ámbito de seleccionar todo.
`sortOptions`	`NeuTableSortOptions`	`{ mode: 'single', removable: true, defaultDirection: 'asc', resetPageOnChange: true, }`	`[sortOptions]`	Ordenación simple o múltiple, dirección inicial, eliminación y reinicio de página.
`virtualizationOptions`	`NeuTableVirtualizationOptions`	`{ enabled: false }`	`[virtualizationOptions]`	Activa filas virtuales de altura fija con itemSize y overscan; las solicitudes remotas pueden usar requestStep.

Outputs

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

Nombre	Valor emitido	Uso en el template	Descripción
`dataRequest`	`NeuTableDataRequest<F>`	`(dataRequest)="onDataRequest($event)"`	Solicita una carga a la aplicación con consulta, revisiones, identificador e intervalo opcional.
`editCancel`	`NeuTableEditCancel<T, K>`	`(editCancel)="onEditCancel($event)"`	Informa de la cancelación de una edición; no guardes su borrador.
`editCommit`	`NeuTableEditCommit<T, K, F>`	`(editCommit)="onEditCommit($event)"`	Se emite al guardar una edición. Contiene key (fila) y changes (campo y nuevo valor). Valida los cambios y aplícalos a data en tu función; Table no modifica ni guarda tus registros.
`editStateChange`	`NeuTableEditChange<K>`	`(editStateChange)="onEditStateChange($event)"`	Emite next al iniciar o terminar una edición. Actualiza editState con $event.next para abrir o cerrar el editor.
`expandedKeysChange`	`NeuTableExpandedKeysChange<K>`	`(expandedKeysChange)="onExpandedKeysChange($event)"`	Emite next con las claves de los detalles abiertos y la fila modificada. Actualiza expandedKeys con $event.next.
`exportRequest`	`NeuTableExportRequest<F>`	`(exportRequest)="onExportRequest($event)"`	Solicita una exportación a la aplicación cuando no se puede generar con los datos disponibles.
`featureError`	`NeuTableFeatureError`	`(featureError)="onFeatureError($event)"`	Informa de la función que ha fallado, su causa y si es posible recuperarse.
`groupingChange`	`NeuTableGroupingChange<F>`	`(groupingChange)="onGroupingChange($event)"`	Emite next al abrir o cerrar un grupo. Actualiza grouping con $event.next para conservar su estado.
`layoutChange`	`NeuTableLayoutChange`	`(layoutChange)="onLayoutChange($event)"`	Emite next con el orden, anchos, visibilidad y fijación de columnas. Actualiza layout con $event.next.
`queryChange`	`NeuTableQuery<F>`	`(queryChange)="onQueryChange($event)"`	Emite la consulta completa al cambiar página, búsqueda, ordenación o filtros. Actualiza query con $event: query.set($event).
`rangeChange`	`NeuTableRangeChange`	`(rangeChange)="onRangeChange($event)"`	Informa de los intervalos virtuales visibles/renderizados y la causa del cambio.
`rowAction`	`NeuTableRowAction<T, K>`	`(rowAction)="onRowAction($event)"`	Informa de la activación de una acción de fila con su registro y clave.
`rowReorder`	`NeuTableRowMove<K>`	`(rowReorder)="onRowReorder($event)"`	Propone mover una fila. Tu aplicación cambia el orden de los registros tras aceptarlo.
`selectionChange`	`NeuTableSelectionChange<T, K, F>`	`(selectionChange)="onSelectionChange($event)"`	Emite next con la nueva selección, las claves añadidas o eliminadas y el origen. Actualiza selection con $event.next: selection.set($event.next).

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
`NeuTableCaptionDirective` Encima de la tabla Ver ejemplo	Directiva pública de template Un título identifica los datos.	`ng-template[neuTableCaption]` Contexto utilizado: `—`
`NeuTableCellDirective` Celda de datos Ver ejemplo	Directiva pública de template Los clientes o las horas planificadas usan tu presentación.	`ng-template[neuTableCell]` Contexto utilizado: `$implicit`
`NeuTableEditorDirective` Editor personalizado de celda Ver ejemplo	Directiva pública de template Pulsa el lápiz de la fila, edita el cliente y guarda o cancela desde sus acciones.	`ng-template[neuTableEditor]` Contexto utilizado: `valueSignal, setValue, commit, cancel, errors`
`NeuTableEmptyDirective` Área sin datos Ver ejemplo	Directiva pública de template Elige Vacío en el ejemplo para ver el mensaje.	`ng-template[neuTableEmpty]` Contexto utilizado: `—`
`NeuTableErrorDirective` Área de error Ver ejemplo	Directiva pública de template Elige Error y pulsa Reintentar para volver a solicitar los datos.	`ng-template[neuTableError]` Contexto utilizado: `retry`
`NeuTableFilterDirective` Filtro de columna en una fila o menú Ver ejemplo	Directiva pública de template Escribe un cliente para filtrar las filas. Limpiar las recupera; apply y clear proponen queryChange, que la aplicación acepta.	`ng-template[neuTableFilter]` Contexto utilizado: `column, sort, value, rule, apply(value, rule?), clear()`
`NeuTableFooterDirective` Pie de columna Ver ejemplo	Directiva pública de template Una etiqueta aparece bajo los datos de la columna indicada.	`ng-template[neuTableFooter]` Contexto utilizado: `—`
`NeuTableGroupFooterDirective` Después de cada grupo Ver ejemplo	Directiva pública de template El pie de grupo cuenta sus registros.	`ng-template[neuTableGroupFooter]` Contexto utilizado: `rows`
`NeuTableGroupHeaderDirective` Antes de cada grupo Ver ejemplo	Directiva pública de template Activa la agrupación para ver la región y el número de pedidos.	`ng-template[neuTableGroupHeader]` Contexto utilizado: `value, rows`
`NeuTableHeaderDirective` Cabecera de columna Ver ejemplo	Directiva pública de template La cabecera usa el nombre de la columna con contenido personalizado.	`ng-template[neuTableHeader]` Contexto utilizado: `column`
`NeuTableLoadingDirective` Área de carga Ver ejemplo	Directiva pública de template Elige Carga para mostrar un mensaje de estado.	`ng-template[neuTableLoading]` Contexto utilizado: `—`
`NeuTablePaginatorDirective` Paginador superior/inferior activo Ver ejemplo	Directiva pública de template Anterior y Siguiente usan la página aplicada y el total filtrado. page empieza en cero; total y pageCount pueden ser null en modo remoto. Las acciones proponen queryChange sin modificar el estado de la aplicación.	`ng-template[neuTablePaginator]` Contexto utilizado: `page, pageSize, humanPage, pageCount, total, rangeStart, rangeEnd, canFirst, canPrevious, canNext, canLast, pageSizeOptions, changePage(page), changePageSize(size)`
`NeuTableRowDetailDirective` Bajo una fila expandida Ver ejemplo	Directiva pública de template Expande una fila para ver el detalle del pedido.	`ng-template[neuTableRowDetail]` Contexto utilizado: `$implicit`
`NeuTableSummaryDirective` Debajo de la tabla Ver ejemplo	Directiva pública de template Un total calculado por la aplicación acompaña a la tabla.	`ng-template[neuTableSummary]` Contexto utilizado: `—`
`NeuTableToolbarDirective` Antes de las filas Ver ejemplo	Directiva pública de template Las instrucciones o acciones de la aplicación acompañan a los datos.	`ng-template[neuTableToolbar]` Contexto utilizado: `—`

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

Título de la tabla

NeuTableCaptionDirective

**Pedidos de clientes**
Cliente	Importe (€)	Región
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Acciones de la tabla

NeuTableToolbarDirective

Cliente	Importe (€)	Región
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Resumen de resultados

NeuTableSummaryDirective

Cliente	Importe (€)	Región
Atlas	240	EU
Birch	180	US
Cedar	420	EU
Pedidos mostrados: 3 · Importe total: 840 €

Cabecera de columna

NeuTableHeaderDirective

Cliente Cuenta comercial	Importe (€)	Región
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Contenido de celda

NeuTableCellDirective

Cliente	Importe (€)	Región
AtlasPedido #101	240	EU
BirchPedido #102	180	US
CedarPedido #103	420	EU

Filtro personalizado

NeuTableFilterDirective

Cliente	Importe (€)	Región
Filtrar clientes
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Editor personalizado

NeuTableEditorDirective

Pulsa el lápiz de una fila para editar su cliente. Guarda los cambios o cancela desde las acciones de esa fila.

Cliente	Importe (€)	Región
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Detalle de fila

NeuTableRowDetailDirective

Detalle

Atlas

240

EU

Detalle del pedido #101

Importe (€)	Región
240	EU

Birch

180

US

Cedar

420

EU

Cabecera de grupo

NeuTableGroupHeaderDirective

Despliega una región para ver sus pedidos.

Cliente	Importe (€)	Región

Resumen de grupo

NeuTableGroupFooterDirective

Despliega una región para ver sus pedidos y su resumen.

Cliente	Importe (€)	Región

Estado vacío

NeuTableEmptyDirective

Cliente	Importe (€)	Región
Todavía no hay pedidos Los nuevos pedidos aparecerán aquí.

Estado de carga

NeuTableLoadingDirective

Cliente	Importe (€)	Región
Cargando pedidos… Estamos recuperando los resultados.

Estado de error y reintento

NeuTableErrorDirective

Cliente	Importe (€)	Región
No se han podido cargar los pedidos.

Paginación personalizada

NeuTablePaginatorDirective

Cliente	Importe (€)	Región
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Métodos públicos

Nombre	Contrato
`export`	`export(request: NeuTableExportRequest<F>): Promise<NeuTableExportOutcome>;` Crea una exportación del ámbito solicitado. Comprueba el resultado; una exportación delegada requiere la intervención de la aplicación. El ejemplo Exportar muestra la llamada y el resultado completos. example.ts `await table()?.export({ format: 'csv', scope: 'view' });`
`focusCell`	`focusCell(target: { readonly key: K; readonly columnId: string; }): boolean;` Mueve el foco a una celda renderizada mediante la clave estable de fila y el identificador de columna. El booleano indica si se ha podido enfocar. example.ts `table()?.focusCell({ key: 101, columnId: 'customer' });`
`retryData`	`retryData(): void;` Solicita otro intento para la consulta remota actual. Gestiona dataRequest en la aplicación; este método no carga datos por sí mismo. example.ts `table()?.retryData();`
`scrollTo`	`scrollTo(target: { readonly index?: number; readonly key?: K; }): Promise<void>;` Desplaza la tabla hasta una fila por índice o clave. Espera a que termine si otra acción depende de que la fila sea visible. example.ts `await table()?.scrollTo({ key: 101 });`

Public Types

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

NeuFilterConstraintTypeScript

import type { NeuFilterConstraint } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuFilterConstraint<F extends string> {
  readonly field: F;
  readonly kind: 'condition';
  readonly rule: 'equals' | 'notEquals' | 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'lessThan' | 'lessThanOrEqual' | 'greaterThan' | 'greaterThanOrEqual' | 'between' | 'in' | 'notIn' | 'isNull' | 'isNotNull' | 'isEmpty' | 'isNotEmpty';
  readonly value: unknown;
}

NeuFilterExpressionTypeScript

import type { NeuFilterConstraint } from '@neural-ui/core/table';
import type { NeuFilterGroup } from '@neural-ui/core/table';

import type { NeuFilterExpression } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuFilterExpression<F extends string> = NeuFilterConstraint<F> | NeuFilterGroup<F>;

NeuFilterGroupTypeScript

import type { NeuFilterExpression } from '@neural-ui/core/table';
import type { NeuFilterOperator } from '@neural-ui/core/table';

import type { NeuFilterGroup } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuFilterGroup<F extends string> {
  readonly children: readonly NeuFilterExpression<F>[];
  readonly kind: 'group';
  readonly operator: NeuFilterOperator;
}

NeuFilterOperatorTypeScript

NeuRowKeyTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';

import type { NeuRowKey } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuRowKey<T, K extends NeuTableKey> = (row: T) => K;

NeuRowTrackByTypeScript

import type { NeuRowTrackBy } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuRowTrackBy<T> = (index: number, row: T) => unknown;

NeuSortDirectionTypeScript

NeuSortEntryTypeScript

import type { NeuSortDirection } from '@neural-ui/core/table';

import type { NeuSortEntry } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuSortEntry<F extends string> {
  readonly direction: NeuSortDirection;
  readonly field: F;
}

NeuTableAppearanceTypeScript

import type { NeuTableAppearance } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableAppearance {
  readonly borders: 'none' | 'rows' | 'cells';
  readonly density: 'compact' | 'normal' | 'relaxed';
  readonly responsive: 'contained-scroll' | 'stacked';
  readonly stickyHeader: boolean;
  readonly striped: boolean;
}

NeuTableCellContextTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';
import type { NeuTableRowContext } from '@neural-ui/core/table';

import type { NeuTableCellContext } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableCellContext<T, K extends NeuTableKey> extends NeuTableRowContext<T, K> {
  readonly columnId: string;
  readonly value: unknown;
}

NeuTableColumnTypeScript

import type { NeuTableEditColumn } from '@neural-ui/core/table';
import type { NeuTableFilterColumn } from '@neural-ui/core/table';
import type { NeuTableSortColumn } from '@neural-ui/core/table';
import type { NeuTableValueAccessor } from '@neural-ui/core/table';

import type { NeuTableColumn } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableColumn<T, F extends string> {
  readonly align?: 'start' | 'center' | 'end';
  readonly edit?: NeuTableEditColumn<T, F>;
  readonly field?: F;
  readonly filter?: NeuTableFilterColumn<T, F>;
  readonly header: string;
  readonly id: string;
  readonly maxWidth?: string;
  readonly minWidth?: string;
  readonly sort?: NeuTableSortColumn<T, F>;
  readonly value?: NeuTableValueAccessor<T>;
  readonly width?: string;
}

NeuTableColumnOptionsTypeScript

import type { NeuTableColumnOptions } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableColumnOptions {
  readonly hideable?: boolean;
  readonly pinnable?: boolean;
  readonly reorderable?: boolean;
  readonly resizable?: boolean;
}

NeuTableDataModeTypeScript

NeuTableDataRequestTypeScript

import type { NeuTableDataRequestReason } from '@neural-ui/core/table';
import type { NeuTableQuery } from '@neural-ui/core/table';
import type { NeuTableRange } from '@neural-ui/core/table';

import type { NeuTableDataRequest } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableDataRequest<F extends string> {
  readonly query: NeuTableQuery<F>;
  readonly queryRevision: number;
  readonly range?: NeuTableRange;
  readonly reason: NeuTableDataRequestReason;
  readonly requestId: number;
}

NeuTableDataRequestReasonTypeScript

import type { NeuTableDataRequestReason } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuTableDataRequestReason = 'initial' | 'query' | 'viewport' | 'retry';

NeuTableDetailContextTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';
import type { NeuTableRowContext } from '@neural-ui/core/table';

import type { NeuTableDetailContext } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableDetailContext<T, K extends NeuTableKey> extends NeuTableRowContext<T, K> {
}

NeuTableEditCancelTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';

import type { NeuTableEditCancel } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableEditCancel<T, K extends NeuTableKey> {
  readonly key: K;
  readonly reason: 'escape' | 'consumer' | 'data-change';
  readonly row: T;
}

NeuTableEditChangeTypeScript

import type { NeuTableEditState } from '@neural-ui/core/table';
import type { NeuTableKey } from '@neural-ui/core/table';

import type { NeuTableEditChange } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableEditChange<K extends NeuTableKey> {
  readonly next: NeuTableEditState<K>;
  readonly source: 'pointer' | 'keyboard' | 'programmatic' | 'commit' | 'cancel';
}

NeuTableEditColumnTypeScript

import type { NeuTableValueAccessor } from '@neural-ui/core/table';

import type { NeuTableEditColumn } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableEditColumn<T, F extends string> {
  readonly field: F;
  readonly read?: NeuTableValueAccessor<T>;
  readonly write?: (row: T, value: unknown) => T;
}

NeuTableEditCommitTypeScript

import type { NeuTableEditValueChange } from '@neural-ui/core/table';
import type { NeuTableKey } from '@neural-ui/core/table';

import type { NeuTableEditCommit } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableEditCommit<T, K extends NeuTableKey, F extends string> {
  readonly changes: readonly NeuTableEditValueChange<F>[];
  readonly key: K;
  readonly row: T;
}

NeuTableEditErrorTypeScript

import type { NeuTableEditError } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableEditError {
  readonly code: string;
  readonly columnId?: string;
  readonly message: string;
}

NeuTableEditingOptionsTypeScript

import type { NeuTableEditValidation } from '@neural-ui/core/table';
import type { NeuTableKey } from '@neural-ui/core/table';

import type { NeuTableEditingOptions } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuTableEditingOptions<T, K extends NeuTableKey, F extends string> = {
    readonly mode: 'none';
} | {
    readonly mode: 'cell' | 'row';
    readonly activation: 'click' | 'double-click' | 'enter' | 'f2';
    readonly validate?: NeuTableEditValidation<T, K, F>;
    readonly commitOnBlur: boolean;
};

NeuTableEditorContextTypeScript

import type { NeuTableCellContext } from '@neural-ui/core/table';
import type { NeuTableEditError } from '@neural-ui/core/table';
import type { NeuTableKey } from '@neural-ui/core/table';

import type { NeuTableEditorContext } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableEditorContext<T, K extends NeuTableKey, F extends string> extends NeuTableCellContext<T, K> {
  readonly cancel: () => void;
  readonly commit: () => void;
  readonly errors: Signal<readonly NeuTableEditError[]>;
  readonly setValue: (value: unknown) => void;
  readonly valueSignal: Signal<unknown>;
}

NeuTableEditStateTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';

import type { NeuTableEditState } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuTableEditState<K extends NeuTableKey> = {
    readonly kind: 'none';
} | {
    readonly kind: 'cell';
    readonly key: K;
    readonly columnId: string;
} | {
    readonly kind: 'row';
    readonly key: K;
};

NeuTableEditValidationTypeScript

import type { NeuTableEditCommit } from '@neural-ui/core/table';
import type { NeuTableEditError } from '@neural-ui/core/table';
import type { NeuTableKey } from '@neural-ui/core/table';

import type { NeuTableEditValidation } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuTableEditValidation<T, K extends NeuTableKey, F extends string> = (event: NeuTableEditCommit<T, K, F>) => readonly NeuTableEditError[] | Promise<readonly NeuTableEditError[]>;

NeuTableEditValueChangeTypeScript

import type { NeuTableEditValueChange } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableEditValueChange<F extends string> {
  readonly columnId: string;
  readonly field?: F;
  readonly previous: unknown;
  readonly value: unknown;
}

NeuTableExpandedKeysChangeTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';

import type { NeuTableExpandedKeysChange } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableExpandedKeysChange<K extends NeuTableKey> {
  readonly expanded: boolean;
  readonly key: K;
  readonly next: readonly K[];
  readonly source: 'toggle' | 'keyboard' | 'programmatic';
}

NeuTableExpansionOptionsTypeScript

import type { NeuTableExpansionOptions } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableExpansionOptions<T> {
  readonly enabled: boolean;
  readonly isExpandable?: (row: T) => boolean;
  readonly toggleOnRowClick: boolean;
}

NeuTableExportFormatTypeScript

import type { NeuTableExportFormat } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuTableExportFormat = 'csv' | 'json' | 'xlsx';

NeuTableExportOutcomeTypeScript

import type { NeuTableExportResult } from '@neural-ui/core/table';

import type { NeuTableExportOutcome } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuTableExportOutcome = {
    readonly kind: 'generated';
    readonly result: NeuTableExportResult;
} | {
    readonly kind: 'delegated';
};

NeuTableExportRequestTypeScript

import type { NeuTableExportFormat } from '@neural-ui/core/table';
import type { NeuTableExportScope } from '@neural-ui/core/table';
import type { NeuTableQuery } from '@neural-ui/core/table';

import type { NeuTableExportRequest } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableExportRequest<F extends string> {
  readonly fileName: string;
  readonly format: NeuTableExportFormat;
  readonly query: NeuTableQuery<F>;
  readonly scope: NeuTableExportScope;
}

NeuTableExportResultTypeScript

import type { NeuTableExportResult } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableExportResult {
  readonly bytes: Uint8Array;
  readonly fileName: string;
  readonly mediaType: string;
}

NeuTableExportScopeTypeScript

import type { NeuTableExportScope } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuTableExportScope = 'page' | 'loaded' | 'filtered' | 'selected' | 'all';

NeuTableFeatureErrorTypeScript

import type { NeuTableFeatureError } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableFeatureError {
  readonly cause: unknown;
  readonly feature: 'filters' | 'editing' | 'virtualization' | 'export';
  readonly recoverable: boolean;
}

NeuTableFilterColumnTypeScript

import type { NeuFilterConstraint } from '@neural-ui/core/table';
import type { NeuTableValueAccessor } from '@neural-ui/core/table';

import type { NeuTableFilterColumn } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableFilterColumn<T, F extends string> {
  readonly defaultRule: NeuFilterConstraint<F>['rule'];
  readonly field: F;
  readonly rules: readonly NeuFilterConstraint<F>['rule'][];
  readonly value?: NeuTableValueAccessor<T>;
}

NeuTableFilterContextTypeScript

import type { NeuFilterConstraint } from '@neural-ui/core/table';
import type { NeuTableHeaderContext } from '@neural-ui/core/table';

import type { NeuTableFilterContext } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableFilterContext<T, F extends string> extends NeuTableHeaderContext<T, F> {
  readonly apply: (value: unknown, rule?: NeuFilterConstraint<F>['rule']) => void;
  readonly clear: () => void;
  readonly rule: NeuFilterConstraint<F>['rule'];
  readonly value: unknown;
}

NeuTableFilterOptionsTypeScript

import type { NeuTableFilterPredicate } from '@neural-ui/core/table';
import type { NeuTableFilterSurface } from '@neural-ui/core/table';

import type { NeuTableFilterOptions } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableFilterOptions<T, F extends string> {
  readonly commit: 'immediate' | 'explicit';
  readonly debounceMs: number;
  readonly equals?: (left: unknown, right: unknown) => boolean;
  readonly globalFields: readonly F[];
  readonly predicates: Readonly<Record<string, NeuTableFilterPredicate<T, F>>>;
  readonly surfaces: readonly NeuTableFilterSurface[];
}

NeuTableFilterPredicateTypeScript

import type { NeuTableFilterPredicateContext } from '@neural-ui/core/table';

import type { NeuTableFilterPredicate } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuTableFilterPredicate<T, F extends string> = (context: NeuTableFilterPredicateContext<T, F>) => boolean;

NeuTableFilterPredicateContextTypeScript

import type { NeuTableFilterPredicateContext } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableFilterPredicateContext<T, F extends string> {
  readonly candidate: unknown;
  readonly field: F;
  readonly filterValue: unknown;
  readonly row: T;
}

NeuTableFilterSurfaceTypeScript

import type { NeuTableFilterSurface } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuTableFilterSurface = 'row' | 'menu' | 'builder';

NeuTableGroupContextTypeScript

import type { NeuTableGroupContext } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableGroupContext<T> {
  readonly expanded: boolean;
  readonly id: string;
  readonly level: number;
  readonly rows: readonly T[];
  readonly value: unknown;
}

NeuTableGroupingChangeTypeScript

import type { NeuTableGroupingState } from '@neural-ui/core/table';

import type { NeuTableGroupingChange } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableGroupingChange<F extends string> {
  readonly next: NeuTableGroupingState<F>;
  readonly source: 'toggle' | 'programmatic';
}

NeuTableGroupingOptionsTypeScript

import type { NeuTableGroupingOptions } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableGroupingOptions<T, F extends string> {
  readonly aggregate?: (rows: readonly T[], field: F) => unknown;
  readonly mode: 'subheader' | 'rowspan';
  readonly scope: 'loaded';
  readonly value?: (row: T, field: F) => unknown;
}

NeuTableGroupingStateTypeScript

import type { NeuTableGroupingState } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableGroupingState<F extends string> {
  readonly by: readonly F[];
  readonly expandedGroupIds: readonly string[];
}

NeuTableHeaderContextTypeScript

import type { NeuSortEntry } from '@neural-ui/core/table';
import type { NeuTableColumn } from '@neural-ui/core/table';

import type { NeuTableHeaderContext } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableHeaderContext<T, F extends string> {
  readonly column: NeuTableColumn<T, F>;
  readonly sort: readonly NeuSortEntry<F>[];
}

NeuTableInteractionOptionsTypeScript

import type { NeuTableInteractionOptions } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableInteractionOptions {
  readonly announceChanges: boolean;
  readonly navigation: 'native' | 'rows' | 'cells';
  readonly wrapFocus: boolean;
}

NeuTableKeyTypeScript

NeuTableLabelsTypeScript

import type { NeuTableMessage } from '@neural-ui/core/table';

import type { NeuTableLabels } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableLabels {
  readonly ariaLabel: string;
  readonly empty: string;
  readonly error: string;
  readonly loading: string;
  readonly messages?: Partial<Record<NeuTableMessage, string>>;
  readonly pagination: string;
  readonly retry: string;
  readonly selection: string;
}

NeuTableLayoutChangeTypeScript

import type { NeuTableLayoutState } from '@neural-ui/core/table';

import type { NeuTableLayoutChange } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableLayoutChange {
  readonly next: NeuTableLayoutState;
  readonly source: 'resize' | 'reorder' | 'visibility' | 'pin';
}

NeuTableLayoutStateTypeScript

import type { NeuTableLayoutState } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableLayoutState {
  readonly hidden: readonly string[];
  readonly order: readonly string[];
  readonly pinnedEnd: readonly string[];
  readonly pinnedStart: readonly string[];
  readonly widths: Readonly<Record<string, string>>;
}

NeuTableMessageTypeScript

import type { NeuFilterConstraint } from '@neural-ui/core/table';

import type { NeuTableMessage } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuTableMessage = 'stateAnnouncement' | 'firstPage' | 'previousPage' | 'nextPage' | 'lastPage' | 'page' | 'of' | 'goToPage' | 'rowsPerPage' | 'searchTable' | 'search' | 'clearSearch' | 'clear' | 'advancedFilters' | 'hiddenColumns' | 'showColumn' | 'expansion' | 'selectAll' | 'filterColumn' | 'filter' | 'moveLeft' | 'moveRight' | 'pinColumn' | 'pin' | 'hideColumn' | 'hide' | 'resizeColumn' | 'rule' | 'value' | 'applyColumnFilter' | 'clearColumnFilter' | 'cancelFilter' | 'filterRule' | 'filterValue' | 'apply' | 'collapseRow' | 'expandRow' | 'selectRow' | 'sortAction' | 'ascending' | 'descending' | 'none' | 'field' | 'join' | 'and' | 'or' | 'applyAdvancedFilter' | 'cancelAdvancedFilter' | 'edit' | 'save' | 'cancel' | 'validating' | NeuFilterConstraint<string>['rule'];

NeuTableMetadataTypeScript

import type { NeuTableRange } from '@neural-ui/core/table';

import type { NeuTableMetadata } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableMetadata {
  readonly appliedRequestId: number | null;
  readonly dataRange?: NeuTableRange;
  readonly error: unknown | null;
  readonly loading: boolean;
  readonly queryRevision: number;
  readonly totalItems: number | null;
}

NeuTablePaginationOptionsTypeScript

import type { NeuTablePaginationOptions } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTablePaginationOptions {
  readonly enabled: boolean;
  readonly pageSizeOptions: readonly number[];
  readonly position: 'top' | 'bottom' | 'both';
  readonly report: 'none' | 'summary' | 'range';
  readonly showPageJump: boolean;
}

NeuTablePaginatorContextTypeScript

import type { NeuTablePaginatorContext } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTablePaginatorContext {
  readonly canFirst: boolean;
  readonly canLast: boolean;
  readonly canNext: boolean;
  readonly canPrevious: boolean;
  readonly changePage: (page: number) => void;
  readonly changePageSize: (pageSize: number) => void;
  readonly humanPage: number;
  readonly page: number;
  readonly pageCount: number | null;
  readonly pageSize: number;
  readonly pageSizeOptions: readonly number[];
  readonly rangeEnd: number;
  readonly rangeStart: number;
  readonly total: number | null;
}

NeuTableQueryTypeScript

import type { NeuFilterExpression } from '@neural-ui/core/table';
import type { NeuSortEntry } from '@neural-ui/core/table';

import type { NeuTableQuery } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableQuery<F extends string> {
  readonly filters: NeuFilterExpression<F> | null;
  readonly page: number;
  readonly pageSize: number;
  readonly search: string;
  readonly sort: readonly NeuSortEntry<F>[];
}

NeuTableRangeTypeScript

import type { NeuTableRange } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableRange {
  readonly end: number;
  readonly start: number;
}

NeuTableRangeChangeTypeScript

import type { NeuTableRange } from '@neural-ui/core/table';

import type { NeuTableRangeChange } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableRangeChange {
  readonly reason: 'scroll' | 'resize' | 'programmatic' | 'query';
  readonly render: NeuTableRange;
  readonly visible: NeuTableRange;
}

NeuTableRowActionTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';

import type { NeuTableRowAction } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableRowAction<T, K extends NeuTableKey> {
  readonly action: 'activate' | 'double-activate' | 'context-menu';
  readonly index: number;
  readonly key: K;
  readonly row: T;
}

NeuTableRowContextTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';

import type { NeuTableRowContext } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableRowContext<T, K extends NeuTableKey> {
  readonly $implicit: T;
  readonly disabled: boolean;
  readonly expanded: boolean;
  readonly index: number;
  readonly key: K;
  readonly row: T;
  readonly selected: boolean;
}

NeuTableRowMoveTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';

import type { NeuTableRowMove } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableRowMove<K extends NeuTableKey> {
  readonly beforeKey: K | null;
  readonly fromIndex: number;
  readonly key: K;
  readonly toIndex: number;
}

NeuTableRowOptionsTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';

import type { NeuTableRowOptions } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableRowOptions<T, K extends NeuTableKey> {
  readonly className?: (row: T) => string | readonly string[] | null;
  readonly isDisabled?: (row: T) => boolean;
  readonly pin?: (row: T, key: K) => 'start' | 'end' | null;
  readonly reorderable: boolean;
}

NeuTableSelectionTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';
import type { NeuTableSelectionScope } from '@neural-ui/core/table';

import type { NeuTableSelection } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuTableSelection<K extends NeuTableKey, F extends string> = {
    readonly kind: 'keys';
    readonly keys: readonly K[];
} | {
    readonly kind: 'all-matching';
    readonly scope: NeuTableSelectionScope<F>;
    readonly excludedKeys: readonly K[];
};

NeuTableSelectionChangeTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';
import type { NeuTableSelection } from '@neural-ui/core/table';

import type { NeuTableSelectionChange } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableSelectionChange<T, K extends NeuTableKey, F extends string> {
  readonly addedKeys: readonly K[];
  readonly loadedRows: readonly T[];
  readonly next: NeuTableSelection<K, F>;
  readonly removedKeys: readonly K[];
  readonly source: 'row' | 'radio' | 'checkbox' | 'keyboard' | 'toggle-all';
}

NeuTableSelectionOptionsTypeScript

import type { NeuTableSelectionOptions } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuTableSelectionOptions<T> = {
    readonly mode: 'none';
} | {
    readonly mode: 'single';
    readonly indicator: 'none' | 'radio';
    readonly selectOnRowClick: boolean;
    readonly allowClear: boolean;
    readonly isRowDisabled?: (row: T) => boolean;
} | {
    readonly mode: 'multiple';
    readonly indicator: 'none' | 'checkbox';
    readonly selectOnRowClick: boolean;
    readonly modifier: 'replace' | 'platform' | 'toggle';
    readonly range: boolean;
    readonly toggleAllScope: 'rendered' | 'page' | 'loaded' | 'all-matching';
    readonly isRowDisabled?: (row: T) => boolean;
};

NeuTableSelectionScopeTypeScript

import type { NeuFilterExpression } from '@neural-ui/core/table';

import type { NeuTableSelectionScope } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableSelectionScope<F extends string> {
  readonly filters: NeuFilterExpression<F> | null;
  readonly globalFields: readonly F[];
  readonly search: string;
}

NeuTableSortColumnTypeScript

import type { NeuTableValueAccessor } from '@neural-ui/core/table';

import type { NeuTableSortColumn } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableSortColumn<T, F extends string> {
  readonly compare?: (left: T, right: T) => number;
  readonly field: F;
  readonly value?: NeuTableValueAccessor<T>;
}

NeuTableSortOptionsTypeScript

import type { NeuSortDirection } from '@neural-ui/core/table';

import type { NeuTableSortOptions } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableSortOptions {
  readonly defaultDirection: NeuSortDirection;
  readonly mode: 'single' | 'multiple';
  readonly removable: boolean;
  readonly resetPageOnChange: boolean;
}

NeuTableStateTemplateContextTypeScript

import type { NeuTableStateTemplateContext } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableStateTemplateContext {
  readonly error: unknown | null;
  readonly loading: boolean;
  readonly retry: () => void;
}

NeuTableValueAccessorTypeScript

import type { NeuTableValueAccessor } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuTableValueAccessor<T> = (row: T) => unknown;

NeuTableVirtualizationOptionsTypeScript

import type { NeuTableVirtualizationOptions } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuTableVirtualizationOptions = {
    readonly enabled: false;
} | {
    readonly enabled: true;
    readonly itemSize: number;
    readonly overscan: number;
    readonly requestStep?: number;
};

Apariencia y tokens

Usa appearance para elegir densidad, bordes, filas alternas, cabecera fija y presentación responsive. El configurador anterior muestra estas opciones por separado de las acciones de columna y la navegación por teclado. Los tokens CSS públicos permiten personalizar superficies, texto, espaciado y foco dentro de un ámbito.

Tokens específicos

Token	Efecto	Estado / variante	Valor / origen	Alternativa
`--neu-table-cell-block`	Relleno vertical de las celdas con densidad normal.	density="normal"	`0.625rem`Declaración raíz	`Sin alias de token`
`--neu-table-cell-block-compact`	Relleno vertical de las celdas con densidad compacta.	density="compact"	`0.375rem`Declaración raíz	`Sin alias de token`
`--neu-table-cell-block-relaxed`	Relleno vertical de las celdas con densidad amplia.	density="relaxed"	`0.875rem`Declaración raíz	`Sin alias de token`
`--neu-table-cell-inline`	Relleno horizontal de las celdas.	Celdas de tabla	`var(--neu-space-3)`Declaración raíz	`--neu-space-3`
`--neu-table-group-background`	Fondo de las filas de encabezado de grupo.	Cabecera de grupo	`color-mix(in srgb, currentColor 4%, transparent)`Declaración raíz	`Sin alias de token`
`--neu-table-header-height`	Altura de las celdas de cabecera; el contenido multilínea puede necesitar más espacio.	Cabecera de columna	`44px`Declaración raíz	`Sin alias de token`
`--neu-table-max-height`	Altura máxima del área sin virtualización; los datos que la superan se desplazan dentro.	Área sin virtualización	`480px`Declaración raíz	`Sin alias de token`
`--neu-table-selected-background`	Fondo de las filas seleccionadas, con prioridad sobre las bandas alternas.	Fila seleccionada	`color-mix(in srgb, currentColor 9%, transparent)`Declaración raíz	`Sin alias de token`
`--neu-table-space-sm`	Separación en controles y grupos de acciones de la tabla.	Controles y acciones	`var(--neu-space-2)`Declaración raíz	`--neu-space-2`
`--neu-table-space-xs`	Separación pequeña entre controles contiguos de la tabla.	Controles y acciones	`var(--neu-space-1)`Declaración raíz	`--neu-space-1`
`--neu-table-state-block`	Relleno vertical del contenido de carga, vacío y error.	Vacío / carga / error	`var(--neu-space-6)`Declaración raíz	`--neu-space-6`
`--neu-table-sticky-offset`	Desplazamiento superior de la cabecera con stickyHeader activado.	stickyHeader	`0px`Declaración raíz	`Sin alias de token`
`--neu-table-stripe-background`	Fondo de las filas alternas cuando striped está activado.	striped	`color-mix(in srgb, currentColor 4%, transparent)`Declaración raíz	`Sin alias de token`
`--neu-table-virtual-block-size`	Altura del área de desplazamiento virtualizado.	Virtualización	`24rem`Declaración raíz	`Sin alias de token`

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-border-hover`	Bordes de controles al pasar el puntero	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.16)`
`--neu-focus-color`	Contorno visible del foco de teclado	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`var(--neu-primary)`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-primary-soft`	Superficie tenue de selección o estado activo	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`var(--neu-primary-50)`
`--neu-surface`	Superficie principal del campo, cabecera o control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-surface-2`	Superficies secundarias y filas alternas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#f1f5f9`
`--neu-text`	Color del texto principal y de los iconos que lo heredan	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#0f172a`

Componentes relacionados

Usa TreeTable para filas jerárquicas y Tree para una jerarquía sin columnas.