Tabella dati Modalità scura
Componente tabella dati reattiva con modalità oscura
Codice HTML
<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>Componenti correlati
Tabella dei dati sul brutalismo
Un componente reattivo per la tabella dei dati con design brutalista, con supporto per la modalità oscura ed effetti al passaggio del mouse.
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.
Tabella dei dati sanitari
Un componente di tabella dati reattivo e minimalista con tonalità blu aziendali, adatto per applicazioni sanitarie. Include il supporto per la modalità scura, la ricerca e l'impaginazione. Utilizza l'HTML semantico per l'accessibilità.