CCHub Logo CCHub Tailwind Collection
コンポーネント データテーブル データ テーブル コンポーネント

データ テーブル コンポーネント

ダークモードのレスポンシブデータテーブル

プレビュー

HTMLコード 

<div class="container mx-auto p-4">
  <div class="border rounded-lg overflow-hidden">
    <table class="min-w-full bg-white dark:bg-gray-800">
      <thead>
        <tr>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Title</th>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Author</th>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 1</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">John Doe</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-27</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 2</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Jane Smith</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-26</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 3</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Peter Jones</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-25</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

関連コンポーネント

Industrial_Gaming_Data_Table

ゲーム Web サイト向けに設計された複雑で応答性の高いデータ テーブル コンポーネントで、露出した要素と秋の配色を備えた工業的な美学が特徴です。フィルタリング、並べ替え、ページネーション、ダーク モードのサポートが含まれます。

開ける

データテーブルコンポーネント

スキューモーフィック スタイルで設計されたデータ テーブル コンポーネントで、応答性の高い効果を持つ現実世界の対応物を模倣し、ダーク テーマをサポートします。このテーブルには、ヘッダー、データを含む行が含まれ、プレースホルダー画像が使用されます。

開ける

データテーブルコンポーネント

Glassmorphismデータテーブルコンポーネントは、ポートフォリオの鮮やかな色で、ダークモードのサポートで応答性があります。JavaScriptは必要なく、Tailwind CSSを使用したHTMLのみ。

開ける