Mode sombre de la table de données
Composant de table de données réactive avec mode sombre
HTML Code
<div class="overflow-x-auto bg-gray-900 text-pastel-light"
>
<table class="min-w-full table-auto">
<thead>
<tr class="bg-gray-800">
<th class="px-4 py-2 text-left text-pastel-lighter">Name</th>
<th class="px-4 py-2 text-left text-pastel-lighter">Title</th>
<th class="px-4 py-2 text-left text-pastel-lighter">Status</th>
<th class="px-4 py-2 text-left text-pastel-lighter">Role</th>
<th class="px-4 py-2"></th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-700 hover:bg-gray-700">
<td class="px-4 py-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
John Doe
</td>
<td class="px-4 py-2">Software Engineer</td>
<td class="px-4 py-2">
<span class="px-2 py-1 bg-green-600 text-white rounded-full text-xs">Active</span>
</td>
<td class="px-4 py-2">Member</td>
<td class="px-4 py-2 text-right">
<button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700">
<td class="px-4 py-2 flex items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
Jane Smith
</td>
<td class="px-4 py-2">UI/UX Designer</td>
<td class="px-4 py-2">
<span class="px-2 py-1 bg-yellow-600 text-white rounded-full text-xs">Pending</span>
</td>
<td class="px-4 py-2">Admin</td>
<td class="px-4 py-2 text-right">
<button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700">
<td class="px-4 py-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/76.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
Robert Johnson
</td>
<td class="px-4 py-2">Project Manager</td>
<td class="px-4 py-2">
<span class="px-2 py-1 bg-red-600 text-white rounded-full text-xs">Inactive</span>
</td>
<td class="px-4 py-2">Member</td>
<td class="px-4 py-2 text-right">
<button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700">
<td class="px-4 py-2 flex items-center">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
Emily Davis
</td>
<td class="px-4 py-2">Data Analyst</td>
<td class="px-4 py-2">
<span class="px-2 py-1 bg-green-600 text-white rounded-full text-xs">Active</span>
</td>
<td class="px-4 py-2">Observer</td>
<td class="px-4 py-2 text-right">
<button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>Composants associés
Composant Tableaux de données
Un composant de tables de données conçu dans un style skeuomorphe, imitant ses homologues du monde réel avec des effets réactifs et prenant en charge les thèmes sombres. Le tableau comprend des en-têtes, des lignes avec des données et utilise des images d’espace réservé.
Composant Tableaux de données
Un composant simple de table de données avec des couleurs de terre, des micro-interactions et la prise en charge du mode sombre, adapté aux interfaces de médias sociaux.
Brutalist_ECommerce_Table
Un composant de table de données réactif de style brutaliste pour le commerce électronique, doté d’un contraste élevé, d’un schéma de couleurs complémentaires (jaune/violet) et d’une prise en charge du mode sombre. Conçu pour les listes de produits ou la gestion des commandes.