shadcn-formulier en data table, aan elkaar gekoppeld

shadcn-formulier en data table

shadcn-formulier en data table: React Hook Form, Zod, TanStack | We.Inc

Bouw een shadcn/ui-formulier met React Hook Form en Zod, sla het op met een server action en toon de resultaten in een shadcn data table met sorteren, zoeken en paginering. Live demo's en code om te kopiëren.

Een shadcn/ui-formulier combineert de Field-componenten met de Controller van React Hook Form en een Zod-schema dat via zodResolver wordt doorgegeven. Een shadcn data table combineert de Table-componenten met TanStack Table voor sorteren, zoeken en pagina's. Hieronder voegt een reserveringsformulier live rijen toe aan een tabel met reserveringen, met de code voor beide.

Pakketten

Kant
Installeren

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

Tabel
@tanstack/react-table

UI
npx shadcn@latest add field input table button

Verstuur het formulier met een fout om de foutmeldingen te zien, reserveer daarna een tafel en zie hem verschijnen in de lijst eronder. De preview gebruikt de kopieën van de shadcn-onderdelen op onze site en gewone state voor de tabel; de code is de volledige versie met shadcn, React Hook Form, Zod en TanStack.

Voeg de shadcn-componenten toe en installeer de drie formulierpakketten en TanStack Table.
Schrijf één Zod-schema voor het formulier en importeer het ook op de server.
Render elk veld via Controller binnen een shadcn Field.
Sla op met een server action die opnieuw valideert en veldfouten teruggeeft.
Toon opgeslagen rijen in de shadcn Table, aangestuurd door TanStack Table.

Stel defaultValues in voor elk veld, zodat reset() het formulier na het opslaan netjes leegmaakt.
Gebruik z.coerce.number() voor getalvelden; invoerwaarden komen binnen als strings.
Zet een rij voor de lege toestand in de tabelbody, zodat een zoekopdracht zonder resultaten dat ook meldt.
Zet sorteerlabels in een Button, zodat toetsenbordgebruikers ook kunnen sorteren.

Veelgestelde vragen

Gebruik ik het Form-component of het Field-component?

De huidige formuliergids van shadcn/ui bouwt formulieren met Field, FieldLabel en FieldError en de Controller van React Hook Form. Oudere projecten gebruiken de wrappers Form en FormField; beide steunen op React Hook Form, dus bestaande formulieren blijven werken.

Heb ik TanStack Table nodig voor een shadcn-tabel?

Nee. De shadcn Table-componenten zijn gewoon opgemaakte tabelelementen. Voeg TanStack Table toe als u sorteren, filteren, paginering of selectie nodig hebt.

Hoe toon ik serverfouten onder het juiste veld?

Laat de server action fouten teruggeven met de veldnaam als sleutel en roep voor elke fout form.setError(field, { message }) aan. FieldError toont ze net als elke andere validatiemelding.

Kan de tabel vernieuwen nadat het formulier is opgeslagen?

Ja. Roep in Next.js revalidatePath aan in de server action, zodat de pagina die de tabel rendert nieuwe rijen ophaalt. In een app die alleen aan de clientkant draait, voegt u de nieuwe rij toe aan uw data-state of haalt u opnieuw op.

Verder gaan

Voor meer patronen met React Hook Form, zoals field arrays, wizards en bestandsuploads, zie onze voorbeelden van React Hook Form. Voor kolomzichtbaarheid, rijselectie, vaste kopteksten en paginering aan de serverkant in TanStack Table v9, zie onze gids voor React data tables.

Veelgemaakte fouten

field uitspreiden op een shadcn Select, die value en onValueChange verwacht in plaats van onChange. Koppel ze met de hand binnen de Controller.
Het features-object van TanStack opnieuw opbouwen binnen het component, waardoor sorteren en paginering bij elke render worden gereset.

Hoe de onderdelen samenwerken

Wie doet wat

Taak
Geregeld door

Veldindeling, labels, opmaak van fouten
shadcn Field-componenten

Formulierstate, versturen, focus op eerste fout
React Hook Form

Regels en meldingen, gedeeld met de server
Zod-schema

Uiterlijk van de tabel
shadcn Table-componenten

Sorteren, zoeken, pagina's
TanStack Table

Opslaan
Een server action of API-route, die opnieuw valideert

Het formulier

De onderdelen installeren

De formulierkant heeft React Hook Form, Zod en de resolver nodig; de tabelkant heeft TanStack Table nodig. De shadcn CLI kopieert de UI-onderdelen erin.

Reserveringsformulier: shadcn Field + React Hook Form + Zod

Controller koppelt elke invoer. data-invalid op Field stijlt de hele rij, aria-invalid op de invoer informeert schermlezers, en FieldError toont de melding van Zod.

Opslaan met een server action

Voer hetzelfde schema opnieuw uit op de server. Geef veldfouten terug en zet ze met setError terug op het formulier.

De data table

Data table: shadcn Table + TanStack Table

De Table-componenten van shadcn zijn opgemaakte tabelelementen; TanStack levert sorteren, filteren en pagina's. Het features-object en de kolommen staan buiten het component, zodat ze stabiel blijven.

Eerst meer samengestelde blokken zien? Bekijk

shadcn/ui-voorbeelden

Vul uw naam in

Voer een geldig e-mailadres in

Minstens 1

Bel ons voor groepen groter dan 12

Houd het onder 300 tekens

Naam

E-mail

Gasten

Opmerkingen

Bezig met reserveren...

Tafel reserveren

Tijd

Reserveringen zoeken

Geen resultaten.

Pagina {p} van {n}

Gratis beginnen · Geen creditcard nodig

Gerelateerd: Gidsen

Product

Voor wie

Functies

Bronnen

Bedrijf

Sitemap