shadcn-Formular und Data Table, sauber verbunden

shadcn-Formular und Data Table

shadcn-Formular und Data Table: React Hook Form, Zod, TanStack | We.Inc

Baue ein shadcn/ui-Formular mit React Hook Form und Zod, speichere es mit einer Server Action und zeige die Ergebnisse in einer shadcn Data Table mit Sortierung, Suche und Paginierung. Live-Demos und Code zum Kopieren.

Ein shadcn/ui-Formular kombiniert die Field-Komponenten mit dem Controller von React Hook Form und einem Zod-Schema, das über zodResolver übergeben wird. Eine shadcn Data Table kombiniert die Table-Komponenten mit TanStack Table für Sortierung, Suche und Seiten. Unten fügt ein Buchungsformular live Zeilen zu einer Buchungstabelle hinzu, mit dem Code für beides.

Pakete

Seite
Installieren

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

Tabelle
@tanstack/react-table

UI
npx shadcn@latest add field input table button

Sende das Formular mit einem Fehler ab, um die Fehlermeldungen zu sehen, und buche dann einen Tisch und sieh zu, wie er in der Liste darunter erscheint. Die Vorschau nutzt die Kopien der shadcn-Teile auf unserer Website und einfachen State für die Tabelle; der Code ist die vollständige Version mit shadcn, React Hook Form, Zod und TanStack.

Füge die shadcn-Komponenten hinzu und installiere die drei Formularpakete und TanStack Table.
Schreib ein Zod-Schema für das Formular und importiere es auch auf dem Server.
Rendere jedes Feld über Controller innerhalb eines shadcn Field.
Speichere mit einer Server Action, die erneut validiert und Feldfehler zurückgibt.
Zeige gespeicherte Zeilen in der shadcn Table, gesteuert von TanStack Table.

Setze defaultValues für jedes Feld, damit reset() das Formular nach dem Speichern sauber leert.
Nutze z.coerce.number() für Zahleneingaben; Eingabewerte kommen als Strings an.
Leg eine Leerzustand-Zeile in den Tabellenkörper, damit eine Suche ohne Ergebnisse das auch sagt.
Packe die Sortier-Labels in einen Button, damit auch Tastaturnutzer sortieren können.

Häufige Fragen

Soll ich die Form-Komponente oder die Field-Komponente verwenden?

Der aktuelle Formular-Guide von shadcn/ui baut Formulare aus Field, FieldLabel und FieldError mit dem Controller von React Hook Form. Ältere Projekte nutzen die Wrapper Form und FormField; beide setzen auf React Hook Form, bestehende Formulare funktionieren also weiter.

Brauche ich TanStack Table für eine shadcn-Tabelle?

Nein. Die shadcn-Table-Komponenten sind einfach gestaltete Tabellenelemente. Ergänze TanStack Table, wenn du Sortierung, Filter, Paginierung oder Auswahl brauchst.

Wie zeige ich Serverfehler unter dem richtigen Feld an?

Lass die Server Action Fehler nach Feldnamen zurückgeben und rufe dann für jeden form.setError(field, { message }) auf. FieldError zeigt sie wie jede andere Validierungsmeldung an.

Kann sich die Tabelle nach dem Speichern des Formulars aktualisieren?

Ja. Rufe in Next.js revalidatePath in der Server Action auf, damit die Seite, die die Tabelle rendert, frische Zeilen lädt. In einer reinen Client-App fügst du die neue Zeile deinem Daten-State hinzu oder lädst neu.

Weiterführendes

Für weitere Muster mit React Hook Form, etwa Feld-Arrays, Wizards und Datei-Uploads, sieh dir unsere React-Hook-Form-Beispiele an. Für Spaltensichtbarkeit, Zeilenauswahl, Sticky Header und serverseitiges Paging in TanStack Table v9 sieh dir unseren Guide zu React-Datentabellen an.

Häufige Fehler

field auf ein shadcn Select spreaden, das value und onValueChange statt onChange erwartet. Ordne sie im Controller von Hand zu.
Das TanStack-features-Objekt innerhalb der Komponente neu aufbauen, was Sortierung und Paging bei jedem Render zurücksetzt.

Wie die Teile zusammenpassen

Wer macht was

Aufgabe
Erledigt von

Feldlayout, Labels, Fehlerdarstellung
shadcn-Field-Komponenten

Formular-State, Absenden, Fokus auf den ersten Fehler
React Hook Form

Regeln und Meldungen, geteilt mit dem Server
Zod-Schema

Aussehen der Tabelle
shadcn-Table-Komponenten

Sortierung, Suche, Seiten
TanStack Table

Speichern
Eine Server Action oder API-Route, die erneut validiert

Das Formular

Die Teile installieren

Die Formularseite braucht React Hook Form, Zod und den Resolver; die Tabellenseite braucht TanStack Table. Die shadcn-CLI kopiert die UI-Teile hinein.

Buchungsformular: shadcn Field + React Hook Form + Zod

Controller verbindet jedes Eingabefeld. data-invalid auf Field gestaltet die ganze Zeile, aria-invalid auf dem input informiert Screenreader, und FieldError gibt die Zod-Meldung aus.

Speichern mit einer Server Action

Führe dasselbe Schema auf dem Server erneut aus. Gib Feldfehler zurück und setze sie mit setError wieder ins Formular.

Die Data Table

Data Table: shadcn Table + TanStack Table

Die Table-Komponenten von shadcn sind gestaltete Tabellenelemente; TanStack liefert Sortierung, Filter und Seiten. Das features-Objekt und die Spalten liegen außerhalb der Komponente, damit sie stabil bleiben.

Willst du zuerst mehr fertige Blöcke sehen? Sieh dir die

shadcn/ui-Beispiele an

Sag uns deinen Namen

Gib eine gültige E-Mail-Adresse ein

Mindestens 1

Ruf uns bei Gruppen über 12 an

Bitte unter 300 Zeichen bleiben

Name

E-Mail

Gäste

Notizen

Wird gebucht...

Tisch buchen

Uhrzeit

Buchungen durchsuchen

Keine Ergebnisse.

Seite {p} von {n}

Zurück

Weiter

Kostenlos starten · Keine Kreditkarte nötig

Verwandt: Ratgeber

Produkt

Für wen

Funktionen

Ressourcen

Unternehmen

Sitemap