Datentabelle
Eine responsive Datentabellenkomponente im Material Design-Stil, die Unterstützung für den Dunkelmodus und responsives Verhalten ohne JavaScript bietet. Enthält Platzhalterbilder zur Demonstration.
HTML-Code
<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>Verwandte Komponenten
Retro-Datenraster
Eine responsive Datentabellenkomponente, die mit Tailwind CSS im Retro-/Vintage-Stil der 80er/90er Jahre gestaltet ist. Es verfügt über ein blockiges Design, lebendige Farbakzente (Lila/Orange im hellen Modus, Grün/Neon im dunklen Modus) und eine Monospace-Schriftart für ein nostalgisches Tech-Gefühl. Die Tabelle enthält einen eindeutigen Kopf- und Zeilenstil, umrandete Elemente wie Avatare und Statusabzeichen und unterstützt den Dunkelmodus über CSS. Zu den Platzhalterdaten gehören Benutzeravatare, Kontaktinformationen, Statusabzeichen, Rollen und Beitrittsdaten. Die Tabelle kann auf kleineren Bildschirmen horizontal gescrollt werden, um eine bessere Reaktionsfähigkeit zu gewährleisten.
Komponente "Datentabellen"
Eine responsive Datentabellen-Komponente, die im Neumorphism-Stil unter Verwendung von Tailwind CSS entworfen wurde, mit Unterstützung für dunkle Themen und zufälligen Platzhalterbildern.
RetroVintageDataTabelle
Eine reaktionsschnelle Datentabellenkomponente im Retro/Vintage-Stil, die Tailwind CSS mit Unterstützung für den Dunkelmodus verwendet.