CrudPage

Une page de liste, avec ses quatre opérations.

Créer, consulter, modifier, supprimer : ce sont les mêmes partout, et les réécrire à chaque écran produit quatre variantes qui divergent — celle qui oublie la confirmation, celle qui ne vérifie pas les droits, celle dont le bouton ne se désactive pas pendant l'appel.

Ici, fournir le gestionnaire suffit. Ne pas le fournir retire l'action.

Installation

sia-ui add crud-page

Ou par le paquet, sans rien copier :

import { CrudPage, CrudDialogs } from "@sia-ui/react-web";

Props de CrudPage

Prop	Type	Défaut	Description
* data	T[]	—
bulkDeleteButtonProps	Partial<Omit<ButtonProps, "onClick">>	—	Les props du bouton de suppression groupée. Sans onClick.
can	(rule: PermissionRule) => boolean	—
children	ReactNode	—	Remplace le tableau. Le reste de la page continue de fonctionner.
className	string	—
columns	DataTableColumn<T>[]	—
createButtonProps	Partial<Omit<ButtonProps, "children" | "onClick">>	—	Les props du bouton de création. Sans onClick, qui ouvre le formulaire, ni children : le libellé passe par operations.create.label.
createDefaults	FormShape	—	Valeurs de départ d'une création. Par défaut, des champs vides.
description	ReactNode	—
descriptionsProps	Partial<Omit<DescriptionsProps, "items">>	—	Les props de la vue de détail par défaut — voir CrudDescriptionsProps.
detail	boolean | ((row: T, index: number) => ReactNode)	—	La vue de détail. Par défaut dérivée des colonnes, qui disent déjà quoi montrer. Une fonction la remplace, false la retire avec son action.
dialog	CrudDialogOptions	—	Titres, largeur et nombre de colonnes des boîtes.
empty	{ title?: ReactNode; description?: ReactNode; action?: ReactNode; icon?: ReactNode; }	—
error	ReactNode	—
extraRowActions	RowAction<T>[] | ((row: T, index: number) => RowAction<T>[])	—	Des actions de ligne en plus des quatre standard.
eyebrow	ReactNode	—
fields	FormEntry[]	—	Les champs de création et de modification. Les déclarer suffit à obtenir un CRUD complet : le bouton « Créer » ouvre un formulaire vide, « Modifier » le même prérempli, « Consulter » la ligne en lecture. C'est la même description que Form — aucun schéma propre à cette page, aucune bibliothèque imposée.
formProps	Partial<Omit<FormProps, "form" | "onSubmit" | "fields" | "defaultValues" | "validate">>	—	Les props du Form des boîtes — voir CrudFormProps.
getRowKey	(row: T, index: number) => Key	—
headerActions	ReactNode	—	Actions de page, à droite du titre. S'ajoute au bouton de création.
headingLevel	1 | 2 | 3	—	Le niveau du titre. 1 pour un écran ; 2 quand la liste est une section d'une fiche — les comptes d'un fournisseur — qui a déjà son <h1>.
loading	boolean	false
modalProps	Partial&lt;Omit&lt;ModalProps, "children" | "title" | "description" | "open" | "onOpenChange"&gt;&gt;	—	Les props des Modal de formulaire et de détail — voir CrudModalProps.
onBulkDelete	(keys: Key[], rows: T[]) =&gt; void | Promise&lt;void&gt;	—	Suppression groupée. Ajoute la sélection et sa barre d'actions.
onCreate	() =&gt; void	—	Ce que fait le bouton de création. Facultatif : avec fields, la page ouvre elle-même son formulaire. Le fournir sert à partir ailleurs — une page dédiée, un assistant en plusieurs étapes — et prend alors le pas sur la boîte.
onDelete	(row: T, index: number) =&gt; void | Promise&lt;void&gt;	—	Confirmée d'office. Détruire sans demander est une faute.
onEdit	(row: T, index: number) =&gt; void	—	Idem : sans lui, le formulaire s'ouvre prérempli.
onPageChange	(page: number) =&gt; void	—
onPageSizeChange	(pageSize: number) =&gt; void	—
onRetry	() =&gt; void	—
onSearch	(query: string) =&gt; void	—
onSubmit	(values: FormShape, context: { mode: "create" | "edit"; row?: T; index?: number; }) =&gt; any	—	Ce que la page fait d'un formulaire envoyé. Rendre des erreurs par champ, ou lever une HttpError, garde la boîte ouverte avec les erreurs affichées ; sinon elle se ferme.
onView	(row: T, index: number) =&gt; void	—	Idem : sans lui, la boîte de détail s'ouvre.
operations	{ create?: false | CrudCreateOptions; view?: false | CrudActionOptions&lt;T&gt;; edit?: false | CrudActionOptions&lt;T&gt;; delete?: false | CrudActionOptions&lt;...&gt;; }	—	De quoi s'écarter des défauts. false retire une action alors même que son gestionnaire existe — utile quand le gestionnaire sert ailleurs, par exemple à un raccourci clavier.
page	number	—
pageHeaderProps	Partial&lt;Omit&lt;PageHeaderProps, "actions"&gt;&gt;	—	Les props du PageHeader. Sans actions, composées de headerActions et du bouton de création. className s'ajoute.
pageSize	number	—	Avec onPageSizeChange, ajoute le choix du nombre de lignes par page.
pageSizeOptions	number[]	—	Les tailles proposées — voir Pagination.
paginationProps	Partial&lt;Omit&lt;PaginationProps, "page" | "totalPages" | "onPageChange"&gt;&gt;	—	Les props de la Pagination — jumpTo, compact, siblingCount. Sans page, totalPages ni onPageChange, qui ont leurs props ici.
resource	any	—	La ressource, déclarée une fois avec defineResource. Colonnes, formulaire, détail, validation, recherche, clé de ligne et droits en sont dérivés. Chacun reste remplaçable — columns, fields, validate, searchKeys passent devant la dérivation.
searchDelay	number	—	Temporise onSearch — voir DataTable. 300 pour une recherche serveur.
searchKeys	string[]	—
searchPlaceholder	string	—
table	Partial&lt;Omit&lt;DataTableProps&lt;T&gt;, "columns" | "data"&gt;&gt;	—	Ce qui n'a pas de raccourci ici passe au tableau tel quel — densité, mode cartes, tri, colonnes figées.
title	ReactNode	—	À défaut, le pluriel de la ressource.
toFormValues	(row: T) =&gt; FormShape	—	Comment une ligne devient des valeurs de formulaire. Par défaut, les champs de même nom sont repris tels quels. À fournir dès que la ligne et le formulaire ne parlent pas la même langue — une date ISO à découper, un objet lié à réduire à son identifiant.
toolbar	ReactNode	—
totalPages	number	—
validate	FormValidator&lt;FormShape&gt;	—	La validation, sous la même forme que Form. createValidator de @sia-ui/utils/validation en produit une; un Zod s'y branche en cinq lignes, sans que le composant connaisse Zod.

Props de CrudDialogs

Les boîtes du CRUD : créer, modifier, consulter.

Elles n'inventent rien — Modal pour la boîte, Form pour la saisie, Descriptions pour la lecture. Ce qu'elles apportent est de savoir laquelle ouvrir, avec quelles valeurs, et de refermer une fois l'envoi passé.

Prop	Type	Défaut	Description
* columns	DataTableColumn<T>[]	—
* onClose	() => void	—
* state	CrudDialogState<T>	—
createDefaults	any	—
descriptionsProps	Partial<Omit<DescriptionsProps, "items">>	—	Voir CrudDescriptionsProps.
dialog	CrudDialogOptions	—
editFields	FormEntry[]	—	Les champs et la validation de la modification, quand ils diffèrent de la création — un mot de passe exigé à la création seulement. À défaut, fields et validate servent aux deux.
editValidate	any	—
fields	FormEntry[]	—
formProps	Partial<Omit<FormProps, "form" | "onSubmit" | "fields" | "defaultValues" | "validate">>	—	Voir CrudFormProps.
getRowKey	(row: T, index: number) => Key	—
modalProps	Partial<Omit<ModalProps, "children" | "title" | "description" | "open" | "onOpenChange">>	—	Voir CrudModalProps.
onSubmit	(values: FormShape, context: { mode: "create" | "edit"; row?: T; index?: number; }) => any	—
renderDetail	(row: T, index: number) => ReactNode	—
toFormValues	(row: T) => FormShape	—
validate	any	—

* obligatoire.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.