Needless UI

Componentes

Cuadrícula de datos

Ordena, filtra, selecciona, edita y desplázate por cualquier cantidad de filas.

Importación

import-grid.ts
import { NuiGrid, NuiGridCell, type NuiGridColumn } from '@needless-ui/angular/grid';

NuiGrid

Una cuadrícula de datos sobre una tabla nativa.

Selector
nui-grid
NombreTipoPredeterminadoDescripción
rowsBidireccionalreadonly T[]Los datos. Las ediciones reemplazan filas, así que enlázalos con [(rows)].
columnsInputNuiGridColumn<T>[]Las columnas, como objetos NuiGridColumn.
rowIdInput(row: T) => unknownrow.id ?? rowLa clave de una fila, para selección y seguimiento.
labelInputstringNombre accesible de la cuadrícula.
selectionInput'none' | 'single' | 'multiple''none'Si se pueden seleccionar filas, y cuántas.
selectedBidireccionalunknown[][]Las claves de las filas seleccionadas.
sortBidireccionalNuiGridSort[][]El orden, como objetos { column, direction }; el primero ordena primero.
filtersBidireccionalRecord<string, NuiGridFilter>{}Un filtro por id de columna: un operador y un valor.
searchBidireccionalstring''Palabras que deben aparecer todas en una fila.
pageSizeBidireccionalnumber0Filas por página, o 0 para una sola lista desplazable.
pageBidireccionalnumber0La página mostrada, desde 0.
pageSizesInputnumber[][10, 25, 50, 100]Las opciones del paginador.
virtualInputboolean | 'auto''auto'Renderiza solo las filas visibles: siempre, nunca, o auto con más de 100 filas sin paginación.
heightInputstringUna longitud CSS que limita la cuadrícula; se desplaza por dentro.
columnStateBidireccionalNuiGridColumnState[][]Ancho, orden, fijación y visibilidad de cada columna, para guardar y restaurar.
modeInput'client' | 'server''client'server muestra las filas tal como llegan y te deja a ti ordenar, filtrar y paginar.
totalInputnumberEl número de filas en el servidor.
loadingInputbooleanfalseMuestra una barra de progreso, y filas provisionales mientras no hay ninguna.
localeInputstringLOCALE_IDDa formato a números y fechas, y lee los números escritos.
labelsInputPartial<NuiGridLabels>Todos los textos que la cuadrícula muestra o anuncia, para traducirlos.
cornersInputNuiCornersLa forma de sus esquinas: round, squircle, bevel, scoop, notch o square.
radiusInputNuiRadiusEl tamaño de sus esquinas: none, small, medium, large o full.
densityInputNuiDensityCuánto espacio ocupa: compact, regular o roomy.
rowActivateOutputTEmite una fila abierta con Intro o con doble clic.
cellEditOutputNuiGridEdit<T>Emite cada edición confirmada.
queryChangeOutputNuiGridQueryEmite el orden, los filtros, la búsqueda y la página cada vez que cambian.
exportCsvMétodo(options?) => stringLas filas filtradas y ordenadas de las columnas visibles, en CSV.
focusCellMétodo(row: number, col: number) => voidPone el foco en una celda; la fila -1 es el encabezado.
clearFiltersMétodo() => voidBorra todos los filtros y la búsqueda.

Los inputs de personalización que no definas siguen el atributo data-nui-* más cercano. Consulta la guía de personalización.

NuiGridColumn

Una columna. Solo id y header son obligatorios.

NombreTipoPredeterminadoDescripción
idPropiedadstringÚnico; la clave en el orden, los filtros y el estado de las columnas.
headerPropiedadstringEl texto del encabezado.
valuePropiedadkeyof T | ((row: T) => V)Una clave de la fila, o una función de la fila. Por defecto, row[id].
typePropiedad'text' | 'number' | 'date' | 'boolean' | 'enum''text'Determina la alineación, el orden, el filtro y el editor.
formatPropiedadIntl options | ((value, row) => string)Opciones de Intl para números y fechas, o una función que genera el texto.
optionsPropiedadNuiOption<V>[]Las opciones de una columna enum, como objetos NuiOption.
width, minWidth, maxWidthPropiedadnumberEn píxeles.
flexPropiedadnumberReparte el espacio sobrante con las demás columnas flex.
alignPropiedad'start' | 'center' | 'end'Por defecto, según el tipo: números y fechas al final.
pinned, hiddenPropiedad'start' | 'end', booleanFijación y visibilidad iniciales de la columna.
sortable, filterable, resizable, reorderable, hideablePropiedadbooleantrueCada una se puede desactivar con false.
comparePropiedad(a: V, b: V) => numberUn orden personalizado.
editable, validatePropiedadboolean | ((row) => boolean), (value, row) => string | nullSi las celdas se pueden editar, y un mensaje cuando un valor no es válido.
setPropiedad(row: T, value: V) => TCrea la fila editada. Por defecto, una copia con el valor nuevo.

NuiGridCell

Dibuja las celdas de una columna. El contexto contiene la fila, el valor y el texto.

Selector
ng-template[nuiGridCell]
NombreTipoPredeterminadoDescripción
nuiGridCellInputstringEl id de la columna.

NuiGridHeader

Dibuja el encabezado de una columna.

Selector
ng-template[nuiGridHeader]
NombreTipoPredeterminadoDescripción
nuiGridHeaderInputstringEl id de la columna.

NuiGridEmpty

Lo que se muestra cuando no hay filas. El contexto indica si los filtros las ocultaron.

Selector
ng-template[nuiGridEmpty]