React Hook FormとZodでshadcn/uiのフォームを作り、サーバーアクションで保存して、並べ替え、検索、ページ送りを備えたshadcnのデータテーブルに結果を表示します。ライブデモとコピーできるコード付きです。
shadcn/uiのフォームは、FieldコンポーネントとReact Hook FormのController、そしてzodResolver経由で渡すZodスキーマを組み合わせて作ります。shadcnのデータテーブルは、TableコンポーネントとTanStack Tableを組み合わせて、並べ替え、検索、ページ送りを実現します。下では予約フォームから予約テーブルにリアルタイムで行が追加され、両方のコードも確認できます。
パッケージ
わざと間違えてフォームを送信するとエラーを確認できます。その後、テーブルを予約すると、下の一覧に追加される様子を見られます。プレビューでは当サイトにコピーしたshadcnのパーツを使い、テーブルは単純なステートで動かしています。コードは、shadcn、React Hook Form、Zod、TanStackを使った完全版です。
現在のshadcn/uiのフォームガイドは、Field、FieldLabel、FieldErrorとReact Hook FormのControllerでフォームを作っています。古いプロジェクトではFormとFormFieldのラッパーを使っていますが、どちらもReact Hook Formに依存しているので、既存のフォームはそのまま動作します。
いいえ。Tableコンポーネントは、スタイルを当てたテーブル要素にすぎません。並べ替え、絞り込み、ページ送り、選択が必要になったらTanStack Tableを追加しましょう。
サーバーアクションからフィールド名をキーにしたエラーを返し、それぞれに対してform.setError(field, { message })を呼び出します。FieldErrorは、他のバリデーションメッセージと同じようにそれを表示します。
はい。Next.jsでは、サーバーアクション内でrevalidatePathを呼び出すと、テーブルを描画するページが新しい行を取得します。クライアントのみのアプリでは、新しい行をデータのステートに追加するか、再取得します。
役割分担
フォーム側にはReact Hook Form、Zod、リゾルバーが、テーブル側にはTanStack Tableが必要です。UIのパーツはshadcnのCLIがコピーしてくれます。
Controllerが各入力欄を接続します。Fieldのdata-invalidで行全体にスタイルを当て、入力欄のaria-invalidでスクリーンリーダーに入力が無効であることを伝え、FieldErrorがZodのメッセージを表示します。
サーバーで同じスキーマをもう一度実行します。フィールドのエラーを返し、setErrorでフォームに戻します。
Tableコンポーネントはスタイルを当てたテーブル要素で、TanStackが並べ替え、絞り込み、ページ送りを提供します。機能設定オブジェクトと列の定義はコンポーネントの外に置き、描画のたびに作り直されず安定した状態を保ちます。
先にもっと組み上がったブロックを見たい場合は、こちらをご覧ください：
お名前を入力してください
有効なメールアドレスを入力してください
1名以上
12名を超える団体はお電話ください
300文字以内で入力してください
メールアドレス
人数
備考
予約中...
テーブルを予約
時間
予約を検索
結果がありません。
{n}ページ中{p}ページ目
前へ
次へ
無料で始める · クレジットカード不要