API du composant Grille de données

Import

import-grid.ts

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

NuiGrid

Une grille de données sur un tableau natif.

Sélecteur: nui-grid

NuiGrid: Propriétés
Nom	Type	Par défaut	Description
`rows`Bidirectionnel	`readonly T[]`		Les données. Les modifications remplacent des lignes : liez-les avec `[(rows)]`.
`columns`Input	`NuiGridColumn<T>[]`		Les colonnes, sous forme d’objets `NuiGridColumn`.
`rowId`Input	`(row: T) => unknown`	`row.id ?? row`	La clé d’une ligne, pour la sélection et le suivi.
`label`Input	`string`		Nom accessible de la grille.
`selection`Input	`'none' \| 'single' \| 'multiple'`	`'none'`	Si les lignes sont sélectionnables, et combien.
`selected`Bidirectionnel	`unknown[]`	`[]`	Les clés des lignes sélectionnées.
`sort`Bidirectionnel	`NuiGridSort[]`	`[]`	Le tri, sous forme d’objets `{ column, direction }` ; le premier trie en premier.
`filters`Bidirectionnel	`Record<string, NuiGridFilter>`	`{}`	Un filtre par id de colonne : un opérateur et une valeur.
`search`Bidirectionnel	`string`	`''`	Des mots qui doivent tous figurer dans une ligne.
`pageSize`Bidirectionnel	`number`	`0`	Lignes par page, ou 0 pour une seule liste défilante.
`page`Bidirectionnel	`number`	`0`	La page affichée, à partir de 0.
`pageSizes`Input	`number[]`	`[10, 25, 50, 100]`	Les choix de la pagination.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Ne rend que les lignes visibles : toujours, jamais, ou `auto` au-delà de 100 lignes sans pagination.
`height`Input	`string`		Une longueur CSS qui limite la grille ; elle défile à l’intérieur.
`columnState`Bidirectionnel	`NuiGridColumnState[]`	`[]`	La largeur, l’ordre, l’épinglage et la visibilité de chaque colonne, à enregistrer et restaurer.
`mode`Input	`'client' \| 'server'`	`'client'`	`server` affiche les lignes telles qu’elles arrivent et vous laisse le tri, le filtrage et la pagination.
`total`Input	`number`		Le nombre de lignes sur le serveur.
`loading`Input	`boolean`	`false`	Affiche une barre de progression, et des lignes provisoires tant qu’il n’y en a aucune.
`locale`Input	`string`	`LOCALE_ID`	Formate les nombres et les dates, et lit les nombres saisis.
`labels`Input	`Partial<NuiGridLabels>`		Tous les textes que la grille affiche ou annonce, à traduire.
`corners`Input	`NuiCorners`		La forme de ses coins : `round`, `squircle`, `bevel`, `scoop`, `notch` ou `square`.
`radius`Input	`NuiRadius`		La taille de ses coins : `none`, `small`, `medium`, `large` ou `full`.
`density`Input	`NuiDensity`		La place qu’il occupe : `compact`, `regular` ou `roomy`.
`rowActivate`Output	`T`		Émet une ligne ouverte avec Entrée ou un double clic.
`cellEdit`Output	`NuiGridEdit<T>`		Émet chaque modification validée.
`queryChange`Output	`NuiGridQuery`		Émet le tri, les filtres, la recherche et la page à chaque changement.
`exportCsv`Méthode	`(options?) => string`		Les lignes filtrées et triées des colonnes visibles, en CSV.
`focusCell`Méthode	`(row: number, col: number) => void`		Place le focus sur une cellule ; la ligne `-1` est l’en-tête.
`clearFilters`Méthode	`() => void`		Efface tous les filtres et la recherche.

Les inputs de personnalisation que vous ne définissez pas suivent l’attribut data-nui-* le plus proche. Consultez le guide de personnalisation.

NuiGridColumn

Une colonne. Seuls id et header sont obligatoires.

NuiGridColumn: Propriétés
Nom	Type	Par défaut	Description
`id`Propriété	`string`		Unique ; la clé dans le tri, les filtres et l’état des colonnes.
`header`Propriété	`string`		Le texte de l’en-tête.
`value`Propriété	`keyof T \| ((row: T) => V)`		Une clé de la ligne, ou une fonction de la ligne. Par défaut, `row[id]`.
`type`Propriété	`'text' \| 'number' \| 'date' \| 'boolean' \| 'enum'`	`'text'`	Détermine l’alignement, le tri, le filtre et l’éditeur.
`format`Propriété	`Intl options \| ((value, row) => string)`		Options `Intl` pour les nombres et les dates, ou une fonction qui produit le texte.
`options`Propriété	`NuiOption<V>[]`		Les options d’une colonne `enum`, sous forme d’objets `NuiOption`.
`width, minWidth, maxWidth`Propriété	`number`		En pixels.
`flex`Propriété	`number`		Partage l’espace restant avec les autres colonnes `flex`.
`align`Propriété	`'start' \| 'center' \| 'end'`		Par défaut, selon le type : nombres et dates à la fin.
`pinned, hidden`Propriété	`'start' \| 'end', boolean`		L’épinglage et la visibilité initiaux de la colonne.
`sortable, filterable, resizable, reorderable, hideable`Propriété	`boolean`	`true`	Chacun se désactive avec `false`.
`compare`Propriété	`(a: V, b: V) => number`		Un tri personnalisé.
`editable, validate`Propriété	`boolean \| ((row) => boolean), (value, row) => string \| null`		Si les cellules sont modifiables, et un message quand une valeur n’est pas valide.
`set`Propriété	`(row: T, value: V) => T`		Produit la ligne modifiée. Par défaut, une copie avec la nouvelle valeur.

NuiGridCell

Dessine les cellules d’une colonne. Le contexte contient la ligne, la valeur et le texte.

Sélecteur: ng-template[nuiGridCell]

NuiGridCell: Propriétés
Nom	Type	Par défaut	Description
`nuiGridCell`Input	`string`		L’id de la colonne.

NuiGridHeader

Dessine l’en-tête d’une colonne.

Sélecteur: ng-template[nuiGridHeader]

NuiGridHeader: Propriétés
Nom	Type	Par défaut	Description
`nuiGridHeader`Input	`string`		L’id de la colonne.

NuiGridEmpty

Ce qui s’affiche quand il n’y a aucune ligne. Le contexte indique si des filtres les ont masquées.

Sélecteur: ng-template[nuiGridEmpty]