Components Data Tables Data Tables Component

Data Tables Component

A minimalist and responsive data table component designed with Tailwind CSS that supports dark mode.

Preview

HTML Code

<div class="overflow-x-auto bg-white dark:bg-gray-800 shadow-md rounded-lg">
    <table class="min-w-full border-collapse">
        <thead class="bg-gray-200 dark:bg-gray-700">
            <tr>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Name</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Email</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Avatar</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Profile Picture</th>
            </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-900">
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">John Doe</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">Jane Smith</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">Alice Johnson</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
        </tbody>
    </table>
</div>

Related Components

Data Tables Component

A responsive data table component styled in a minimalist and flat design, suitable for business/corporate websites, with dark theme support.

Open

Industrial_Gaming_Data_Table

A complex, responsive data table component designed for gaming websites, featuring an industrial aesthetic with exposed elements and an autumn color scheme. Includes filtering, sorting, pagination, and dark mode support.

Open

Data Tables Component

A responsive data tables component designed with Neumorphism style using Tailwind CSS, featuring dark theme support and random placeholder images.

Open