データテーブル
マテリアルデザインスタイルを備えたレスポンシブデータテーブルコンポーネントで、ダークモードとJavaScriptなしのレスポンシブ動作をサポートしています。デモ用のプレースホルダー画像が含まれています。
HTMLコード
<div class="container mx-auto p-4 dark:bg-gray-900">
<div class="shadow overflow-hidden border-b border-gray-200 dark:border-gray-800 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Name
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Title
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Status
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Role
</th>
<th scope="col" class="relative px-6 py-3">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">
John Doe
</div>
<div class="text-sm text-gray-500 dark:text-gray-400">
[email protected]
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">Software Engineer</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100">
Active
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
Admin
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-600">Edit</a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">
Jane Smith
</div>
<div class="text-sm text-gray-500 dark:text-gray-400">
[email protected]
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">UI/UX Designer</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Creative</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-100">
Pending
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
User
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-600">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>関連コンポーネント
データテーブルコンポーネント
Tailwind CSS を使用して Neumorphism スタイルで設計されたレスポンシブ データ テーブル コンポーネントで、ダーク テーマのサポートとランダムなプレースホルダー イメージが特徴です。
データテーブルコンポーネント
ミニマリストでフラットなデザインでスタイル化されたレスポンシブデータテーブルコンポーネントで、ビジネス/企業のWebサイトに最適で、ダークテーマがサポートされています。
レトロデータグリッド
Tailwind CSSを使用してレトロ/ビンテージ80年代/90年代の美学でスタイル化されたレスポンシブデータテーブルコンポーネント。ブロック状のデザイン、鮮やかな色のアクセント(ライトモードではパープル/オレンジ、ダークモードではグリーン/ネオン)、ノスタルジックなテック感を演出する等幅フォントが特徴です。このテーブルには、個別のヘッダーと行のスタイル設定、アバターやステータスバッジなどの境界線付きの要素が含まれ、CSSによるダークモードがサポートされています。プレースホルダーデータには、ユーザーアバター、連絡先情報、ステータスバッジ、ロール、および参加日が含まれます。テーブルは、応答性を向上させるために、小さな画面で水平方向にスクロールできます。