Glassmorphism Table - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Table</title> <style> body { margin: 0; padding: 0; font-family: 'Arial', sans-serif; background: linear-gradient(to top left, #a8c0ff, #3f2b96); display: flex; justify-content: center; align-items: center; height: 100vh; } .container { width: 80%; background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); max-width: 1200px; } h1 { color: #fff; text-align: center; margin-bottom: 20px; } .search-container { display: flex; justify-content: center; margin-bottom: 20px; } .search-input { padding: 10px; border: none; border-radius: 20px; width: 100%; max-width: 400px; outline: none; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 16px; transition: background 0.3s; } .search-input::placeholder { color: #ccc; } .search-input:focus { background: rgba(255, 255, 255, 0.4); } table { width: 100%; border-collapse: collapse; color: #fff; font-size: 16px; } th, td { padding: 10px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } th { background: rgba(255, 255, 255, 0.2); cursor: pointer; } th.sortable:hover { background: rgba(255, 255, 255, 0.3); } tr:hover { background: rgba(255, 255, 255, 0.1); } .sort-icon { font-size: 12px; color: #fff; margin-left: 5px; } .asc::after { content: '▲'; } .desc::after { content: '▼'; } </style> </head> <body> <div class="container"> <h1>Glassmorphism Table with Search and Sort</h1> <div class="search-container"> <input type="text" id="searchInput" class="search-input" placeholder="Search..."> </div> <table id="dataTable"> <thead> <tr> <th class="sortable">Name <span class="sort-icon"></span></th> <th class="sortable">Age <span class="sort-icon"></span></th> <th class="sortable">City <span class="sort-icon"></span></th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>28</td> <td>New York</td> </tr> <tr> <td>Jane Smith</td> <td>34</td> <td>Los Angeles</td> </tr> <tr> <td>Michael Brown</td> <td>45</td> <td>Chicago</td> </tr> <tr> <td>Emily Davis</td> <td>22</td> <td>Miami</td> </tr> <tr> <td>Sarah Wilson</td> <td>30</td> <td>Seattle</td> </tr> </tbody> </table> </div> <script> document.addEventListener('DOMContentLoaded', function () { const searchInput = document.getElementById('searchInput'); const table = document.getElementById('dataTable'); const headers = table.querySelectorAll('th.sortable'); let sortOrder = {}; // Search Functionality searchInput.addEventListener('input', function () { const query = searchInput.value.toLowerCase(); const rows = table.querySelectorAll('tbody tr'); rows.forEach(row => { const cells = row.querySelectorAll('td'); let match = false; cells.forEach(cell => { if (cell.textContent.toLowerCase().includes(query)) { match = true; } }); row.style.display = match ? '' : 'none'; }); }); // Sort Functionality headers.forEach((header, index) => { header.addEventListener('click', function () { const rowsArray = Array.from(table.querySelectorAll('tbody tr')); const sortDirection = sortOrder[index] = (sortOrder[index] === 'asc') ? 'desc' : 'asc'; rowsArray.sort((a, b) => { const cellA = a.children[index].textContent.trim(); const cellB = b.children[index].textContent.trim(); return sortDirection === 'asc' ? cellA.localeCompare(cellB) : cellB.localeCompare(cellA); }); const tbody = table.querySelector('tbody'); tbody.innerHTML = ''; rowsArray.forEach(row => tbody.appendChild(row)); // Update sort icons headers.forEach(th => th.classList.remove('asc', 'desc')); header.classList.add(sortDirection); }); }); }); </script> </body> </html>