Formulário e data table do shadcn, conectados

Formulário e data table do shadcn

Formulário e data table do shadcn: React Hook Form, Zod, TanStack | We.Inc

Crie um formulário shadcn/ui com React Hook Form e Zod, salve com uma server action e mostre os resultados em um data table do shadcn com ordenação, busca e paginação. Demos ao vivo e código para copiar.

Um formulário shadcn/ui combina os componentes Field com o Controller do React Hook Form e um schema Zod passado pelo zodResolver. Um data table do shadcn combina os componentes Table com o TanStack Table para ordenação, busca e páginas. Abaixo, um formulário de reserva adiciona linhas a uma tabela de reservas ao vivo, com o código dos dois.

Pacotes

Lado
Instalar

Formulário
react-hook-form, zod, @hookform/resolvers

Tabela
@tanstack/react-table

UI
npx shadcn@latest add field input table button

Envie o formulário com um erro para ver as mensagens, depois reserve uma mesa e veja a reserva aparecer na lista logo abaixo. A prévia usa as cópias das peças do shadcn do nosso site e um state simples para a tabela; o código é a versão completa com shadcn, React Hook Form, Zod e TanStack.

Adicione os componentes do shadcn e instale os três pacotes de formulário e o TanStack Table.
Escreva um único schema Zod para o formulário e importe-o também no servidor.
Renderize cada campo pelo Controller dentro de um Field do shadcn.
Salve com uma server action que valida de novo e devolve os erros por campo.
Mostre as linhas salvas no Table do shadcn controlado pelo TanStack Table.

Defina defaultValues para todos os campos para que reset() limpe o formulário direitinho depois de salvar.
Use z.coerce.number() para inputs numéricos; os valores dos inputs chegam como strings.
Coloque uma linha de estado vazio no corpo da tabela para que uma busca sem resultados avise isso.
Envolva os rótulos de ordenação em um Button para que quem usa teclado também consiga ordenar.

Perguntas frequentes

Devo usar o componente Form ou o componente Field?

O guia atual de formulários do shadcn/ui monta formulários com Field, FieldLabel e FieldError e o Controller do React Hook Form. Projetos mais antigos usam os wrappers Form e FormField; os dois dependem do React Hook Form, então os formulários existentes continuam funcionando.

Preciso do TanStack Table para uma tabela do shadcn?

Não. Os componentes Table do shadcn são apenas elementos de tabela estilizados. Adicione o TanStack Table quando precisar de ordenação, filtros, paginação ou seleção.

Como mostro erros do servidor embaixo do campo certo?

Faça a server action devolver os erros indexados pelo nome do campo e chame form.setError(field, { message }) para cada um. O FieldError os exibe como qualquer outra mensagem de validação.

A tabela pode ser atualizada depois que o formulário salva?

Sim. No Next.js, chame revalidatePath na server action para que a página que renderiza a tabela busque linhas novas. Em um app só no cliente, adicione a nova linha ao state dos dados ou busque de novo.

Indo além

Para mais padrões do React Hook Form, como field arrays, wizards e upload de arquivos, veja os nossos exemplos de React Hook Form. Para visibilidade de colunas, seleção de linhas, cabeçalhos fixos e paginação no servidor com o TanStack Table v9, veja o nosso guia de data table em React.

Erros comuns

Espalhar field em um Select do shadcn, que espera value e onValueChange em vez de onChange. Mapeie-os à mão dentro do Controller.
Recriar o objeto de features do TanStack dentro do componente, o que zera a ordenação e a paginação a cada renderização.

Como as peças se encaixam

Quem faz o quê

Tarefa
Responsável

Layout dos campos, rótulos, estilo de erro
Componentes Field do shadcn

Estado do formulário, envio, foco no primeiro erro
React Hook Form

Regras e mensagens, compartilhadas com o servidor
Schema Zod

Visual da tabela
Componentes Table do shadcn

Ordenação, busca, páginas
TanStack Table

Salvar
Uma server action ou rota de API, validando de novo

O formulário

Instale as peças

O lado do formulário precisa do React Hook Form, do Zod e do resolver; o lado da tabela precisa do TanStack Table. A CLI do shadcn copia as partes da UI.

Formulário de reserva: Field do shadcn + React Hook Form + Zod

O Controller conecta cada input. data-invalid no Field estiliza a linha inteira, aria-invalid no input avisa os leitores de tela e o FieldError mostra a mensagem do Zod.

Salvando com uma server action

Rode o mesmo schema de novo no servidor. Devolva os erros por campo e coloque-os de volta no formulário com setError.

O data table

Data table: Table do shadcn + TanStack Table

Os componentes Table do shadcn são elementos de tabela estilizados; o TanStack fornece ordenação, filtros e páginas. O objeto de features e as colunas ficam fora do componente para continuarem estáveis.

Quer ver mais blocos prontos antes? Veja os

exemplos de shadcn/ui

Diga o seu nome

Digite um e-mail válido

Pelo menos 1

Ligue para nós para grupos com mais de 12

Use menos de 300 caracteres

Nome

E-mail

Pessoas

Observações

Reservando...

Reservar uma mesa

Horário

Buscar reservas

Nenhum resultado.

Página {p} de {n}

Comece grátis · Sem cartão de crédito

Formulário e data table do shadcn, conectados