Form e data table shadcn, collegati insieme

Form e data table shadcn

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

Crea un form shadcn/ui con React Hook Form e Zod, salvalo con una server action e mostra i risultati in una data table shadcn con ordinamento, ricerca e paginazione. Demo dal vivo e codice da copiare.

Un form shadcn/ui abbina i componenti Field al Controller di React Hook Form e a uno schema Zod passato tramite zodResolver. Una data table shadcn abbina i componenti Table a TanStack Table per ordinamento, ricerca e pagine. Qui sotto, un form di prenotazione aggiunge righe dal vivo a una tabella delle prenotazioni, con il codice per entrambi.

Pacchetti

Parte
Installazione

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

Tabella
@tanstack/react-table

UI
npx shadcn@latest add field input table button

Invia il form con un errore per vedere i messaggi, poi prenota un tavolo e guardalo comparire nell'elenco sottostante. L'anteprima usa le copie dei componenti shadcn del nostro sito e uno stato semplice per la tabella; il codice è la versione completa con shadcn, React Hook Form, Zod e TanStack.

Aggiungi i componenti shadcn e installa i tre pacchetti per il form e TanStack Table.
Scrivi un unico schema Zod per il form e importalo anche sul server.
Renderizza ogni campo tramite Controller dentro un Field shadcn.
Salva con una server action che valida di nuovo e restituisce gli errori dei campi.
Mostra le righe salvate nella Table shadcn gestita da TanStack Table.

Imposta defaultValues per ogni campo così reset() svuota il form in modo pulito dopo un salvataggio.
Usa z.coerce.number() per gli input numerici; i valori degli input arrivano come stringhe.
Metti una riga di stato vuoto nel corpo della tabella così una ricerca senza risultati lo dice.
Racchiudi le etichette di ordinamento in un Button così anche chi usa la tastiera può ordinare.

Domande frequenti

Devo usare il componente Form o il componente Field?

L'attuale guida ai form di shadcn/ui costruisce i form con Field, FieldLabel e FieldError insieme al Controller di React Hook Form. I progetti più vecchi usano i wrapper Form e FormField; entrambi si basano su React Hook Form, quindi i form esistenti continuano a funzionare.

Mi serve TanStack Table per una tabella shadcn?

No. I componenti Table di shadcn sono semplici elementi table stilizzati. Aggiungi TanStack Table quando ti servono ordinamento, filtri, paginazione o selezione.

Come mostro gli errori del server sotto il campo giusto?

Fai restituire alla server action gli errori indicizzati per nome del campo, poi chiama form.setError(field, { message }) per ciascuno. FieldError li mostra come qualsiasi altro messaggio di validazione.

La tabella può aggiornarsi dopo il salvataggio del form?

Sì. In Next.js, chiama revalidatePath nella server action così la pagina che renderizza la tabella recupera le righe aggiornate. In un'app solo client, aggiungi la nuova riga allo stato dei dati o rifai la richiesta.

Andare oltre

Per altri schemi di React Hook Form, come field array, procedure guidate e caricamento di file, consulta i nostri esempi di React Hook Form. Per visibilità delle colonne, selezione delle righe, intestazioni fisse e paginazione lato server in TanStack Table v9, consulta la nostra guida alle data table in React.

Errori comuni

Passare field con lo spread a un Select shadcn, che si aspetta value e onValueChange invece di onChange. Mappali a mano dentro il Controller.
Ricreare l'oggetto features di TanStack dentro il componente, cosa che azzera ordinamento e paginazione a ogni render.

Come si incastrano i pezzi

Chi fa cosa

Compito
Gestito da

Layout dei campi, etichette, stile degli errori
Componenti Field di shadcn

Stato del form, invio, focus sul primo errore
React Hook Form

Regole e messaggi, condivisi con il server
Schema Zod

Aspetto della tabella
Componenti Table di shadcn

Ordinamento, ricerca, pagine
TanStack Table

Salvataggio
Una server action o una API route, che valida di nuovo

Il form

Installa i pezzi

La parte del form richiede React Hook Form, Zod e il resolver; la parte della tabella richiede TanStack Table. La CLI di shadcn copia i componenti UI.

Form di prenotazione: Field shadcn + React Hook Form + Zod

Controller collega ogni input. data-invalid su Field stilizza l'intera riga, aria-invalid sull'input informa gli screen reader e FieldError mostra il messaggio di Zod.

Salvare con una server action

Esegui di nuovo lo stesso schema sul server. Restituisci gli errori dei campi e riportali sul form con setError.

La data table

Data table: Table shadcn + TanStack Table

I componenti Table di shadcn sono elementi table stilizzati; TanStack fornisce ordinamento, filtri e pagine. L'oggetto features e le colonne stanno fuori dal componente così restano stabili.

Vuoi prima altri blocchi già composti? Guarda gli

esempi di shadcn/ui

Dicci il tuo nome

Inserisci un'email valida

Almeno 1

Chiamaci per gruppi di oltre 12 persone

Resta sotto i 300 caratteri

Nome

Ospiti

Note

Prenotazione in corso...

Prenota un tavolo

Orario

Cerca prenotazioni

Nessun risultato.

Pagina {p} di {n}

Inizia gratis · Nessuna carta di credito richiesta

Correlati: Guide

Prodotto

Per chi è

Funzionalità

Risorse

Azienda

Mappa del sito