Formulario y tabla de datos shadcn, conectados

Formulario y tabla de datos shadcn

Formulario y tabla de datos shadcn: React Hook Form, Zod y TanStack | We.Inc

Crea un formulario shadcn/ui con React Hook Form y Zod, guárdalo con una server action y muestra los resultados en una tabla de datos shadcn con ordenación, búsqueda y paginación. Demos en vivo y código para copiar.

Un formulario shadcn/ui combina los componentes Field con el Controller de React Hook Form y un esquema de Zod pasado mediante zodResolver. Una tabla de datos shadcn combina los componentes Table con TanStack Table para ordenar, buscar y paginar. Abajo, un formulario de reservas añade filas en vivo a una tabla de reservas, con el código de ambos.

Paquetes

Parte
Instalar

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

Tabla
@tanstack/react-table

UI
npx shadcn@latest add field input table button

Envía el formulario con un error para ver los mensajes, luego reserva una mesa y mira cómo aparece en la lista de abajo. La vista previa usa las copias de las piezas de shadcn de nuestro sitio y un estado simple para la tabla; el código es la versión completa con shadcn, React Hook Form, Zod y TanStack.

Añade los componentes de shadcn e instala los tres paquetes del formulario y TanStack Table.
Escribe un único esquema de Zod para el formulario e impórtalo también en el servidor.
Renderiza cada campo mediante Controller dentro de un Field de shadcn.
Guarda con una server action que vuelve a validar y devuelve los errores de cada campo.
Muestra las filas guardadas en el Table de shadcn controlado por TanStack Table.

Define defaultValues para todos los campos para que reset() limpie bien el formulario después de guardar.
Usa z.coerce.number() para los campos numéricos; los valores de los inputs llegan como texto.
Pon una fila de estado vacío en el cuerpo de la tabla para que una búsqueda sin resultados lo indique.
Envuelve las etiquetas de ordenación en un Button para que los usuarios de teclado también puedan ordenar.

Preguntas frecuentes

¿Debo usar el componente Form o el componente Field?

La guía actual de formularios de shadcn/ui construye los formularios con Field, FieldLabel y FieldError junto con el Controller de React Hook Form. Los proyectos antiguos usan los envoltorios Form y FormField; ambos se basan en React Hook Form, así que los formularios existentes siguen funcionando.

¿Necesito TanStack Table para una tabla de shadcn?

No. Los componentes Table de shadcn son solo elementos de tabla con estilos. Añade TanStack Table cuando necesites ordenación, filtrado, paginación o selección.

¿Cómo muestro los errores del servidor bajo el campo correcto?

Haz que la server action devuelva los errores indexados por nombre de campo y luego ejecuta form.setError(field, { message }) para cada uno. FieldError los muestra como cualquier otro mensaje de validación.

¿Puede actualizarse la tabla después de que el formulario guarde?

Sí. En Next.js, ejecuta revalidatePath en la server action para que la página que renderiza la tabla obtenga filas nuevas. En una aplicación solo de cliente, añade la fila nueva a tu estado de datos o vuelve a pedir los datos.

Para ir más allá

Para más patrones de React Hook Form, como arrays de campos, asistentes por pasos y subida de archivos, consulta nuestros ejemplos de React Hook Form. Para visibilidad de columnas, selección de filas, encabezados fijos y paginación en el servidor con TanStack Table v9, consulta nuestra guía de tablas de datos en React.

Errores habituales

Pasar field con spread a un Select de shadcn, que espera value y onValueChange en lugar de onChange. Asígnalos a mano dentro del Controller.
Volver a crear el objeto de funciones de TanStack dentro del componente, lo que reinicia la ordenación y la paginación en cada render.

Cómo encajan las piezas

Quién hace qué

Tarea
De qué se encarga

Disposición de campos, etiquetas, estilo de errores
Componentes Field de shadcn

Estado del formulario, envío, foco en el primer error
React Hook Form

Reglas y mensajes, compartidos con el servidor
Esquema de Zod

Aspecto de la tabla
Componentes Table de shadcn

Ordenación, búsqueda, páginas
TanStack Table

Guardado
Una server action o una ruta de API, que vuelve a validar

El formulario

Instala las piezas

La parte del formulario necesita React Hook Form, Zod y el resolver; la parte de la tabla necesita TanStack Table. La CLI de shadcn copia las piezas de UI.

Formulario de reservas: shadcn Field + React Hook Form + Zod

Controller conecta cada input. data-invalid en Field estiliza toda la fila, aria-invalid en el input avisa a los lectores de pantalla y FieldError muestra el mensaje de Zod.

Guardar con una server action

Vuelve a ejecutar el mismo esquema en el servidor. Devuelve los errores de cada campo y colócalos de nuevo en el formulario con setError.

La tabla de datos

Tabla de datos: shadcn Table + TanStack Table

Los componentes Table de shadcn son elementos de tabla con estilos; TanStack aporta la ordenación, el filtrado y las páginas. El objeto de funciones y las columnas se definen fuera del componente para que se mantengan estables.

¿Prefieres ver antes más bloques compuestos? Mira los

ejemplos de shadcn/ui

Dinos tu nombre

Introduce un email válido

Al menos 1

Para grupos de más de 12, contáctanos por teléfono

Usa menos de 300 caracteres

Nombre

Comensales

Notas

Reservando...

Reservar mesa

Hora

Buscar reservas

Sin resultados.

Página {p} de {n}

Empieza gratis · Sin tarjeta de crédito

Formulario y tabla de datos shadcn, conectados