Tables

<table class="focus-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td>Developer</td>
      <td>Active</td>
    </tr>
  </tbody>
</table>

<table class="focus-table focus-table-striped">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <!-- rows here -->
  </tbody>
</table>

<table class="focus-table focus-table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Task</th>
      <th>Priority</th>
      <th>Due Date</th>
    </tr>
  </thead>
  <tbody>
    <!-- rows here -->
  </tbody>
</table>

<table class="focus-table focus-table-compact">
  <thead>
    <tr>
      <th>Server</th>
      <th>Status</th>
      <th>CPU</th>
      <th>Memory</th>
    </tr>
  </thead>
  <tbody>
    <!-- rows here -->
  </tbody>
</table>

<div class="focus-table-responsive">
  <table class="focus-table">
    <!-- table content -->
  </table>
</div>

<table class="focus-table">
  <thead>
    <tr>
      <th>Item</th>
      <th class="text-center">Quantity</th>
      <th class="text-right">Price</th>
      <th class="text-right">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td class="text-center">5</td>
      <td class="text-right">$12.99</td>
      <td class="text-right">$64.95</td>
    </tr>
  </tbody>
</table>

const table = document.getElementById('sortableTable');
const headers = table.querySelectorAll('th[data-sort]');
const tbody = document.getElementById('sortableTableBody');

let sortDirection = {};

headers.forEach(header => {
  header.addEventListener('click', () => {
    const column = header.dataset.sort;
    const columnIndex = Array.from(headers).indexOf(header);
    
    // Toggle sort direction
    sortDirection[column] = sortDirection[column] === 'asc' ? 'desc' : 'asc';
    
    // Get rows and sort
    const rows = Array.from(tbody.querySelectorAll('tr'));
    rows.sort((a, b) => {
      const aValue = a.children[columnIndex].textContent;
      const bValue = b.children[columnIndex].textContent;
      
      // Try to parse as number
      const aNum = parseFloat(aValue);
      const bNum = parseFloat(bValue);
      
      if (!isNaN(aNum) && !isNaN(bNum)) {
        return sortDirection[column] === 'asc' ? aNum - bNum : bNum - aNum;
      }
      
      // String comparison
      return sortDirection[column] === 'asc' 
        ? aValue.localeCompare(bValue)
        : bValue.localeCompare(aValue);
    });
    
    // Re-append sorted rows
    rows.forEach(row => tbody.appendChild(row));
  });
});