File Manager 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
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

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
  <table class="w-full">
    <thead>
      <tr class="bg-gray-50 border-b border-gray-200">
        <th class="px-4 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Name</th>
        <th class="px-4 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Modified</th>
        <th class="px-4 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Size</th>
        <th class="px-4 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Type</th>
        <th class="px-4 py-3.5 text-right text-xs font-bold text-gray-600 uppercase tracking-wider">Actions</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-100">
      <tr class="hover:bg-blue-50/50 transition-colors cursor-pointer">
        <td class="px-4 py-3.5">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900">Project Documents</p>
              <p class="text-xs text-gray-500">12 files</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-sm text-gray-600">Mar 10, 2026</td>
        <td class="px-4 py-3.5 text-sm text-gray-600">—</td>
        <td class="px-4 py-3.5 text-sm text-gray-600">Folder</td>
        <td class="px-4 py-3.5 text-right">
          <button class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
          </button>
        </td>
      </tr>
      <tr class="hover:bg-blue-50/50 transition-colors cursor-pointer">
        <td class="px-4 py-3.5">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-rose-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900">Q4_Report.pdf</p>
              <p class="text-xs text-gray-500">Annual financial report</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-sm text-gray-600">Mar 8, 2026</td>
        <td class="px-4 py-3.5 text-sm text-gray-600">2.4 MB</td>
        <td class="px-4 py-3.5 text-sm text-gray-600">PDF Document</td>
        <td class="px-4 py-3.5 text-right">
          <button class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
          </button>
        </td>
      </tr>
      <tr class="hover:bg-blue-50/50 transition-colors cursor-pointer">
        <td class="px-4 py-3.5">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900">Marketing_Strategy.xlsx</p>
              <p class="text-xs text-gray-500">Q2 campaign planning</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-sm text-gray-600">Mar 5, 2026</td>
        <td class="px-4 py-3.5 text-sm text-gray-600">156 KB</td>
        <td class="px-4 py-3.5 text-sm text-gray-600">Spreadsheet</td>
        <td class="px-4 py-3.5 text-right">
          <button class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
          </button>
        </td>
      </tr>
      <tr class="hover:bg-blue-50/50 transition-colors cursor-pointer">
        <td class="px-4 py-3.5">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-violet-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900">Product_Demo.mp4</p>
              <p class="text-xs text-gray-500">Demo walkthrough</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-sm text-gray-600">Mar 3, 2026</td>
        <td class="px-4 py-3.5 text-sm text-gray-600">124.5 MB</td>
        <td class="px-4 py-3.5 text-sm text-gray-600">Video</td>
        <td class="px-4 py-3.5 text-right">
          <button class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
          </button>
        </td>
      </tr>
      <tr class="hover:bg-blue-50/50 transition-colors cursor-pointer">
        <td class="px-4 py-3.5">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900">Team_Photo.jpg</p>
              <p class="text-xs text-gray-500">Company retreat 2026</p>
            </div>
          </div>
        </td>
        <td class="px-4 py-3.5 text-sm text-gray-600">Feb 28, 2026</td>
        <td class="px-4 py-3.5 text-sm text-gray-600">4.2 MB</td>
        <td class="px-4 py-3.5 text-sm text-gray-600">Image</td>
        <td class="px-4 py-3.5 text-right">
          <button class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

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

# File Manager Table

File manager style table.

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

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