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
HTML Code
<div class="container mx-auto p-4 dark:bg-gray-900">
<div class="data-table bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800">
<table class="min-w-full leading-normal">
<thead>
<tr class="bg-gradient-to-br from-purple-500 to-pink-500 text-white">
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Name
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Role
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Status
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Created At
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/men/1.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
John Doe
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">Admin</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-green-200 opacity-50 rounded-full"
></span>
<span class="relative">Active</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/women/2.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Jane Smith
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Editor
</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-orange-200 opacity-50 rounded-full"
></span>
<span class="relative">Pending</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-10 h-10 rounded-full"
src="https://randomuser.me/api/portraits/men/3.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Peter Jones
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Viewer
</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-red-200 opacity-50 rounded-full"
></span>
<span class="relative">Inactive</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>Composants associés
Grille de données rétro
Un composant de table de données réactif avec une esthétique rétro/vintage des années 80/90 utilisant Tailwind CSS. Il présente un design en blocs, des accents de couleurs vibrantes (violet/orange en mode clair, vert/néon en mode sombre) et une police monospace pour une sensation de technologie nostalgique. Le tableau comprend un style d’en-tête et de ligne distinct, des éléments bordés tels que des avatars et des badges de statut, et prend en charge le mode sombre via CSS. Les données d’espace réservé comprennent les avatars des utilisateurs, les coordonnées, les badges de statut, les rôles et les dates d’adhésion. La table est défilante horizontalement sur des écrans plus petits pour une meilleure réactivité.
Job_Application_Data_Table
Un composant de tableau de données réactif et interactif pour les candidatures, conçu avec un style typographique suisse/international épuré et minimaliste et une palette de couleurs sourdes. Comprend le filtrage, le tri, la pagination et la prise en charge du mode sombre.
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.