Component Gallery

Recipe

テーブルをReactで実装する

テーブル（Table）をReact + Tailwind CSSで実装するための基本構成です。

実装時の注意点

  • ・意味のあるHTML構造を先に決める。
  • ・通常、フォーカス、無効、エラー、読み込み状態を確認する。
  • ・モバイル幅で文字や操作対象が崩れないようにする。

実装例

テーブルをReactで実装する

テーブル（Table）をReact + Tailwind CSSで実装するための基本構成です。

export function Example() {
  return <div className="rounded-md border p-4">テーブル</div>;
}

AI実装プロンプト

AI実装プロンプト

テーブル（Table）をReact + Tailwind CSSで実装してください。アクセシビリティ、状態、モバイル表示、実装上の注意点も含めてください。

関連ページ

テーブルの詳細テーブル（Table）は、構造化されたデータを行と列で表示するコンポーネント。ソート・フィルタ・ページネーション機能と組み合わせて使用される。テーブルの比較主要デザインシステムの見方を比較します。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

テーブルをReactで実装するを使う前に確認することは？

画面上の役割、必要な状態、入力やエラーの有無、キーボード操作、モバイル表示を先に確認します。

react実装で依存ライブラリは必要ですか？

このレシピでは react、tailwindcss を前提にしています。

AIにこのレシピを渡すときの注意点は？

そのまま生成させるだけでなく、プロダクトのデザインシステム、命名規則、アクセシビリティ要件を追記します。