Hugging Face's logo

Spaces:
etrano
/
zz
Running

App Files Community
etrano commited on
Commit
c592faa
·
verified ·
1 Parent(s): d29f857

I can't see table rows - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +701 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Zz
3
- emoji: 🏢
4
- colorFrom: yellow
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: zz
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,701 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TanStack Table with TailwindCSS</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://unpkg.com/@tanstack/table-core@8.9.3/build/umd/index.production.js"></script>
10
+ <style>
11
+ /* Custom scrollbar for table */
12
+ .table-container::-webkit-scrollbar {
13
+ height: 8px;
14
+ width: 8px;
15
+ }
16
+ .table-container::-webkit-scrollbar-track {
17
+ background: #f1f1f1;
18
+ border-radius: 4px;
19
+ }
20
+ .table-container::-webkit-scrollbar-thumb {
21
+ background: #888;
22
+ border-radius: 4px;
23
+ }
24
+ .table-container::-webkit-scrollbar-thumb:hover {
25
+ background: #555;
26
+ }
27
+
28
+ /* Animation for row hover */
29
+ @keyframes rowHover {
30
+ 0% { background-color: inherit; }
31
+ 100% { background-color: #f8fafc; }
32
+ }
33
+
34
+ .animate-row-hover:hover {
35
+ animation: rowHover 0.2s ease-out forwards;
36
+ }
37
+
38
+ /* Loading spinner */
39
+ @keyframes spin {
40
+ 0% { transform: rotate(0deg); }
41
+ 100% { transform: rotate(360deg); }
42
+ }
43
+
44
+ .loading-spinner {
45
+ animation: spin 1s linear infinite;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-50 min-h-screen">
50
+ <div class="container mx-auto px-4 py-8">
51
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8">
52
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
53
+ <div>
54
+ <h1 class="text-2xl font-bold text-gray-800">Employee Directory</h1>
55
+ <p class="text-gray-600">Manage your organization's employees</p>
56
+ </div>
57
+ <div class="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
58
+ <div class="relative flex-grow">
59
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
60
+ <i class="fas fa-search text-gray-400"></i>
61
+ </div>
62
+ <input
63
+ type="text"
64
+ id="searchInput"
65
+ placeholder="Search employees..."
66
+ class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
67
+ >
68
+ </div>
69
+ <button
70
+ id="addEmployeeBtn"
71
+ class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2 transition-colors"
72
+ >
73
+ <i class="fas fa-plus"></i>
74
+ <span>Add Employee</span>
75
+ </button>
76
+ </div>
77
+ </div>
78
+
79
+ <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
80
+ <div class="flex items-center gap-2">
81
+ <label for="statusFilter" class="text-sm font-medium text-gray-700">Status:</label>
82
+ <select
83
+ id="statusFilter"
84
+ class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
85
+ >
86
+ <option value="all">All</option>
87
+ <option value="active">Active</option>
88
+ <option value="inactive">Inactive</option>
89
+ <option value="on-leave">On Leave</option>
90
+ </select>
91
+ </div>
92
+
93
+ <div class="flex items-center gap-2">
94
+ <label class="text-sm font-medium text-gray-700">Department:</label>
95
+ <div class="flex flex-wrap gap-2">
96
+ <button data-dept="all" class="department-pill px-3 py-1 rounded-full text-xs bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200 active:bg-blue-300">
97
+ All
98
+ </button>
99
+ <button data-dept="Engineering" class="department-pill px-3 py-1 rounded-full text-xs bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200 active:bg-blue-300">
100
+ Engineering
101
+ </button>
102
+ <button data-dept="Marketing" class="department-pill px-3 py-1 rounded-full text-xs bg-purple-100 text-purple-800 border border-purple-200 hover:bg-purple-200 active:bg-purple-300">
103
+ Marketing
104
+ </button>
105
+ <button data-dept="Sales" class="department-pill px-3 py-1 rounded-full text-xs bg-green-100 text-green-800 border border-green-200 hover:bg-green-200 active:bg-green-300">
106
+ Sales
107
+ </button>
108
+ <button data-dept="HR" class="department-pill px-3 py-1 rounded-full text-xs bg-pink-100 text-pink-800 border border-pink-200 hover:bg-pink-200 active:bg-pink-300">
109
+ HR
110
+ </button>
111
+ <button data-dept="Finance" class="department-pill px-3 py-1 rounded-full text-xs bg-yellow-100 text-yellow-800 border border-yellow-200 hover:bg-yellow-200 active:bg-yellow-300">
112
+ Finance
113
+ </button>
114
+ <button data-dept="Product" class="department-pill px-3 py-1 rounded-full text-xs bg-indigo-100 text-indigo-800 border border-indigo-200 hover:bg-indigo-200 active:bg-indigo-300">
115
+ Product
116
+ </button>
117
+ <button data-dept="Design" class="department-pill px-3 py-1 rounded-full text-xs bg-red-100 text-red-800 border border-red-200 hover:bg-red-200 active:bg-red-300">
118
+ Design
119
+ </button>
120
+ <button data-dept="Operations" class="department-pill px-3 py-1 rounded-full text-xs bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200 active:bg-gray-300">
121
+ Operations
122
+ </button>
123
+ </div>
124
+ </div>
125
+
126
+ <div class="flex items-center gap-2">
127
+ <label for="rowsPerPage" class="text-sm font-medium text-gray-700">Rows:</label>
128
+ <select
129
+ id="rowsPerPage"
130
+ class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
131
+ >
132
+ <option value="5">5</option>
133
+ <option value="10" selected>10</option>
134
+ <option value="20">20</option>
135
+ <option value="50">50</option>
136
+ </select>
137
+ </div>
138
+ </div>
139
+
140
+ <div class="table-container overflow-x-auto rounded-lg border border-gray-200">
141
+ <div id="loadingIndicator" class="hidden p-8 flex items-center justify-center">
142
+ <div class="loading-spinner h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full"></div>
143
+ </div>
144
+ <table id="dataTable" class="min-w-full divide-y divide-gray-200">
145
+ <thead class="bg-gray-50">
146
+ <tr id="tableHeader"></tr>
147
+ </thead>
148
+ <tbody id="tableBody" class="bg-white divide-y divide-gray-200"></tbody>
149
+ </table>
150
+ </div>
151
+
152
+ <div class="flex flex-col sm:flex-row items-center justify-between mt-4 gap-4">
153
+ <div class="text-sm text-gray-600">
154
+ Showing <span id="showingFrom">1</span> to <span id="showingTo">10</span> of <span id="totalItems">50</span> entries
155
+ </div>
156
+
157
+ <div class="flex items-center gap-2">
158
+ <button id="firstPage" class="px-3 py-1 border rounded-md disabled:opacity-50">
159
+ <i class="fas fa-angle-double-left"></i>
160
+ </button>
161
+ <button id="prevPage" class="px-3 py-1 border rounded-md disabled:opacity-50">
162
+ <i class="fas fa-angle-left"></i>
163
+ </button>
164
+ <div id="pageNumbers" class="flex gap-1"></div>
165
+ <button id="nextPage" class="px-3 py-1 border rounded-md disabled:opacity-50">
166
+ <i class="fas fa-angle-right"></i>
167
+ </button>
168
+ <button id="lastPage" class="px-3 py-1 border rounded-md disabled:opacity-50">
169
+ <i class="fas fa-angle-double-right"></i>
170
+ </button>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Employee Modal -->
177
+ <div id="employeeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
178
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
179
+ <div class="flex justify-between items-center border-b px-6 py-4">
180
+ <h3 class="text-lg font-semibold" id="modalTitle">Add Employee</h3>
181
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
182
+ <i class="fas fa-times"></i>
183
+ </button>
184
+ </div>
185
+ <div class="p-6">
186
+ <form id="employeeForm">
187
+ <div class="mb-4">
188
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
189
+ <input type="text" id="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500">
190
+ </div>
191
+ <div class="mb-4">
192
+ <label for="position" class="block text-sm font-medium text-gray-700 mb-1">Position</label>
193
+ <input type="text" id="position" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500">
194
+ </div>
195
+ <div class="mb-4">
196
+ <label for="department" class="block text-sm font-medium text-gray-700 mb-1">Department</label>
197
+ <select id="department" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500">
198
+ <option value="Engineering">Engineering</option>
199
+ <option value="Marketing">Marketing</option>
200
+ <option value="Sales">Sales</option>
201
+ <option value="HR">Human Resources</option>
202
+ <option value="Finance">Finance</option>
203
+ </select>
204
+ </div>
205
+ <div class="mb-4">
206
+ <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
207
+ <select id="status" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500">
208
+ <option value="active">Active</option>
209
+ <option value="inactive">Inactive</option>
210
+ <option value="on-leave">On Leave</option>
211
+ </select>
212
+ </div>
213
+ <div class="flex justify-end gap-3 mt-6">
214
+ <button type="button" id="cancelBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancel</button>
215
+ <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Save</button>
216
+ </div>
217
+ </form>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <script>
223
+ // Sample data (100 entries)
224
+ const departments = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Product', 'Design', 'Operations'];
225
+ const positions = {
226
+ Engineering: ['Software Engineer', 'Frontend Developer', 'Backend Developer', 'DevOps Engineer', 'QA Engineer', 'Data Engineer'],
227
+ Marketing: ['Marketing Specialist', 'Content Writer', 'SEO Specialist', 'Social Media Manager'],
228
+ Sales: ['Sales Executive', 'Sales Manager', 'Account Executive', 'Business Development'],
229
+ HR: ['HR Coordinator', 'Recruiter', 'HR Manager', 'Talent Acquisition'],
230
+ Finance: ['Finance Manager', 'Accountant', 'Financial Analyst', 'Controller'],
231
+ Product: ['Product Manager', 'Product Owner', 'Product Designer'],
232
+ Design: ['UX Designer', 'UI Designer', 'Graphic Designer'],
233
+ Operations: ['Operations Manager', 'Office Administrator']
234
+ };
235
+ const statuses = ['active', 'inactive', 'on-leave'];
236
+
237
+ const firstNames = ['John', 'Jane', 'Robert', 'Emily', 'Michael', 'Sarah', 'David', 'Jessica', 'Thomas', 'Lisa', 'William', 'Karen', 'James', 'Nancy', 'Daniel', 'Jennifer', 'Richard', 'Susan', 'Joseph', 'Margaret'];
238
+ const lastNames = ['Doe', 'Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Miller', 'Davis', 'Garcia', 'Rodriguez', 'Wilson', 'Martinez', 'Anderson', 'Taylor', 'Thomas', 'Lee', 'Perez', 'Thompson', 'White', 'Harris'];
239
+
240
+ const data = [];
241
+ for (let i = 1; i <= 100; i++) {
242
+ const dept = departments[Math.floor(Math.random() * departments.length)];
243
+ const pos = positions[dept][Math.floor(Math.random() * positions[dept].length)];
244
+ const status = statuses[Math.floor(Math.random() * statuses.length)];
245
+ const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
246
+ const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
247
+ const joinDate = new Date(2018 + Math.floor(Math.random() * 5), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1);
248
+
249
+ data.push({
250
+ id: i,
251
+ name: `${firstName} ${lastName}`,
252
+ position: pos,
253
+ department: dept,
254
+ status: status,
255
+ joinDate: joinDate.toISOString().split('T')[0]
256
+ });
257
+ }
258
+
259
+ // Initialize TanStack Table
260
+ const table = window.TanStackTableCore;
261
+
262
+ // Column definitions
263
+ const columns = [
264
+ {
265
+ accessorKey: 'id',
266
+ header: 'ID',
267
+ size: 80,
268
+ cell: info => info.getValue(),
269
+ },
270
+ {
271
+ accessorKey: 'name',
272
+ header: 'Name',
273
+ cell: info => {
274
+ const name = info.getValue();
275
+ return `<div class="flex items-center gap-3">
276
+ <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-medium">
277
+ ${name.charAt(0)}
278
+ </div>
279
+ <span class="font-medium">${name}</span>
280
+ </div>`;
281
+ },
282
+ },
283
+ {
284
+ accessorKey: 'position',
285
+ header: 'Position',
286
+ cell: info => `<span class="text-gray-700">${info.getValue()}</span>`,
287
+ },
288
+ {
289
+ accessorKey: 'department',
290
+ header: 'Department',
291
+ cell: info => {
292
+ const dept = info.getValue();
293
+ let bgColor = 'bg-gray-100 text-gray-800';
294
+ if (dept === 'Engineering') bgColor = 'bg-blue-100 text-blue-800';
295
+ if (dept === 'Marketing') bgColor = 'bg-purple-100 text-purple-800';
296
+ if (dept === 'Sales') bgColor = 'bg-green-100 text-green-800';
297
+ if (dept === 'HR') bgColor = 'bg-pink-100 text-pink-800';
298
+ if (dept === 'Finance') bgColor = 'bg-yellow-100 text-yellow-800';
299
+
300
+ return `<span class="px-2 py-1 text-xs rounded-full ${bgColor}">${dept}</span>`;
301
+ },
302
+ },
303
+ {
304
+ accessorKey: 'status',
305
+ header: 'Status',
306
+ cell: info => {
307
+ const status = info.getValue();
308
+ let bgColor = 'bg-gray-100 text-gray-800';
309
+ let icon = 'fa-circle';
310
+ if (status === 'active') {
311
+ bgColor = 'bg-green-100 text-green-800';
312
+ icon = 'fa-check-circle';
313
+ }
314
+ if (status === 'inactive') {
315
+ bgColor = 'bg-red-100 text-red-800';
316
+ icon = 'fa-times-circle';
317
+ }
318
+ if (status === 'on-leave') {
319
+ bgColor = 'bg-yellow-100 text-yellow-800';
320
+ icon = 'fa-umbrella-beach';
321
+ }
322
+
323
+ return `<div class="flex items-center gap-2">
324
+ <i class="fas ${icon} text-xs"></i>
325
+ <span class="capitalize">${status}</span>
326
+ </div>`;
327
+ },
328
+ },
329
+ {
330
+ accessorKey: 'joinDate',
331
+ header: 'Join Date',
332
+ cell: info => {
333
+ const date = new Date(info.getValue());
334
+ return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
335
+ },
336
+ },
337
+ {
338
+ id: 'actions',
339
+ header: 'Actions',
340
+ cell: info => {
341
+ return `<div class="flex gap-2">
342
+ <button class="edit-btn px-2 py-1 text-blue-600 hover:text-blue-800" data-id="${info.row.original.id}">
343
+ <i class="fas fa-edit"></i>
344
+ </button>
345
+ <button class="delete-btn px-2 py-1 text-red-600 hover:text-red-800" data-id="${info.row.original.id}">
346
+ <i class="fas fa-trash"></i>
347
+ </button>
348
+ </div>`;
349
+ },
350
+ },
351
+ ];
352
+
353
+ // Table state
354
+ let tableState = {
355
+ data: [...data],
356
+ columns,
357
+ pagination: {
358
+ pageIndex: 0,
359
+ pageSize: 10,
360
+ },
361
+ sorting: [],
362
+ globalFilter: '',
363
+ columnFilters: [],
364
+ };
365
+
366
+ // Initialize table instance
367
+ const tableInstance = table.createTable({
368
+ data: [...data], // Ensure fresh data is passed
369
+ columns: tableState.columns,
370
+ state: {
371
+ pagination: tableState.pagination,
372
+ sorting: tableState.sorting,
373
+ globalFilter: tableState.globalFilter,
374
+ columnFilters: tableState.columnFilters,
375
+ },
376
+ initialState: {
377
+ pagination: {
378
+ pageSize: 10
379
+ }
380
+ },
381
+ onPaginationChange: updater => {
382
+ tableState.pagination = typeof updater === 'function' ? updater(tableState.pagination) : updater;
383
+ renderTable();
384
+ },
385
+ onSortingChange: updater => {
386
+ tableState.sorting = typeof updater === 'function' ? updater(tableState.sorting) : updater;
387
+ renderTable();
388
+ },
389
+ onGlobalFilterChange: updater => {
390
+ tableState.globalFilter = typeof updater === 'function' ? updater(tableState.globalFilter) : updater;
391
+ tableState.pagination.pageIndex = 0; // Reset to first page on filter
392
+ renderTable();
393
+ },
394
+ onColumnFiltersChange: updater => {
395
+ tableState.columnFilters = typeof updater === 'function' ? updater(tableState.columnFilters) : updater;
396
+ tableState.pagination.pageIndex = 0; // Reset to first page on filter
397
+ renderTable();
398
+ },
399
+ getCoreRowModel: table.getCoreRowModel(),
400
+ getSortedRowModel: table.getSortedRowModel(),
401
+ getFilteredRowModel: table.getFilteredRowModel(),
402
+ getPaginationRowModel: table.getPaginationRowModel(),
403
+ });
404
+
405
+ // Render table function
406
+ function renderTable() {
407
+ // Show loading indicator
408
+ document.getElementById('loadingIndicator').classList.remove('hidden');
409
+ document.getElementById('dataTable').classList.add('opacity-50');
410
+
411
+ // Simulate loading delay
412
+ setTimeout(() => {
413
+ // Get filtered/sorted/paginated data
414
+ const headerGroups = tableInstance.getHeaderGroups();
415
+ const rowModel = tableInstance.getRowModel();
416
+
417
+ console.log('Row model rows:', rowModel.rows); // Debugging
418
+
419
+ // Render header
420
+ const headerRow = document.getElementById('tableHeader');
421
+ headerRow.innerHTML = '';
422
+
423
+ headerGroups[0].headers.forEach(header => {
424
+ const th = document.createElement('th');
425
+ th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider';
426
+ th.style.width = `${header.getSize()}px`;
427
+
428
+ const canSort = header.column.getCanSort();
429
+
430
+ if (canSort) {
431
+ th.className += ' cursor-pointer hover:bg-gray-100';
432
+ th.onclick = header.column.getToggleSortingHandler();
433
+ }
434
+
435
+ const sortDirection = header.column.getIsSorted();
436
+ let sortIcon = '';
437
+
438
+ if (sortDirection === 'asc') {
439
+ sortIcon = '<i class="fas fa-sort-up ml-1"></i>';
440
+ } else if (sortDirection === 'desc') {
441
+ sortIcon = '<i class="fas fa-sort-down ml-1"></i>';
442
+ } else if (canSort) {
443
+ sortIcon = '<i class="fas fa-sort ml-1 text-gray-300"></i>';
444
+ }
445
+
446
+ th.innerHTML = `<div class="flex items-center">${header.column.columnDef.header}${sortIcon}</div>`;
447
+ headerRow.appendChild(th);
448
+ });
449
+
450
+ // Render body
451
+ const tableBody = document.getElementById('tableBody');
452
+ tableBody.innerHTML = '';
453
+
454
+ rowModel.rows.forEach(row => {
455
+ const tr = document.createElement('tr');
456
+ tr.className = 'animate-row-hover';
457
+
458
+ row.getVisibleCells().forEach(cell => {
459
+ const td = document.createElement('td');
460
+ td.className = 'px-6 py-4 whitespace-nowrap';
461
+ td.innerHTML = cell.column.columnDef.cell(cell);
462
+ tr.appendChild(td);
463
+ });
464
+
465
+ tableBody.appendChild(tr);
466
+ });
467
+
468
+ // Update pagination info
469
+ const pageCount = tableInstance.getPageCount();
470
+ const currentPage = tableInstance.getState().pagination.pageIndex;
471
+ const pageSize = tableInstance.getState().pagination.pageSize;
472
+ const totalItems = tableInstance.getFilteredRowModel().rows.length;
473
+
474
+ document.getElementById('showingFrom').textContent = (currentPage * pageSize) + 1;
475
+ document.getElementById('showingTo').textContent = Math.min((currentPage + 1) * pageSize, totalItems);
476
+ document.getElementById('totalItems').textContent = totalItems;
477
+
478
+ // Render pagination buttons
479
+ const pageNumbers = document.getElementById('pageNumbers');
480
+ pageNumbers.innerHTML = '';
481
+
482
+ const maxVisiblePages = 5;
483
+ let startPage = Math.max(0, currentPage - Math.floor(maxVisiblePages / 2));
484
+ let endPage = Math.min(pageCount - 1, startPage + maxVisiblePages - 1);
485
+
486
+ if (endPage - startPage + 1 < maxVisiblePages) {
487
+ startPage = Math.max(0, endPage - maxVisiblePages + 1);
488
+ }
489
+
490
+ // Always show first page if not visible
491
+ if (startPage > 0) {
492
+ const firstPageBtn = document.createElement('button');
493
+ firstPageBtn.className = `px-3 py-1 border rounded-md ${currentPage === 0 ? 'bg-blue-100 border-blue-300' : ''}`;
494
+ firstPageBtn.textContent = '1';
495
+ firstPageBtn.onclick = () => tableInstance.setPageIndex(0);
496
+ pageNumbers.appendChild(firstPageBtn);
497
+
498
+ if (startPage > 1) {
499
+ const ellipsis = document.createElement('span');
500
+ ellipsis.className = 'px-2';
501
+ ellipsis.textContent = '...';
502
+ pageNumbers.appendChild(ellipsis);
503
+ }
504
+ }
505
+
506
+ for (let i = startPage; i <= endPage; i++) {
507
+ const pageBtn = document.createElement('button');
508
+ pageBtn.className = `px-3 py-1 border rounded-md ${currentPage === i ? 'bg-blue-100 border-blue-300' : ''}`;
509
+ pageBtn.textContent = i + 1;
510
+ pageBtn.onclick = () => tableInstance.setPageIndex(i);
511
+ pageNumbers.appendChild(pageBtn);
512
+ }
513
+
514
+ // Always show last page if not visible
515
+ if (endPage < pageCount - 1) {
516
+ if (endPage < pageCount - 2) {
517
+ const ellipsis = document.createElement('span');
518
+ ellipsis.className = 'px-2';
519
+ ellipsis.textContent = '...';
520
+ pageNumbers.appendChild(ellipsis);
521
+ }
522
+
523
+ const lastPageBtn = document.createElement('button');
524
+ lastPageBtn.className = `px-3 py-1 border rounded-md ${currentPage === pageCount - 1 ? 'bg-blue-100 border-blue-300' : ''}`;
525
+ lastPageBtn.textContent = pageCount;
526
+ lastPageBtn.onclick = () => tableInstance.setPageIndex(pageCount - 1);
527
+ pageNumbers.appendChild(lastPageBtn);
528
+ }
529
+
530
+ // Update pagination button states
531
+ document.getElementById('firstPage').disabled = currentPage === 0;
532
+ document.getElementById('prevPage').disabled = currentPage === 0;
533
+ document.getElementById('nextPage').disabled = currentPage >= pageCount - 1;
534
+ document.getElementById('lastPage').disabled = currentPage >= pageCount - 1;
535
+
536
+ // Hide loading indicator
537
+ document.getElementById('loadingIndicator').classList.add('hidden');
538
+ document.getElementById('dataTable').classList.remove('opacity-50');
539
+ }, 300);
540
+ }
541
+
542
+ // Initial render
543
+ console.log('Initial data:', data); // Debugging
544
+ console.log('Table instance:', tableInstance); // Debugging
545
+ renderTable();
546
+
547
+ // Event listeners
548
+ document.getElementById('searchInput').addEventListener('input', (e) => {
549
+ tableInstance.setGlobalFilter(e.target.value);
550
+ });
551
+
552
+ document.getElementById('statusFilter').addEventListener('change', (e) => {
553
+ if (e.target.value === 'all') {
554
+ tableInstance.setColumnFilters(tableState.columnFilters.filter(f => f.id !== 'status'));
555
+ } else {
556
+ tableInstance.setColumnFilters([
557
+ ...tableState.columnFilters.filter(f => f.id !== 'status'),
558
+ { id: 'status', value: e.target.value }
559
+ ]);
560
+ }
561
+ });
562
+
563
+ // Department pill tabs event delegation
564
+ document.addEventListener('click', (e) => {
565
+ if (e.target.closest('.department-pill')) {
566
+ const dept = e.target.closest('.department-pill').getAttribute('data-dept');
567
+
568
+ // Update active state
569
+ document.querySelectorAll('.department-pill').forEach(btn => {
570
+ btn.classList.remove('bg-blue-600', 'text-white');
571
+ btn.classList.add(btn.classList.contains('bg-blue-100') ? 'bg-blue-100' :
572
+ btn.classList.contains('bg-purple-100') ? 'bg-purple-100' :
573
+ btn.classList.contains('bg-green-100') ? 'bg-green-100' :
574
+ btn.classList.contains('bg-pink-100') ? 'bg-pink-100' :
575
+ btn.classList.contains('bg-yellow-100') ? 'bg-yellow-100' :
576
+ btn.classList.contains('bg-indigo-100') ? 'bg-indigo-100' :
577
+ btn.classList.contains('bg-red-100') ? 'bg-red-100' : 'bg-gray-100');
578
+ });
579
+
580
+ if (dept === 'all') {
581
+ tableInstance.setColumnFilters(tableState.columnFilters.filter(f => f.id !== 'department'));
582
+ } else {
583
+ e.target.closest('.department-pill').classList.remove('bg-blue-100', 'bg-purple-100', 'bg-green-100', 'bg-pink-100', 'bg-yellow-100', 'bg-indigo-100', 'bg-red-100', 'bg-gray-100');
584
+ e.target.closest('.department-pill').classList.add('bg-blue-600', 'text-white');
585
+ tableInstance.setColumnFilters([
586
+ ...tableState.columnFilters.filter(f => f.id !== 'department'),
587
+ { id: 'department', value: dept }
588
+ ]);
589
+ }
590
+ }
591
+ });
592
+
593
+ document.getElementById('rowsPerPage').addEventListener('change', (e) => {
594
+ tableInstance.setPageSize(Number(e.target.value));
595
+ });
596
+
597
+ document.getElementById('firstPage').addEventListener('click', () => {
598
+ tableInstance.setPageIndex(0);
599
+ });
600
+
601
+ document.getElementById('prevPage').addEventListener('click', () => {
602
+ tableInstance.previousPage();
603
+ });
604
+
605
+ document.getElementById('nextPage').addEventListener('click', () => {
606
+ tableInstance.nextPage();
607
+ });
608
+
609
+ document.getElementById('lastPage').addEventListener('click', () => {
610
+ tableInstance.setPageIndex(tableInstance.getPageCount() - 1);
611
+ });
612
+
613
+ // Modal functionality
614
+ const modal = document.getElementById('employeeModal');
615
+ const addEmployeeBtn = document.getElementById('addEmployeeBtn');
616
+ const closeModal = document.getElementById('closeModal');
617
+ const cancelBtn = document.getElementById('cancelBtn');
618
+ const employeeForm = document.getElementById('employeeForm');
619
+
620
+ let currentEditId = null;
621
+
622
+ function openModal(employee = null) {
623
+ if (employee) {
624
+ document.getElementById('modalTitle').textContent = 'Edit Employee';
625
+ document.getElementById('name').value = employee.name;
626
+ document.getElementById('position').value = employee.position;
627
+ document.getElementById('department').value = employee.department;
628
+ document.getElementById('status').value = employee.status;
629
+ currentEditId = employee.id;
630
+ } else {
631
+ document.getElementById('modalTitle').textContent = 'Add Employee';
632
+ employeeForm.reset();
633
+ currentEditId = null;
634
+ }
635
+ modal.classList.remove('hidden');
636
+ }
637
+
638
+ function closeModalHandler() {
639
+ modal.classList.add('hidden');
640
+ }
641
+
642
+ addEmployeeBtn.addEventListener('click', () => openModal());
643
+ closeModal.addEventListener('click', closeModalHandler);
644
+ cancelBtn.addEventListener('click', closeModalHandler);
645
+
646
+ // Handle form submission
647
+ employeeForm.addEventListener('submit', (e) => {
648
+ e.preventDefault();
649
+
650
+ const newEmployee = {
651
+ id: currentEditId || Math.max(...tableState.data.map(e => e.id)) + 1,
652
+ name: document.getElementById('name').value,
653
+ position: document.getElementById('position').value,
654
+ department: document.getElementById('department').value,
655
+ status: document.getElementById('status').value,
656
+ joinDate: new Date().toISOString().split('T')[0],
657
+ };
658
+
659
+ if (currentEditId) {
660
+ // Update existing employee
661
+ const index = tableState.data.findIndex(e => e.id === currentEditId);
662
+ if (index !== -1) {
663
+ tableState.data[index] = newEmployee;
664
+ }
665
+ } else {
666
+ // Add new employee
667
+ tableState.data.unshift(newEmployee);
668
+ }
669
+
670
+ // Reset table state and render
671
+ tableState.pagination.pageIndex = 0;
672
+ tableInstance.setData([...tableState.data]);
673
+ renderTable();
674
+
675
+ closeModalHandler();
676
+ });
677
+
678
+ // Handle edit and delete buttons (delegated events)
679
+ document.addEventListener('click', (e) => {
680
+ // Edit button
681
+ if (e.target.closest('.edit-btn')) {
682
+ const id = parseInt(e.target.closest('.edit-btn').getAttribute('data-id'));
683
+ const employee = tableState.data.find(e => e.id === id);
684
+ if (employee) {
685
+ openModal(employee);
686
+ }
687
+ }
688
+
689
+ // Delete button
690
+ if (e.target.closest('.delete-btn')) {
691
+ const id = parseInt(e.target.closest('.delete-btn').getAttribute('data-id'));
692
+ if (confirm('Are you sure you want to delete this employee?')) {
693
+ tableState.data = tableState.data.filter(e => e.id !== id);
694
+ tableInstance.setData([...tableState.data]);
695
+ renderTable();
696
+ }
697
+ }
698
+ });
699
+ </script>
700
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=etrano/zz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
701
+ </html>