Componentes Tablas de datos Componente de tablas de datos

Componente de tablas de datos

Tabla de datos responsiva para panel de control con soporte de tema oscuro

Vista previa

Código HTML

<div class="container mx-auto p-4 dark:bg-gray-900 dark:text-gray-200">
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Dashboard Data</h2>
  <div class="overflow-x-auto">
    <table class="min-w-full bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
      <thead class="bg-gray-200 dark:bg-gray-700">
        <tr>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Name</th>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Email</th>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Role</th>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Status</th>
        </tr>
      </thead>
      <tbody class="text-gray-700 dark:text-gray-400">
        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          <td class="text-left py-3 px-4 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
            <span>John Doe</span>
          </td>
          <td class="text-left py-3 px-4">[email protected]</td>
          <td class="text-left py-3 px-4">Admin</td>
          <td class="text-left py-3 px-4"><span class="px-2 py-1 bg-green-200 text-green-800 text-xs font-semibold rounded-full dark:bg-green-700 dark:text-green-200">Active</span></td>
        </tr>
        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          <td class="text-left py-3 px-4 flex items-center">
             <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Jane Smith</span>
          </td>
          <td class="text-left py-3 px-4">[email protected]</td>
          <td class="text-left py-3 px-4">Editor</td>
          <td class="text-left py-3 px-4"><span class="px-2 py-1 bg-yellow-200 text-yellow-800 text-xs font-semibold rounded-full dark:bg-yellow-600 dark:text-yellow-100">Pending</span></td>
        </tr>
         <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          <td class="text-left py-3 px-4 flex items-center">
             <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Peter Jones</span>
          </td>
          <td class="text-left py-3 px-4">[email protected]</td>
          <td class="text-left py-3 px-4">Viewer</td>
          <td class="text-left py-3 px-4"><span class="px-2 py-1 bg-gray-200 text-gray-800 text-xs font-semibold rounded-full dark:bg-gray-600 dark:text-gray-100">Inactive</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Componentes relacionados

Tabla de datos Modo oscuro

Componente de tabla de datos responsivo con modo oscuro

Abrir

Componente de tablas de datos

Un componente de tablas de datos responsivo diseñado con el estilo Neumorphism utilizando Tailwind CSS, con soporte para temas oscuros e imágenes de marcador de posición aleatorio.

Abrir

Tabla de datos artísticos de acuarela

Un componente de tabla de datos receptivo con un estilo de diseño suave, acuarela / artístico y colores dulces como caramelos, adecuado para organizaciones sin fines de lucro / caridad. Incluye compatibilidad con el modo oscuro y muestra una complejidad moderada con un enfoque en el atractivo visual y la legibilidad.

Abrir