Formularz i tabela danych shadcn połączone razem

Formularz i tabela danych shadcn

Formularz i tabela danych shadcn: React Hook Form, Zod, TanStack | We.Inc

Zbuduj formularz shadcn/ui z React Hook Form i Zod, zapisz go za pomocą server action i pokaż wyniki w tabeli danych shadcn z sortowaniem, wyszukiwaniem i stronicowaniem. Dema na żywo i kod do skopiowania.

Formularz shadcn/ui łączy komponenty Field z Controllerem z React Hook Form i schematem Zod przekazanym przez zodResolver. Tabela danych shadcn łączy komponenty Table z TanStack Table, który zapewnia sortowanie, wyszukiwanie i strony. Poniżej formularz rezerwacji na żywo dodaje wiersze do tabeli rezerwacji, z kodem dla obu.

Pakiety

Strona
Instalacja

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

Tabela
@tanstack/react-table

UI
npx shadcn@latest add field input table button

Wyślij formularz z błędem, by zobaczyć komunikaty, a potem zarezerwuj stolik i zobacz, jak pojawia się na liście poniżej. Podgląd korzysta z kopii elementów shadcn używanych na naszej stronie i prostego stanu dla tabeli; kod to pełna wersja z shadcn, React Hook Form, Zod i TanStack.

Dodaj komponenty shadcn i zainstaluj trzy pakiety formularza oraz TanStack Table.
Napisz jeden schemat Zod dla formularza i zaimportuj go także na serwerze.
Renderuj każde pole przez Controller wewnątrz shadcn Field.
Zapisuj za pomocą server action, która ponownie waliduje dane i zwraca błędy pól.
Pokaż zapisane wiersze w shadcn Table sterowanej przez TanStack Table.

Ustaw defaultValues dla każdego pola, by reset() czysto wyczyścił formularz po zapisie.
Używaj z.coerce.number() dla pól liczbowych; wartości pól przychodzą jako ciągi znaków.
Dodaj w treści tabeli wiersz pustego stanu, by wyszukiwanie bez wyników to komunikowało.
Opakuj etykiety sortowania w Button, by użytkownicy klawiatury też mogli sortować.

Najczęściej zadawane pytania

Używać komponentu Form czy komponentu Field?

Aktualny przewodnik po formularzach shadcn/ui buduje formularze z Field, FieldLabel i FieldError razem z Controllerem z React Hook Form. Starsze projekty używają opakowań Form i FormField; oba podejścia opierają się na React Hook Form, więc istniejące formularze nadal działają.

Czy do tabeli shadcn potrzebuję TanStack Table?

Nie. Komponenty Table w shadcn to po prostu ostylowane elementy tabeli. Dodaj TanStack Table, gdy potrzebujesz sortowania, filtrowania, stronicowania lub zaznaczania.

Jak pokazać błędy z serwera pod właściwym polem?

Niech server action zwraca błędy z kluczami w postaci nazw pól, a potem wywołaj form.setError(field, { message }) dla każdego z nich. FieldError pokaże je jak każdy inny komunikat walidacji.

Czy tabela może się odświeżyć po zapisaniu formularza?

Tak. W Next.js wywołaj revalidatePath w server action, by strona renderująca tabelę pobrała świeże wiersze. W aplikacji działającej tylko po stronie klienta dodaj nowy wiersz do stanu danych lub pobierz je ponownie.

Co dalej

Więcej wzorców React Hook Form, takich jak tablice pól, kreatory wieloetapowe i przesyłanie plików, znajdziesz w naszych przykładach React Hook Form. Widoczność kolumn, zaznaczanie wierszy, przyklejone nagłówki i stronicowanie po stronie serwera w TanStack Table v9 opisujemy w naszym przewodniku po tabelach danych w React.

Typowe błędy

Rozpakowywanie field na shadcn Select, który oczekuje value i onValueChange zamiast onChange. Zmapuj je ręcznie wewnątrz Controllera.
Tworzenie obiektu features z TanStack na nowo wewnątrz komponentu, co resetuje sortowanie i stronicowanie przy każdym renderze.

Jak elementy do siebie pasują

Kto za co odpowiada

Zadanie
Obsługuje

Układ pól, etykiety, styl błędów
Komponenty shadcn Field

Stan formularza, wysyłka, fokus na pierwszym błędzie
React Hook Form

Reguły i komunikaty, współdzielone z serwerem
Schemat Zod

Wygląd tabeli
Komponenty shadcn Table

Sortowanie, wyszukiwanie, strony
TanStack Table

Zapis
Server action lub trasa API, ponownie walidująca dane

Formularz

Instalacja elementów

Strona formularza wymaga React Hook Form, Zod i resolvera; strona tabeli wymaga TanStack Table. CLI shadcn kopiuje elementy UI.

Formularz rezerwacji: shadcn Field + React Hook Form + Zod

Controller podłącza każde pole. data-invalid na Field stylizuje cały wiersz, aria-invalid na polu informuje czytniki ekranu, a FieldError wyświetla komunikat Zod.

Zapis za pomocą server action

Uruchom ten sam schemat ponownie na serwerze. Zwróć błędy pól i przywróć je w formularzu za pomocą setError.

Tabela danych

Tabela danych: shadcn Table + TanStack Table

Komponenty Table w shadcn to ostylowane elementy tabeli; TanStack zapewnia sortowanie, filtrowanie i strony. Obiekt features i kolumny znajdują się poza komponentem, dzięki czemu pozostają stabilne.

Najpierw chcesz zobaczyć więcej gotowych bloków? Zobacz

przykłady shadcn/ui

Podaj swoje imię

Wpisz poprawny adres email

Co najmniej 1

W przypadku grup powyżej 12 osób zadzwoń do nas

Maksymalnie 300 znaków

Imię

Goście

Uwagi

Rezerwuję...

Zarezerwuj stolik

Godzina

Szukaj rezerwacji

Brak wyników.

Strona {p} z {n}

Poprzednia

Następna

Zacznij za darmo · Bez karty kredytowej

Powiązane: Poradniki

Produkt

Dla kogo

Funkcje

Zasoby

Firma

Mapa strony