Componente de tablas de datos
Un componente de tabla de datos responsivo para sitios de documentación/wiki, con soporte de modo oscuro, combinación de colores de tono tierra y HTML semántico. Diseñado para interfaces complejas con varias columnas, acciones y paginación.
Código HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden">
<div class="px-4 py-5 sm:px-6 flex flex-col sm:flex-row justify-between items-start sm:items-center border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100 mb-2 sm:mb-0">
Document Files
</h3>
<div class="mt-3 sm:mt-0 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4 w-full sm:w-auto">
<input type="text" placeholder="Search..." class="block w-full sm:max-w-xs px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
<button type="button" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-800 dark:focus:ring-offset-gray-800">
<svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
Add New
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 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-400 uppercase tracking-wider">
Category
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Author
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Version
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Last Updated
</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-800 divide-y divide-gray-200 dark:divide-gray-700">
<!-- Row 1 -->
<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 object-cover" src="https://picsum.photos/id/237/80/80" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">
Getting Started Guide
</div>
<div class="text-sm text-gray-500 dark:text-gray-400">
pdf
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-100">Onboarding</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Documentation</div>
</td>
<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/1.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Jane Doe</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Admin</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
1.0.3
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
2023-10-26
</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-300">Edit</a>
<a href="#" class="ml-2 text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
</td>
</tr>
<!-- Row 2 -->
<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 object-cover" src="https://picsum.photos/id/238/80/80" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">
API Reference
</div>
<div class="text-sm text-gray-500 dark:text-gray-400">
json
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-100">Development</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Technical</div>
</td>
<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/2.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">John Smith</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Developer</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
2.1.0
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
2023-10-25
</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-300">Edit</a>
<a href="#" class="ml-2 text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
</td>
</tr>
<!-- Row 3 -->
<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 object-cover" src="https://picsum.photos/id/239/80/80" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">
User Manual v3
</div>
<div class="text-sm text-gray-500 dark:text-gray-400">
docx
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-100">End User</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Instructions</div>
</td>
<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/3.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Peter Jones</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Editor</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
3.0.0
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
2023-10-24
</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-300">Edit</a>
<a href="#" class="ml-2 text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
</td>
</tr>
<!-- Row 4 -->
<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 object-cover" src="https://picsum.photos/id/240/80/80" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">
Deployment Checklist
</div>
<div class="text-sm text-gray-500 dark:text-gray-400">
xlsx
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-100">Operations</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Procedure</div>
</td>
<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/4.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Sarah Brown</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Manager</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
1.2.1
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
2023-10-23
</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-300">Edit</a>
<a href="#" class="ml-2 text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
</td>
</tr>
<!-- Row 5 -->
<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 object-cover" src="https://picsum.photos/id/241/80/80" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">
Marketing Guidelines
</div>
<div class="text-sm text-gray-500 dark:text-gray-400">
pptx
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-100">Marketing</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Strategy</div>
</td>
<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/5.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Emily White</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Specialist</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
1.0.0
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
2023-10-22
</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-300">Edit</a>
<a href="#" class="ml-2 text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="bg-white dark:bg-gray-800 px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-700 sm:px-6" aria-label="Pagination">
<div class="hidden sm:block">
<p class="text-sm text-gray-700 dark:text-gray-300">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">5</span>
of
<span class="font-medium">25</span>
results
</p>
</div>
<div class="flex-1 flex justify-between sm:justify-end">
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
Previous
</a>
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
Next
</a>
</div>
</nav>
</div>
</div>
</div>Componentes relacionados
Componente de tablas de datos
Un componente de tabla de datos minimalista y receptivo diseñado con Tailwind CSS que admite el modo oscuro.
Componente de tablas de datos
Un componente de tablas de datos diseñado con estilo brutalismo con colores de alta saturación para comercio electrónico, responsivo con soporte para temas oscuros.
Tabla de datos de atención médica
Un componente de tabla de datos minimalista y sensible con tonos azules corporativos, adecuado para aplicaciones sanitarias. Incluye soporte para modo oscuro, búsqueda y paginación. Utiliza HTML semántico para la accesibilidad.