Spaces:
Running
Running
File size: 6,750 Bytes
4b852e5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Excel Data App</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js"></script>
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-8">
<header class="mb-8">
<h1 class="text-3xl font-bold text-indigo-700">Excel Data Dashboard</h1>
<p class="text-gray-600">Upload and visualize your spreadsheet data</p>
</header>
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold">Upload File</h2>
<label for="file-upload" class="cursor-pointer bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition flex items-center">
<i data-feather="upload" class="mr-2"></i>
Choose Excel File
</label>
<input id="file-upload" type="file" accept=".xlsx, .xls" class="hidden">
</div>
<div id="file-info" class="text-gray-500 italic">
No file selected
</div>
</div>
<div id="data-display" class="bg-white rounded-lg shadow-md p-6 hidden">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold">Your Data</h2>
<div class="flex space-x-2">
<button class="bg-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 transition">
<i data-feather="filter" class="w-4 h-4"></i>
</button>
<button class="bg-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 transition">
<i data-feather="download" class="w-4 h-4"></i>
</button>
</div>
</div>
<div class="overflow-x-auto">
<table id="data-table" class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<!-- Table headers will be inserted here -->
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<!-- Table data will be inserted here -->
</tbody>
</table>
</div>
</div>
</div>
<script>
AOS.init();
feather.replace();
document.getElementById('file-upload').addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
document.getElementById('file-info').textContent = `Selected: ${file.name} (${(file.size/1024).toFixed(2)} KB)`;
// Process Excel file
const reader = new FileReader();
reader.onload = function(e) {
try {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
// Get first sheet
const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonData = XLSX.utils.sheet_to_json(firstSheet);
// Display data
displayData(jsonData);
// Update file info
document.getElementById('file-info').textContent =
`Loaded: ${file.name} (${jsonData.length} rows)`;
} catch (error) {
document.getElementById('file-info').textContent =
`Error processing file: ${error.message}`;
console.error(error);
}
};
reader.onerror = function() {
document.getElementById('file-info').textContent =
'Error reading file. Please try again.';
};
reader.readAsArrayBuffer(file);
});
function displayData(data) {
if (!data || data.length === 0) {
alert('No data found in the file');
return;
}
const table = document.getElementById('data-table');
const thead = table.querySelector('thead');
const tbody = table.querySelector('tbody');
// Clear existing data
thead.innerHTML = '';
tbody.innerHTML = '';
// Create headers
const headerRow = document.createElement('tr');
Object.keys(data[0]).forEach(key => {
const th = document.createElement('th');
th.textContent = key;
th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider';
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
// Create rows (limit to 100 for performance)
const displayData = data.length > 100 ? data.slice(0, 100) : data;
displayData.forEach(row => {
const tr = document.createElement('tr');
Object.values(row).forEach(value => {
const td = document.createElement('td');
td.textContent = value !== undefined ? value : '';
td.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
tr.appendChild(td);
});
tbody.appendChild(tr);
});
if (data.length > 100) {
const tr = document.createElement('tr');
const td = document.createElement('td');
td.colSpan = Object.keys(data[0]).length;
td.className = 'px-6 py-4 text-sm text-gray-500 italic text-center';
td.textContent = `Showing 100 of ${data.length} rows...`;
tr.appendChild(td);
tbody.appendChild(tr);
}
// Show table
document.getElementById('data-display').classList.remove('hidden');
}
</script>
</body>
</html> |