Компоненты Таблицы данных Компонент таблиц данных

Компонент таблиц данных

Адаптивный компонент таблиц данных, выполненный в скевоморфном стиле с поддержкой темной темы с использованием Tailwind CSS.

Предварительный просмотр

HTML-код

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">User Data Table</h2>
    <div class="overflow-x-auto">
        <table class="min-w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg">
            <thead class="bg-gray-200 dark:bg-gray-700">
                <tr>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Avatar</th>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Name</th>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Email</th>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Status</th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800">
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"></td>
                    <td class="py-3 px-4 text-gray-800 dark:text-gray-200">John Doe</td>
                    <td class="py-3 px-4 text-gray-600 dark:text-gray-400">johndoe@example.com</td>
                    <td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar"></td>
                    <td class="py-3 px-4 text-gray-800 dark:text-gray-200">Jane Smith</td>
                    <td class="py-3 px-4 text-gray-600 dark:text-gray-400">janesmith@example.com</td>
                    <td class="py-3 px-4"><span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span></td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
                    <td class="py-3 px-4 text-gray-800 dark:text-gray-200">Bob Johnson</td>
                    <td class="py-3 px-4 text-gray-600 dark:text-gray-400">bobjohnson@example.com</td>
                    <td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="mt-4 text-center">
        <img class="mx-auto" src="https://picsum.photos/600/200" alt="Random placeholder">
    </div>
</div>

Связанные компоненты

Таблица художественных данных акварели

Адаптивный компонент таблицы данных с мягким, акварельным/художественным стилем дизайна и сладкими, конфетными цветами, подходит для некоммерческих/благотворительных организаций. Включает поддержку темного режима и демонстрирует умеренную сложность с акцентом на визуальную привлекательность и читабельность.

Открытый

Organic_Nature_Dashboard_Data_Table

Компонент таблицы данных умеренной сложности, вдохновленный органикой и природой для информационных панелей с яркой цветовой схемой, плавными линиями, отзывчивостью и поддержкой темного режима.

Открытый

Таблица данных Luxury/Premium для некоммерческих/благотворительных организаций

Элегантный, отзывчивый компонент таблицы данных, выполненный в роскошном / премиальном стиле с использованием корпоративных синих тонов, подходит для некоммерческих и благотворительных организаций. Включает в себя поддержку темного режима и сложный интерфейс для отображения данных с действиями.

Открытый