Composant Tableaux de données
Tableau de données réactif pour le tableau de bord avec prise en charge du thème sombre
HTML Code
<div class="container mx-auto p-4 dark:bg-gray-900 dark:text-gray-200">
<h2 class="text-2xl font-bold mb-4 dark:text-white">Dashboard Data</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Name</th>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Email</th>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Role</th>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Status</th>
</tr>
</thead>
<tbody class="text-gray-700 dark:text-gray-400">
<tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="text-left py-3 px-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
<span>John Doe</span>
</td>
<td class="text-left py-3 px-4">[email protected]</td>
<td class="text-left py-3 px-4">Admin</td>
<td class="text-left py-3 px-4"><span class="px-2 py-1 bg-green-200 text-green-800 text-xs font-semibold rounded-full dark:bg-green-700 dark:text-green-200">Active</span></td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="text-left py-3 px-4 flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
<span>Jane Smith</span>
</td>
<td class="text-left py-3 px-4">[email protected]</td>
<td class="text-left py-3 px-4">Editor</td>
<td class="text-left py-3 px-4"><span class="px-2 py-1 bg-yellow-200 text-yellow-800 text-xs font-semibold rounded-full dark:bg-yellow-600 dark:text-yellow-100">Pending</span></td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="text-left py-3 px-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
<span>Peter Jones</span>
</td>
<td class="text-left py-3 px-4">[email protected]</td>
<td class="text-left py-3 px-4">Viewer</td>
<td class="text-left py-3 px-4"><span class="px-2 py-1 bg-gray-200 text-gray-800 text-xs font-semibold rounded-full dark:bg-gray-600 dark:text-gray-100">Inactive</span></td>
</tr>
</tbody>
</table>
</div>
</div>Composants associés
RétroVintageDataTable
Un composant de table de données réactif de style rétro/vintage utilisant Tailwind CSS avec prise en charge du mode sombre.
Tableau de données artistiques aquarelle
Un composant de tableau de données réactif avec un style de conception artistique et aquarelle doux et des couleurs douces comme des bonbons, adapté aux organisations à but non lucratif/caritatives. Inclut la prise en charge du mode sombre et présente une complexité modérée en mettant l’accent sur l’attrait visuel et la lisibilité.
Composant Tableaux de données
Composant de tables de données réactives avec prise en charge du mode sombre à l’aide de Tailwind CSS