Spaces:

MVCavalheiroJr
/

poc-multiview-data-grid

Running

App Files Files Community

MVCavalheiroJr commited on Jul 9, 2025

Commit

8f10c12

verified ·

1 Parent(s): 0f44c91

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +560 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Poc Multiview Data Grid
-emoji: 😻
-colorFrom: indigo
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: poc-multiview-data-grid
+emoji: 🐳
+colorFrom: yellow
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,560 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MultiView Data Grid</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .card-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 1.5rem;
+        }
+        .data-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        .data-table th, .data-table td {
+            padding: 0.75rem 1rem;
+            text-align: left;
+            border-bottom: 1px solid #e5e7eb;
+        }
+        .data-table th {
+            background-color: #f3f4f6;
+            font-weight: 600;
+        }
+        .data-table tr:hover {
+            background-color: #f9fafb;
+        }
+        .pagination {
+            display: flex;
+            justify-content: center;
+            gap: 0.5rem;
+            margin-top: 1.5rem;
+        }
+        .pagination button {
+            padding: 0.5rem 1rem;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.375rem;
+            background-color: white;
+        }
+        .pagination button.active {
+            background-color: #3b82f6;
+            color: white;
+            border-color: #3b82f6;
+        }
+        .search-filter {
+            transition: all 0.3s ease;
+        }
+        .search-filter:focus {
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+        }
+        .toggle-switch {
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 30px;
+        }
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            transition: .4s;
+            border-radius: 34px;
+        }
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 22px;
+            width: 22px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            transition: .4s;
+            border-radius: 50%;
+        }
+        input:checked + .slider {
+            background-color: #3b82f6;
+        }
+        input:checked + .slider:before {
+            transform: translateX(30px);
+        }
+        .toggle-icons {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            color: white;
+            font-size: 12px;
+        }
+        .table-icon {
+            left: 8px;
+        }
+        .grid-icon {
+            right: 8px;
+        }
+        input:checked + .slider .table-icon {
+            opacity: 0;
+        }
+        input:not(:checked) + .slider .grid-icon {
+            opacity: 0;
+        }
+        @media (max-width: 640px) {
+            .card-grid {
+                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            }
+            .data-table th, .data-table td {
+                padding: 0.5rem;
+                font-size: 0.875rem;
+            }
+            .controls-container {
+                flex-direction: column;
+                gap: 1rem;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-7xl">
+        <div class="bg-white rounded-lg shadow-md p-6">
+            <h1 class="text-2xl font-bold text-gray-800 mb-6">MultiView Data Grid</h1>
+            <div id="multiViewGrid" class="space-y-6">
+                <!-- Controls will be inserted here by JavaScript -->
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Sample data
+            const sampleData = [
+                { id: 1, name: 'John Doe', email: 'john@example.com', age: 28, status: 'Active', department: 'Engineering' },
+                { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32, status: 'Active', department: 'Marketing' },
+                { id: 3, name: 'Robert Johnson', email: 'robert@example.com', age: 45, status: 'Inactive', department: 'Sales' },
+                { id: 4, name: 'Emily Davis', email: 'emily@example.com', age: 24, status: 'Active', department: 'Engineering' },
+                { id: 5, name: 'Michael Brown', email: 'michael@example.com', age: 38, status: 'Active', department: 'HR' },
+                { id: 6, name: 'Sarah Wilson', email: 'sarah@example.com', age: 29, status: 'Inactive', department: 'Marketing' },
+                { id: 7, name: 'David Taylor', email: 'david@example.com', age: 41, status: 'Active', department: 'Engineering' },
+                { id: 8, name: 'Lisa Anderson', email: 'lisa@example.com', age: 35, status: 'Active', department: 'Finance' },
+                { id: 9, name: 'James Martinez', email: 'james@example.com', age: 27, status: 'Inactive', department: 'Sales' },
+                { id: 10, name: 'Jennifer Thomas', email: 'jennifer@example.com', age: 31, status: 'Active', department: 'Marketing' },
+                { id: 11, name: 'Christopher Lee', email: 'chris@example.com', age: 40, status: 'Active', department: 'Engineering' },
+                { id: 12, name: 'Amanda White', email: 'amanda@example.com', age: 26, status: 'Inactive', department: 'HR' }
+            ];
+            // Columns configuration
+            const columns = [
+                { field: 'id', headerName: 'ID', width: 70 },
+                { field: 'name', headerName: 'Name', width: 150 },
+                { field: 'email', headerName: 'Email', width: 200 },
+                { field: 'age', headerName: 'Age', width: 90 },
+                { field: 'department', headerName: 'Department', width: 150 },
+                { field: 'status', headerName: 'Status', width: 120 }
+            ];
+            // Card renderer function
+            function cardRenderer(item) {
+                return `
+                    <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200 hover:shadow-lg transition-shadow duration-300">
+                        <div class="p-4">
+                            <div class="flex items-center justify-between mb-3">
+                                <h3 class="text-lg font-semibold text-gray-800">${item.name}</h3>
+                                <span class="px-2 py-1 text-xs rounded-full ${item.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
+                                    ${item.status}
+                                </span>
+                            </div>
+                            <div class="space-y-2 text-sm text-gray-600">
+                                <p><i class="fas fa-envelope mr-2"></i> ${item.email}</p>
+                                <p><i class="fas fa-id-card mr-2"></i> ID: ${item.id}</p>
+                                <p><i class="fas fa-birthday-cake mr-2"></i> Age: ${item.age}</p>
+                                <p><i class="fas fa-building mr-2"></i> ${item.department}</p>
+                            </div>
+                        </div>
+                        <div class="bg-gray-50 px-4 py-3 flex justify-end">
+                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
+                                View Details
+                            </button>
+                        </div>
+                    </div>
+                `;
+            }
+            // Initialize the MultiViewDataGrid
+            const multiViewGrid = new MultiViewDataGrid({
+                container: document.getElementById('multiViewGrid'),
+                data: sampleData,
+                columns: columns,
+                cardRenderer: cardRenderer,
+                defaultView: 'table',
+                itemsPerPage: 6
+            });
+            multiViewGrid.render();
+        });
+        class MultiViewDataGrid {
+            constructor(options) {
+                this.container = options.container;
+                this.data = options.data || [];
+                this.columns = options.columns || [];
+                this.cardRenderer = options.cardRenderer || ((item) => `<div>${JSON.stringify(item)}</div>`);
+                this.currentView = options.defaultView || 'table';
+                this.itemsPerPage = options.itemsPerPage || 10;
+                this.currentPage = 1;
+                this.searchTerm = '';
+                this.sortConfig = { field: null, direction: 'asc' };
+                this.filteredData = [...this.data];
+            }
+            render() {
+                // Clear the container
+                this.container.innerHTML = '';
+                // Render controls
+                this.renderControls();
+                // Render the current view
+                if (this.currentView === 'table') {
+                    this.renderTableView();
+                } else {
+                    this.renderGridView();
+                }
+                // Render pagination
+                this.renderPagination();
+            }
+            renderControls() {
+                const controlsContainer = document.createElement('div');
+                controlsContainer.className = 'controls-container flex flex-wrap items-center justify-between gap-4 mb-6';
+                // Search input
+                const searchContainer = document.createElement('div');
+                searchContainer.className = 'relative flex-1 min-w-[200px]';
+                const searchInput = document.createElement('input');
+                searchInput.type = 'text';
+                searchInput.placeholder = 'Search...';
+                searchInput.className = 'search-filter w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:border-blue-500';
+                searchInput.value = this.searchTerm;
+                searchInput.addEventListener('input', (e) => {
+                    this.searchTerm = e.target.value.toLowerCase();
+                    this.currentPage = 1;
+                    this.filterData();
+                    this.render();
+                });
+                const searchIcon = document.createElement('i');
+                searchIcon.className = 'fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400';
+                searchContainer.appendChild(searchIcon);
+                searchContainer.appendChild(searchInput);
+                // View toggle
+                const toggleContainer = document.createElement('div');
+                toggleContainer.className = 'flex items-center gap-3';
+                const toggleLabel = document.createElement('span');
+                toggleLabel.className = 'text-sm font-medium text-gray-700';
+                toggleLabel.textContent = 'Toggle View:';
+                const toggleWrapper = document.createElement('label');
+                toggleWrapper.className = 'toggle-switch';
+                const toggleInput = document.createElement('input');
+                toggleInput.type = 'checkbox';
+                toggleInput.checked = this.currentView === 'grid';
+                toggleInput.addEventListener('change', () => {
+                    this.currentView = toggleInput.checked ? 'grid' : 'table';
+                    this.render();
+                });
+                const toggleSlider = document.createElement('span');
+                toggleSlider.className = 'slider';
+                const tableIcon = document.createElement('i');
+                tableIcon.className = 'toggle-icons table-icon fas fa-table';
+                const gridIcon = document.createElement('i');
+                gridIcon.className = 'toggle-icons grid-icon fas fa-th';
+                toggleSlider.appendChild(tableIcon);
+                toggleSlider.appendChild(gridIcon);
+                toggleWrapper.appendChild(toggleInput);
+                toggleWrapper.appendChild(toggleSlider);
+                toggleContainer.appendChild(toggleLabel);
+                toggleContainer.appendChild(toggleWrapper);
+                // Column selector (for table view)
+                if (this.currentView === 'table') {
+                    const columnSelectContainer = document.createElement('div');
+                    columnSelectContainer.className = 'w-full md:w-auto';
+                    const columnSelectLabel = document.createElement('label');
+                    columnSelectLabel.className = 'block text-sm font-medium text-gray-700 mb-1';
+                    columnSelectLabel.textContent = 'Columns:';
+                    const columnSelect = document.createElement('select');
+                    columnSelect.className = 'block w-full pl-3 pr-10 py-2 text-base border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md';
+                    columnSelect.multiple = true;
+                    // Add all columns as options
+                    this.columns.forEach(col => {
+                        const option = document.createElement('option');
+                        option.value = col.field;
+                        option.textContent = col.headerName;
+                        option.selected = true;
+                        columnSelect.appendChild(option);
+                    });
+                    columnSelectContainer.appendChild(columnSelectLabel);
+                    columnSelectContainer.appendChild(columnSelect);
+                    controlsContainer.appendChild(columnSelectContainer);
+                }
+                controlsContainer.appendChild(searchContainer);
+                controlsContainer.appendChild(toggleContainer);
+                this.container.appendChild(controlsContainer);
+            }
+            renderTableView() {
+                const tableContainer = document.createElement('div');
+                tableContainer.className = 'overflow-x-auto';
+                const table = document.createElement('table');
+                table.className = 'data-table w-full';
+                // Create table header
+                const thead = document.createElement('thead');
+                const headerRow = document.createElement('tr');
+                this.columns.forEach(col => {
+                    const th = document.createElement('th');
+                    th.textContent = col.headerName;
+                    th.className = 'cursor-pointer hover:bg-gray-100';
+                    th.addEventListener('click', () => {
+                        if (this.sortConfig.field === col.field) {
+                            this.sortConfig.direction = this.sortConfig.direction === 'asc' ? 'desc' : 'asc';
+                        } else {
+                            this.sortConfig.field = col.field;
+                            this.sortConfig.direction = 'asc';
+                        }
+                        this.filterData();
+                        this.render();
+                    });
+                    // Add sort indicator
+                    if (this.sortConfig.field === col.field) {
+                        const sortIcon = document.createElement('i');
+                        sortIcon.className = `fas fa-sort-${this.sortConfig.direction === 'asc' ? 'up' : 'down'} ml-1`;
+                        th.appendChild(sortIcon);
+                    }
+                    headerRow.appendChild(th);
+                });
+                thead.appendChild(headerRow);
+                table.appendChild(thead);
+                // Create table body
+                const tbody = document.createElement('tbody');
+                const paginatedData = this.getPaginatedData();
+                paginatedData.forEach(item => {
+                    const row = document.createElement('tr');
+                    row.className = 'hover:bg-gray-50';
+                    this.columns.forEach(col => {
+                        const td = document.createElement('td');
+                        td.textContent = item[col.field];
+                        row.appendChild(td);
+                    });
+                    tbody.appendChild(row);
+                });
+                table.appendChild(tbody);
+                tableContainer.appendChild(table);
+                this.container.appendChild(tableContainer);
+            }
+            renderGridView() {
+                const gridContainer = document.createElement('div');
+                gridContainer.className = 'card-grid';
+                const paginatedData = this.getPaginatedData();
+                paginatedData.forEach(item => {
+                    const card = document.createElement('div');
+                    card.innerHTML = this.cardRenderer(item);
+                    gridContainer.appendChild(card);
+                });
+                this.container.appendChild(gridContainer);
+            }
+            renderPagination() {
+                const totalPages = Math.ceil(this.filteredData.length / this.itemsPerPage);
+                if (totalPages <= 1) return;
+                const paginationContainer = document.createElement('div');
+                paginationContainer.className = 'pagination';
+                // Previous button
+                const prevButton = document.createElement('button');
+                prevButton.innerHTML = '<i class="fas fa-chevron-left"></i>';
+                prevButton.disabled = this.currentPage === 1;
+                prevButton.addEventListener('click', () => {
+                    if (this.currentPage > 1) {
+                        this.currentPage--;
+                        this.render();
+                    }
+                });
+                paginationContainer.appendChild(prevButton);
+                // Page buttons
+                const maxVisiblePages = 5;
+                let startPage = Math.max(1, this.currentPage - Math.floor(maxVisiblePages / 2));
+                let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+                if (endPage - startPage + 1 < maxVisiblePages) {
+                    startPage = Math.max(1, endPage - maxVisiblePages + 1);
+                }
+                if (startPage > 1) {
+                    const firstPageButton = document.createElement('button');
+                    firstPageButton.textContent = '1';
+                    firstPageButton.addEventListener('click', () => {
+                        this.currentPage = 1;
+                        this.render();
+                    });
+                    paginationContainer.appendChild(firstPageButton);
+                    if (startPage > 2) {
+                        const ellipsis = document.createElement('span');
+                        ellipsis.textContent = '...';
+                        ellipsis.className = 'flex items-center';
+                        paginationContainer.appendChild(ellipsis);
+                    }
+                }
+                for (let i = startPage; i <= endPage; i++) {
+                    const pageButton = document.createElement('button');
+                    pageButton.textContent = i;
+                    if (i === this.currentPage) {
+                        pageButton.className = 'active';
+                    }
+                    pageButton.addEventListener('click', () => {
+                        this.currentPage = i;
+                        this.render();
+                    });
+                    paginationContainer.appendChild(pageButton);
+                }
+                if (endPage < totalPages) {
+                    if (endPage < totalPages - 1) {
+                        const ellipsis = document.createElement('span');
+                        ellipsis.textContent = '...';
+                        ellipsis.className = 'flex items-center';
+                        paginationContainer.appendChild(ellipsis);
+                    }
+                    const lastPageButton = document.createElement('button');
+                    lastPageButton.textContent = totalPages;
+                    lastPageButton.addEventListener('click', () => {
+                        this.currentPage = totalPages;
+                        this.render();
+                    });
+                    paginationContainer.appendChild(lastPageButton);
+                }
+                // Next button
+                const nextButton = document.createElement('button');
+                nextButton.innerHTML = '<i class="fas fa-chevron-right"></i>';
+                nextButton.disabled = this.currentPage === totalPages;
+                nextButton.addEventListener('click', () => {
+                    if (this.currentPage < totalPages) {
+                        this.currentPage++;
+                        this.render();
+                    }
+                });
+                paginationContainer.appendChild(nextButton);
+                this.container.appendChild(paginationContainer);
+            }
+            filterData() {
+                // Apply search filter
+                let filtered = this.data;
+                if (this.searchTerm) {
+                    filtered = this.data.filter(item => {
+                        return Object.values(item).some(
+                            val => val.toString().toLowerCase().includes(this.searchTerm)
+                        );
+                    });
+                }
+                // Apply sorting
+                if (this.sortConfig.field) {
+                    filtered.sort((a, b) => {
+                        const aValue = a[this.sortConfig.field];
+                        const bValue = b[this.sortConfig.field];
+                        if (aValue < bValue) {
+                            return this.sortConfig.direction === 'asc' ? -1 : 1;
+                        }
+                        if (aValue > bValue) {
+                            return this.sortConfig.direction === 'asc' ? 1 : -1;
+                        }
+                        return 0;
+                    });
+                }
+                this.filteredData = filtered;
+            }
+            getPaginatedData() {
+                const startIndex = (this.currentPage - 1) * this.itemsPerPage;
+                const endIndex = startIndex + this.itemsPerPage;
+                return this.filteredData.slice(startIndex, endIndex);
+            }
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MVCavalheiroJr/poc-multiview-data-grid" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>