Selectable Table

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

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
  <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex items-center justify-between">
    <div class="flex items-center gap-3">
      <input type="checkbox" id="selectAll" class="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer" onclick="toggleAll(this)">
      <label for="selectAll" class="text-sm font-medium text-gray-700 cursor-pointer">Select All</label>
    </div>
    <button id="bulkActions" class="hidden px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">Delete Selected</button>
  </div>
  <table class="w-full">
    <thead>
      <tr class="border-b border-gray-200">
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider w-8"></th>
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Employee</th>
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Department</th>
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Role</th>
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Performance</th>
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Status</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-100">
      <tr class="selectable-row hover:bg-blue-50/30 transition-colors">
        <td class="px-5 py-4"><input type="checkbox" class="row-checkbox w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer" onclick="updateBulkActions()"></td>
        <td class="px-5 py-4"><div class="flex items-center gap-3"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&h=40&fit=crop" alt="Sarah" class="w-10 h-10 rounded-full object-cover"><div><p class="text-sm font-medium text-gray-900">Sarah Mitchell</p><p class="text-xs text-gray-500">sarah.m@company.com</p></div></div></td>
        <td class="px-5 py-4 text-sm text-gray-600">Engineering</td>
        <td class="px-5 py-4"><span class="px-2.5 py-1 bg-violet-100 text-violet-700 text-xs font-medium rounded-full">Lead</span></td>
        <td class="px-5 py-4"><div class="flex items-center gap-2"><div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full bg-emerald-500 rounded-full" style="width: 92%"></div></div><span class="text-sm font-medium text-emerald-600">92%</span></div></td>
        <td class="px-5 py-4"><span class="px-2.5 py-1 bg-emerald-100 text-emerald-700 text-xs font-medium rounded-full">Active</span></td>
      </tr>
      <tr class="selectable-row hover:bg-blue-50/30 transition-colors">
        <td class="px-5 py-4"><input type="checkbox" class="row-checkbox w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer" onclick="updateBulkActions()"></td>
        <td class="px-5 py-4"><div class="flex items-center gap-3"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop" alt="James" class="w-10 h-10 rounded-full object-cover"><div><p class="text-sm font-medium text-gray-900">James Chen</p><p class="text-xs text-gray-500">james.c@company.com</p></div></div></td>
        <td class="px-5 py-4 text-sm text-gray-600">Product</td>
        <td class="px-5 py-4"><span class="px-2.5 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">Senior</span></td>
        <td class="px-5 py-4"><div class="flex items-center gap-2"><div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full bg-emerald-500 rounded-full" style="width: 88%"></div></div><span class="text-sm font-medium text-emerald-600">88%</span></div></td>
        <td class="px-5 py-4"><span class="px-2.5 py-1 bg-emerald-100 text-emerald-700 text-xs font-medium rounded-full">Active</span></td>
      </tr>
      <tr class="selectable-row hover:bg-blue-50/30 transition-colors">
        <td class="px-5 py-4"><input type="checkbox" class="row-checkbox w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer" onclick="updateBulkActions()"></td>
        <td class="px-5 py-4"><div class="flex items-center gap-3"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&h=40&fit=crop" alt="Michael" class="w-10 h-10 rounded-full object-cover"><div><p class="text-sm font-medium text-gray-900">Michael Park</p><p class="text-xs text-gray-500">michael.p@company.com</p></div></div></td>
        <td class="px-5 py-4 text-sm text-gray-600">Design</td>
        <td class="px-5 py-4"><span class="px-2.5 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">Senior</span></td>
        <td class="px-5 py-4"><div class="flex items-center gap-2"><div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full bg-amber-500 rounded-full" style="width: 76%"></div></div><span class="text-sm font-medium text-amber-600">76%</span></div></td>
        <td class="px-5 py-4"><span class="px-2.5 py-1 bg-emerald-100 text-emerald-700 text-xs font-medium rounded-full">Active</span></td>
      </tr>
      <tr class="selectable-row hover:bg-blue-50/30 transition-colors">
        <td class="px-5 py-4"><input type="checkbox" class="row-checkbox w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer" onclick="updateBulkActions()"></td>
        <td class="px-5 py-4"><div class="flex items-center gap-3"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&h=40&fit=crop" alt="Emma" class="w-10 h-10 rounded-full object-cover"><div><p class="text-sm font-medium text-gray-900">Emma Thompson</p><p class="text-xs text-gray-500">emma.t@company.com</p></div></div></td>
        <td class="px-5 py-4 text-sm text-gray-600">Marketing</td>
        <td class="px-5 py-4"><span class="px-2.5 py-1 bg-gray-100 text-gray-700 text-xs font-medium rounded-full">Junior</span></td>
        <td class="px-5 py-4"><div class="flex items-center gap-2"><div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full bg-blue-500 rounded-full" style="width: 84%"></div></div><span class="text-sm font-medium text-blue-600">84%</span></div></td>
        <td class="px-5 py-4"><span class="px-2.5 py-1 bg-amber-100 text-amber-700 text-xs font-medium rounded-full">Away</span></td>
      </tr>
      <tr class="selectable-row hover:bg-blue-50/30 transition-colors">
        <td class="px-5 py-4"><input type="checkbox" class="row-checkbox w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer" onclick="updateBulkActions()"></td>
        <td class="px-5 py-4"><div class="flex items-center gap-3"><img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop" alt="David" class="w-10 h-10 rounded-full object-cover"><div><p class="text-sm font-medium text-gray-900">David Lee</p><p class="text-xs text-gray-500">david.l@company.com</p></div></div></td>
        <td class="px-5 py-4 text-sm text-gray-600">Engineering</td>
        <td class="px-5 py-4"><span class="px-2.5 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">Senior</span></td>
        <td class="px-5 py-4"><div class="flex items-center gap-2"><div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden"><div class="h-full bg-emerald-500 rounded-full" style="width: 90%"></div></div><span class="text-sm font-medium text-emerald-600">90%</span></div></td>
        <td class="px-5 py-4"><span class="px-2.5 py-1 bg-emerald-100 text-emerald-700 text-xs font-medium rounded-full">Active</span></td>
      </tr>
    </tbody>
  </table>
</div>
<script>
function toggleAll(source) {
  const checkboxes = document.querySelectorAll('.row-checkbox');
  checkboxes.forEach(cb => cb.checked = source.checked);
  updateBulkActions();
}
function updateBulkActions() {
  const checked = document.querySelectorAll('.row-checkbox:checked').length;
  document.getElementById('bulkActions').classList.toggle('hidden', checked === 0);
  if (checked > 0) document.getElementById('bulkActions').textContent = `Delete (${checked})`;
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12

# Selectable Table

Table with row selection.

## Usage
```bash
npx devsnips add Tailwind/Components/Tables/selectable-table
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`