Composant Tableaux de données
Un composant de tables de données conçu avec le style Brutalism avec des couleurs à haute saturation pour le commerce électronique, réactif avec la prise en charge du thème sombre.
HTML Code
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
<thead class="bg-blue-600 dark:bg-blue-900">
<tr>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">#</th>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Product</th>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Price</th>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Availability</th>
<th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Action</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n <div class="flex items-center space-x-2">
<img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-md">
<span>Awesome Product</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$39.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">In Stock</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Buy Now</a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n <div class="flex items-center space-x-2">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="w-12 h-12 rounded-md">
<span>Amazing Gadget</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$29.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Limited Stock</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Buy Now</a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">3</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n <div class="flex items-center space-x-2">
<img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="w-12 h-12 rounded-md">
<span>Stylish Widget</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$19.99</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Out of Stock</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Notify Me</a>
</td>
</tr>
</tbody>
</table>
</div>Composants associés
Composant Tableaux de données
Un composant de tables de données réactif conçu dans le style Skeuomorphic avec prise en charge du thème sombre à l’aide de Tailwind CSS.
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.
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é.