Componente Tabelle dati
Un componente di tabella dati minimalista e reattivo progettato con Tailwind CSS che supporta la modalità oscura.
Codice HTML
<div class="overflow-x-auto bg-white dark:bg-gray-800 shadow-md rounded-lg">
<table class="min-w-full border-collapse">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Name</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Email</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Avatar</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Profile Picture</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-900">
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">John Doe</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">Jane Smith</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">Alice Johnson</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
</tbody>
</table>
</div>Componenti correlati
Componente Tabelle dati
Un componente di tabelle di dati progettato in uno stile scheumorfico, che imita le controparti del mondo reale con effetti reattivi e supporta temi scuri. La tabella include intestazioni, righe con dati e utilizza immagini segnaposto.
Tabella dati
Un componente di tabella dati reattivo con stile Material Design, con supporto per la modalità oscura e il comportamento reattivo senza JavaScript. Include immagini segnaposto per la dimostrazione.