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.
Codice HTML
<div class="container mx-auto p-4 dark:bg-gray-900">
<div class="shadow overflow-hidden border-b border-gray-200 dark:border-gray-800 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Name
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Title
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Status
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Role
</th>
<th scope="col" class="relative px-6 py-3">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-800">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">
John Doe
</div>
<div class="text-sm text-gray-500 dark:text-gray-400">
[email protected]
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">Software Engineer</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100">
Active
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
Admin
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-600">Edit</a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">
Jane Smith
</div>
<div class="text-sm text-gray-500 dark:text-gray-400">
[email protected]
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white">UI/UX Designer</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Creative</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-100">
Pending
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
User
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-600">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>Componenti correlati
Componente Tabelle dati
Un componente reattivo per la tabella dei dati per i siti di documentazione/wiki, con supporto per la modalità oscura, combinazione di colori nei toni della terra e HTML semantico. Progettato per interfacce complesse con più colonne, azioni e impaginazione.
Brutalist_ECommerce_Table
Un componente di tabella dati reattivo in stile brutalista per l'e-commerce, caratterizzato da un contrasto elevato, una combinazione di colori complementari (giallo/viola) e supporto per la modalità scura. Progettato per l'elenco dei prodotti o la gestione degli ordini.
Griglia di dati retrò
Un componente reattivo della tabella dei dati con un'estetica retrò/vintage degli anni '80/'90 utilizzando Tailwind CSS. Presenta un design a blocchi, accenti di colore vivaci (viola/arancione in modalità chiara, verde/neon in modalità scura) e un carattere monospace per un tocco tecnologico nostalgico. La tabella include uno stile distinto di intestazione e riga, elementi con bordi come avatar e badge di stato e supporta la modalità oscura tramite CSS. I dati segnaposto includono avatar utente, informazioni di contatto, badge di stato, ruoli e date di iscrizione. La tabella è scorrevole orizzontalmente su schermi più piccoli per una migliore reattività.