Formulaire et data table shadcn, reliés ensemble

Formulaire et data table shadcn

Formulaire et data table shadcn : React Hook Form, Zod, TanStack | We.Inc

Créez un formulaire shadcn/ui avec React Hook Form et Zod, enregistrez-le avec une server action, et affichez les résultats dans une data table shadcn avec tri, recherche et pagination. Démos en direct et code à copier.

Un formulaire shadcn/ui associe les composants Field au Controller de React Hook Form et à un schéma Zod passé par zodResolver. Une data table shadcn associe les composants Table à TanStack Table pour le tri, la recherche et la pagination. Ci-dessous, un formulaire de réservation ajoute des lignes en direct à un tableau de réservations, avec le code des deux.

Packages

Côté
Installation

Formulaire
react-hook-form, zod, @hookform/resolvers

Tableau
@tanstack/react-table

UI
npx shadcn@latest add field input table button

Envoyez le formulaire avec une erreur pour voir les messages, puis réservez une table et regardez-la apparaître dans la liste en dessous. L'aperçu utilise les copies des composants shadcn de notre site et un simple state pour le tableau ; le code est la version complète avec shadcn, React Hook Form, Zod et TanStack.

Ajoutez les composants shadcn et installez les trois packages de formulaire ainsi que TanStack Table.
Écrivez un seul schéma Zod pour le formulaire et importez-le aussi côté serveur.
Affichez chaque champ via Controller à l'intérieur d'un Field shadcn.
Enregistrez avec une server action qui valide à nouveau et renvoie les erreurs par champ.
Affichez les lignes enregistrées dans la Table shadcn pilotée par TanStack Table.

Définissez des defaultValues pour chaque champ afin que reset() vide proprement le formulaire après un enregistrement.
Utilisez z.coerce.number() pour les champs numériques ; les valeurs des inputs arrivent sous forme de chaînes.
Ajoutez une ligne d'état vide dans le corps du tableau pour qu'une recherche sans résultat l'indique.
Placez les libellés de tri dans un Button pour que les utilisateurs du clavier puissent aussi trier.

Questions fréquentes

Faut-il utiliser le composant Form ou le composant Field ?

Le guide actuel des formulaires shadcn/ui construit les formulaires avec Field, FieldLabel et FieldError et le Controller de React Hook Form. Les projets plus anciens utilisent les wrappers Form et FormField ; les deux reposent sur React Hook Form, donc les formulaires existants continuent de fonctionner.

Ai-je besoin de TanStack Table pour un tableau shadcn ?

Non. Les composants Table de shadcn ne sont que des éléments de tableau stylisés. Ajoutez TanStack Table quand vous avez besoin de tri, de filtrage, de pagination ou de sélection.

Comment afficher les erreurs serveur sous le bon champ ?

Faites renvoyer par la server action des erreurs indexées par nom de champ, puis appelez form.setError(field, { message }) pour chacune. FieldError les affiche comme n'importe quel autre message de validation.

Le tableau peut-il se rafraîchir après l'enregistrement du formulaire ?

Oui. Dans Next.js, appelez revalidatePath dans la server action pour que la page qui affiche le tableau récupère des lignes à jour. Dans une application uniquement côté client, ajoutez la nouvelle ligne à votre state de données ou relancez la requête.

Pour aller plus loin

Pour d'autres modèles React Hook Form, comme les field arrays, les assistants en plusieurs étapes et les envois de fichiers, consultez nos exemples React Hook Form. Pour la visibilité des colonnes, la sélection de lignes, les en-têtes fixes et la pagination côté serveur dans TanStack Table v9, consultez notre guide des data tables React.

Erreurs courantes

Étaler field sur un Select shadcn, qui attend value et onValueChange plutôt que onChange. Faites la correspondance à la main dans le Controller.
Recréer l'objet features de TanStack à l'intérieur du composant, ce qui réinitialise le tri et la pagination à chaque rendu.

Comment les éléments s'articulent

Qui fait quoi

Rôle
Assuré par

Disposition des champs, libellés, style des erreurs
Composants Field de shadcn

État du formulaire, envoi, focus sur la première erreur
React Hook Form

Règles et messages, partagés avec le serveur
Schéma Zod

Apparence du tableau
Composants Table de shadcn

Tri, recherche, pagination
TanStack Table

Enregistrement
Une server action ou une route API, qui valide à nouveau

Le formulaire

Installer les éléments

Le côté formulaire a besoin de React Hook Form, de Zod et du resolver ; le côté tableau a besoin de TanStack Table. La CLI shadcn copie les composants d'interface.

Formulaire de réservation : Field shadcn + React Hook Form + Zod

Controller connecte chaque input. data-invalid sur Field stylise toute la ligne, aria-invalid sur l'input informe les lecteurs d'écran, et FieldError affiche le message Zod.

Enregistrer avec une server action

Exécutez à nouveau le même schéma côté serveur. Renvoyez les erreurs par champ et replacez-les sur le formulaire avec setError.

La data table

Data table : Table shadcn + TanStack Table

Les composants Table de shadcn sont des éléments de tableau stylisés ; TanStack fournit le tri, le filtrage et la pagination. L'objet features et les colonnes sont définis hors du composant pour rester stables.

Vous voulez d'abord des blocs plus complets ? Consultez les

exemples shadcn/ui

Indiquez votre nom

Saisissez une adresse e-mail valide

Au moins 1

Appelez-nous pour les groupes de plus de 12

Restez sous les 300 caractères

Nom

E-mail

Convives

Remarques

Réservation...

Réserver une table

Heure

Rechercher des réservations

Aucun résultat.

Page {p} sur {n}

Commencer gratuitement · Sans carte bancaire

Formulaire et data table shadcn, reliés ensemble