API du composant Grille de données pour React

Import

import-grid.tsx

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

NuiGrid

Une grille de données sur un tableau natif.

NuiGrid: Propriétés
Nom	Type	Par défaut	Description
`rows`Prop	`readonly T[]`		Les données. Une modification remplace sa ligne et appelle `onRowsChange` ; les prochaines `rows` que vous passez remplacent les modifications.
`onRowsChange`Callback	`(rows: readonly T[]) => void`		Appelé avec les lignes après chaque modification validée.
`columns`Prop	`NuiGridColumn<T>[]`		Les colonnes, sous forme d’objets `NuiGridColumn`.
`rowId`Prop	`(row: T) => unknown`	`row.id ?? row`	La clé d’une ligne, pour la sélection et le suivi.
`label`Prop	`string`		Nom accessible de la grille.
`selection`Prop	`'none' \| 'single' \| 'multiple'`	`'none'`	Si les lignes sont sélectionnables, et combien.
`selected` `defaultSelected` `onSelectedChange`État	`unknown[]`	`[]`	Les clés des lignes sélectionnées.
`sort` `defaultSort` `onSortChange`État	`NuiGridSort[]`	`[]`	Le tri, sous forme d’objets `{ column, direction }` ; le premier trie en premier.
`filters` `defaultFilters` `onFiltersChange`État	`Record<string, NuiGridFilter>`	`{}`	Un filtre par id de colonne : un opérateur et une valeur.
`search` `defaultSearch` `onSearchChange`État	`string`	`''`	Des mots qui doivent tous figurer dans une ligne.
`pageSize` `defaultPageSize` `onPageSizeChange`État	`number`	`0`	Lignes par page, ou 0 pour une seule liste défilante.
`page` `defaultPage` `onPageChange`État	`number`	`0`	La page affichée, à partir de 0.
`pageSizes`Prop	`number[]`	`[10, 25, 50, 100]`	Les choix de la pagination.
`virtual`Prop	`boolean \| 'auto'`	`'auto'`	Ne rend que les lignes visibles : toujours, jamais, ou `auto` au-delà de 100 lignes sans pagination.
`height`Prop	`string`		Une longueur CSS qui limite la grille ; elle défile à l’intérieur.
`columnState` `defaultColumnState` `onColumnStateChange`État	`NuiGridColumnState[]`	`[]`	La largeur, l’ordre, l’épinglage et la visibilité de chaque colonne, à enregistrer et restaurer.
`mode`Prop	`'client' \| 'server'`	`'client'`	`server` affiche les lignes telles qu’elles arrivent et vous laisse le tri, le filtrage et la pagination.
`total`Prop	`number`		Le nombre de lignes sur le serveur.
`loading`Prop	`boolean`	`false`	Affiche une barre de progression, et des lignes provisoires tant qu’il n’y en a aucune.
`locale`Prop	`string`	`'en-US'`	Formate les nombres et les dates, et lit les nombres saisis.
`labels`Prop	`Partial<NuiGridLabels>`		Tous les textes que la grille affiche ou annonce, à traduire.
`corners`Prop	`NuiCorners`		La forme de ses coins : `round`, `squircle`, `bevel`, `scoop`, `notch` ou `square`.
`radius`Prop	`NuiRadius`		La taille de ses coins : `none`, `small`, `medium`, `large` ou `full`.
`density`Prop	`NuiDensity`		La place qu’il occupe : `compact`, `regular` ou `roomy`.
`groupBy`Prop	`string[]`	`[]`	Les colonnes selon lesquelles regrouper les lignes, la plus externe d’abord.
`collapsed` `defaultCollapsed` `onCollapsedChange`État	`string[]`	`[]`	Les clés des groupes fermés ; au départ, les groupes sont ouverts.
`getChildren`Prop	`(row: T) => T[] \| undefined`		Les enfants d’une ligne : la grille affiche des données arborescentes.
`expanded` `defaultExpanded` `onExpandedChange`État	`unknown[]`	`[]`	Les clés des lignes ouvertes dans les données arborescentes ; au départ, elles sont fermées.
`details` `defaultDetails` `onDetailsChange`État	`unknown[]`	`[]`	Les clés des lignes dont les détails sont ouverts.
`totals, flash`Prop	`boolean`	`false`	Une ligne d’agrégats sur toutes les lignes filtrées ; des cellules qui clignotent quand leur texte change, dans les lignes dotées d’un `rowId` stable.
`layout`Prop	`'table' \| 'list' \| 'auto'`	`'table'`	`list` affiche les lignes sous forme de cartes, et `auto` le fait sur les écrans étroits.
`toolbar`Prop	`boolean \| 'auto'`	`'auto'`	Une barre qui trie, filtre et sélectionne toutes les lignes : toujours, jamais, ou `auto` avec les cartes.
`renderEmpty`Render prop	`(filtered: boolean) => ReactNode`		Ce qui s’affiche quand il n’y a aucune ligne ; on lui indique si des filtres les ont masquées.
`renderDetail`Render prop	`(row: T) => ReactNode`		Les détails d’une ligne, affichés dessous quand elle est ouverte. La grille ajoute une colonne de boutons bascules.
`onRowActivate`Callback	`(row: T) => void`		Appelé avec une ligne ouverte avec Entrée ou un double clic.
`onCellEdit`Callback	`(edit: NuiGridEdit<T>) => void`		Appelé avec chaque modification validée.
`onQueryChange`Callback	`(query: NuiGridQuery) => void`		Appelé avec le tri, les filtres, la recherche et la page à chaque changement, et une fois au départ.
`ref`Prop	`Ref<NuiGridHandle>`		Ce qu’expose la `ref` de la grille : exports, impression et focus.
`exportXlsx, print`Méthode	`(options?) => Blob, () => void`		Les lignes filtrées et triées sous forme de feuille de calcul ; imprime toutes les lignes.
`exportCsv`Méthode	`(options?) => string`		Les lignes filtrées et triées des colonnes visibles, en CSV.
`expandAll`Méthode	`(open?: boolean) => void`		Ouvre chaque groupe et chaque ligne qui a des enfants, ou les ferme tous.
`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.
`fit`Méthode	`(id: string) => void`		Ajuste une colonne à la plus large de ses cellules rendues.

L’état fonctionne comme pour les champs de formulaire de React : passez une valeur et mettez-la à jour depuis son callback on…Change, ou passez une valeur default… et laissez le composant la garder.

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

NuiGridColumn

Une colonne. Elle accepte toutes les propriétés de la colonne Angular (seuls id et header sont obligatoires), ainsi que ces deux-ci, qui la dessinent.

NuiGridColumn: Propriétés
Nom	Type	Par défaut	Description
`renderCell`Render prop	`({ row, value, text, column }) => ReactNode`		Dessinez vous-même les cellules de la colonne, à partir de la ligne, de sa valeur et de son texte.
`renderHeader`Render prop	`(column) => ReactNode`		Dessinez vous-même l’en-tête de la colonne ; `header` continue de la nommer.