Componentes Tablas de datos Componente de tabla de datos

Componente de tabla de datos

Tabla de datos responsiva con modo oscuro

Vista previa

Código HTML

<div class="container mx-auto p-4">
  <div class="border rounded-lg overflow-hidden">
    <table class="min-w-full bg-white dark:bg-gray-800">
      <thead>
        <tr>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Title</th>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Author</th>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 1</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">John Doe</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-27</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 2</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Jane Smith</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-26</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 3</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Peter Jones</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-25</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Componentes relacionados

Job_Application_Data_Table

Un componente de tabla de datos interactivo y con capacidad de respuesta para aplicaciones de trabajo, diseñado con un estilo tipográfico suizo/internacional limpio y minimalista y una combinación de colores apagados. Incluye filtrado, ordenación, paginación y compatibilidad con el modo oscuro.

Abrir

Luxury_Premium_Manufacturing_Data_Table

Un componente de tabla de datos complejo y receptivo para uso industrial/de fabricación, con un diseño de lujo/premium con un esquema de color en blanco y negro y un solo color de acento brillante. Incluye soporte para modo oscuro y elementos interactivos.

Abrir

Tabla de datos

Un componente de tabla de datos interactivo con estilo Material Design, que ofrece compatibilidad con el modo oscuro y el comportamiento interactivo sin JavaScript. Incluye imágenes de marcador de posición para la demostración.

Abrir