Components Data Tables Data Tables Component

Data Tables Component

A data tables component designed in a skeuomorphic style, mimicking real-world counterparts with responsive effects and supporting dark themes. The table includes headers, rows with data, and uses placeholder images.

Preview

HTML Code

<div class="container mx-auto px-4 py-8">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Data Tables</h2>
    <div class="overflow-x-auto shadow-lg rounded-lg">
        <table class="min-w-full bg-white dark:bg-gray-800">
            <thead class="bg-gray-200 dark:bg-gray-700">
                <tr>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">#</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Name</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Email</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Avatar</th>
                </tr>
            </thead>
            <tbody>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">1</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">John Doe</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=1" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">2</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Jane Smith</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=2" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">3</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Alice Johnson</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">4</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Bob Brown</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=4" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<style>
    /* Dark Mode Styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #cbd5e0;
        }
    }
</style>

Related Components

Retro Data Grid

A responsive data table component styled with a retro/vintage 80s/90s aesthetic using Tailwind CSS. It features a blocky design, vibrant color accents (purple/orange in light mode, green/neon in dark mode), and a monospace font for a nostalgic tech feel. The table includes distinct header and row styling, bordered elements like avatars and status badges, and supports dark mode via CSS. Placeholder data includes user avatars, contact information, status badges, roles, and join dates. The table is horizontally scrollable on smaller screens for better responsiveness.

Open