@keenthemes/ktui 1.0.27 → 1.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/ktui.js +13 -1
  2. package/dist/ktui.min.js +1 -1
  3. package/dist/ktui.min.js.map +1 -1
  4. package/dist/styles.css +5 -0
  5. package/lib/cjs/components/datatable/datatable.js +13 -1
  6. package/lib/cjs/components/datatable/datatable.js.map +1 -1
  7. package/lib/esm/components/datatable/datatable.js +13 -1
  8. package/lib/esm/components/datatable/datatable.js.map +1 -1
  9. package/package.json +23 -5
  10. package/src/components/datatable/datatable.ts +13 -3
  11. package/src/components/table/table.css +7 -0
  12. package/CONTRIBUTING.md +0 -88
  13. package/examples/datatable/checkbox-events-test.html +0 -400
  14. package/examples/datatable/credentials-test.html +0 -423
  15. package/examples/datatable/remote-checkbox-test.html +0 -365
  16. package/examples/datatable/sorting-test.html +0 -258
  17. package/examples/image-input/file-upload-example.html +0 -189
  18. package/examples/modal/persistent.html +0 -205
  19. package/examples/modal/remote-select-dropdown.html +0 -166
  20. package/examples/modal/select-dropdown-container.html +0 -129
  21. package/examples/select/avatar.html +0 -47
  22. package/examples/select/basic-usage.html +0 -39
  23. package/examples/select/country.html +0 -43
  24. package/examples/select/dark-mode.html +0 -93
  25. package/examples/select/description.html +0 -53
  26. package/examples/select/disable-option.html +0 -37
  27. package/examples/select/disable-select.html +0 -35
  28. package/examples/select/dropdowncontainer.html +0 -111
  29. package/examples/select/dynamic-methods.html +0 -273
  30. package/examples/select/formdata-remote.html +0 -161
  31. package/examples/select/global-config.html +0 -81
  32. package/examples/select/icon-multiple.html +0 -50
  33. package/examples/select/icon.html +0 -48
  34. package/examples/select/max-selection.html +0 -38
  35. package/examples/select/modal-container.html +0 -128
  36. package/examples/select/modal-positioning-test.html +0 -338
  37. package/examples/select/modal.html +0 -80
  38. package/examples/select/multiple.html +0 -40
  39. package/examples/select/native-selected.html +0 -64
  40. package/examples/select/placeholder.html +0 -40
  41. package/examples/select/remote-data-preselected.html +0 -283
  42. package/examples/select/remote-data.html +0 -38
  43. package/examples/select/search.html +0 -57
  44. package/examples/select/sizes.html +0 -94
  45. package/examples/select/tags-enhanced.html +0 -86
  46. package/examples/select/tags-icons.html +0 -57
  47. package/examples/select/template-customization.html +0 -61
  48. package/examples/sticky/README.md +0 -158
  49. package/examples/sticky/debug-sticky.html +0 -144
  50. package/examples/sticky/test-runner.html +0 -175
  51. package/examples/sticky/test-sticky-logic.js +0 -369
  52. package/examples/sticky/test-sticky-positioning.html +0 -386
  53. package/examples/toast/example.html +0 -479
  54. package/prettier.config.js +0 -9
  55. package/tsconfig.json +0 -17
  56. package/webpack.config.js +0 -118
package/examples/datatable/remote-checkbox-test.html DELETED
@@ -1,365 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>DataTable Remote Data with Checkboxes Test</title>
8
- <link rel="stylesheet" href="../../dist/styles.css">
9
- </head>
10
-
11
- <body class="bg-gray-50 min-h-screen p-4">
12
- <div class="container mx-auto max-w-5xl">
13
- <div class="bg-white rounded-lg shadow-lg p-8 mt-6 border border-gray-200">
14
- <div class="mb-6">
15
- <h1 class="text-xl font-bold text-gray-900">DataTable Remote Data with Checkboxes Test</h1>
16
- <p class="text-sm text-gray-600 mt-2">Tests checkbox events with server-side data from JSONPlaceholder API</p>
17
- </div>
18
-
19
- <!-- Current Selection Display -->
20
- <div class="mb-6">
21
- <h2 class="text-lg font-semibold text-gray-800 mb-3">Current Selection</h2>
22
- <div id="selectionDisplay" class="bg-blue-50 border border-blue-200 rounded-md p-4">
23
- <div class="text-gray-700">
24
- <strong>Checked IDs:</strong> <span id="checkedIds" class="font-mono">[]</span>
25
- </div>
26
- <div class="text-gray-700 mt-2">
27
- <strong>Count:</strong> <span id="checkedCount" class="font-semibold">0</span>
28
- </div>
29
- </div>
30
- </div>
31
-
32
- <!-- Test Controls -->
33
- <div class="mb-6 flex gap-3 flex-wrap">
34
- <button
35
- onclick="testCheckAll()"
36
- class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors font-medium">
37
- Check All
38
- </button>
39
- <button
40
- onclick="testUncheckAll()"
41
- class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors font-medium">
42
- Uncheck All
43
- </button>
44
- <button
45
- onclick="testToggle()"
46
- class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors font-medium">
47
- Toggle All
48
- </button>
49
- <button
50
- onclick="testGetChecked()"
51
- class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors font-medium">
52
- Get Checked
53
- </button>
54
- </div>
55
-
56
- <!-- DataTable Container -->
57
- <div class="kt-card">
58
- <div class="kt-card-table" id="remote-datatable-container">
59
- <div class="kt-table-wrapper kt-scrollable">
60
- <table id="remote-checkbox-table" class="kt-table" data-kt-datatable-table="true">
61
- <thead>
62
- <tr>
63
- <th scope="col" class="w-12" data-kt-datatable-column="checkbox">
64
- <input
65
- type="checkbox"
66
- data-kt-datatable-check="true"
67
- class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
68
- </th>
69
- <th scope="col" class="w-20" data-kt-datatable-column="id">
70
- <span class="kt-table-col">
71
- <span class="kt-table-col-label">ID</span>
72
- <span class="kt-table-col-sort"></span>
73
- </span>
74
- </th>
75
- <th scope="col" class="w-48" data-kt-datatable-column="name">
76
- <span class="kt-table-col">
77
- <span class="kt-table-col-label">Name</span>
78
- <span class="kt-table-col-sort"></span>
79
- </span>
80
- </th>
81
- <th scope="col" class="w-64" data-kt-datatable-column="email">
82
- <span class="kt-table-col">
83
- <span class="kt-table-col-label">Email</span>
84
- <span class="kt-table-col-sort"></span>
85
- </span>
86
- </th>
87
- <th scope="col" class="w-40" data-kt-datatable-column="company">
88
- <span class="kt-table-col">
89
- <span class="kt-table-col-label">Company</span>
90
- <span class="kt-table-col-sort"></span>
91
- </span>
92
- </th>
93
- </tr>
94
- </thead>
95
- <tbody>
96
- <!-- Data will be loaded from API -->
97
- </tbody>
98
- </table>
99
- </div>
100
-
101
- <!-- Pagination Info -->
102
- <div class="flex items-center justify-between mt-4">
103
- <div class="flex items-center space-x-2">
104
- <span class="text-sm text-gray-700">Show</span>
105
- <select data-kt-datatable-size="true" class="border border-gray-300 rounded px-2 py-1 bg-white text-gray-900">
106
- <option value="5" selected>5</option>
107
- <option value="10">10</option>
108
- </select>
109
- <span class="text-sm text-gray-700">entries</span>
110
- </div>
111
- <div data-kt-datatable-info="true" class="text-sm text-gray-700"></div>
112
- </div>
113
-
114
- <!-- Pagination Controls -->
115
- <div class="flex justify-center mt-4">
116
- <div data-kt-datatable-pagination="true" class="flex space-x-1"></div>
117
- </div>
118
- </div>
119
- </div>
120
- </div>
121
-
122
- <!-- Event Log Section -->
123
- <div class="bg-white rounded-lg shadow-lg p-8 mt-6 border border-gray-200">
124
- <div class="flex items-center justify-between mb-3">
125
- <h2 class="text-lg font-semibold text-gray-800">Event Log</h2>
126
- <button
127
- id="clearLog"
128
- onclick="clearEventLog()"
129
- class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors">
130
- Clear Log
131
- </button>
132
- </div>
133
- <div id="eventLog" class="bg-gray-50 border border-gray-200 rounded-md p-4 h-64 overflow-y-auto font-mono text-sm">
134
- <div class="text-gray-500">No events yet. Interact with checkboxes to see events...</div>
135
- </div>
136
- </div>
137
- </div>
138
-
139
- <script src="../../dist/ktui.js"></script>
140
- <script>
141
- let datatableInstance = null;
142
-
143
- // Event log helper functions
144
- function addEventLog(eventName, details = '') {
145
- const logElement = document.getElementById('eventLog');
146
- const timestamp = new Date().toLocaleTimeString();
147
- const logEntry = document.createElement('div');
148
- logEntry.className = 'mb-2 pb-2 border-b border-gray-200';
149
-
150
- let eventColor = 'text-gray-700';
151
- if (eventName === 'checked') {
152
- eventColor = 'text-green-600';
153
- } else if (eventName === 'unchecked') {
154
- eventColor = 'text-red-600';
155
- } else if (eventName === 'changed') {
156
- eventColor = 'text-blue-600';
157
- } else if (eventName === 'fetch' || eventName === 'fetched') {
158
- eventColor = 'text-purple-600';
159
- }
160
-
161
- logEntry.innerHTML = `
162
- <div class="flex items-start gap-2">
163
- <span class="text-gray-500 text-xs">[${timestamp}]</span>
164
- <span class="font-semibold ${eventColor}">${eventName.toUpperCase()}</span>
165
- ${details ? `<span class="text-gray-600">${details}</span>` : ''}
166
- </div>
167
- `;
168
-
169
- // Remove "No events yet" message if it exists
170
- const firstChild = logElement.firstChild;
171
- if (firstChild && firstChild.textContent.includes('No events yet')) {
172
- logElement.removeChild(firstChild);
173
- }
174
-
175
- logElement.insertBefore(logEntry, logElement.firstChild);
176
-
177
- // Keep only last 50 entries
178
- while (logElement.children.length > 50) {
179
- logElement.removeChild(logElement.lastChild);
180
- }
181
- }
182
-
183
- function clearEventLog() {
184
- const logElement = document.getElementById('eventLog');
185
- logElement.innerHTML = '<div class="text-gray-500">No events yet. Interact with checkboxes to see events...</div>';
186
- }
187
-
188
- function updateSelectionDisplay() {
189
- if (!datatableInstance || typeof datatableInstance.getChecked !== 'function') {
190
- return;
191
- }
192
- try {
193
- const checkedIds = datatableInstance.getChecked();
194
- document.getElementById('checkedIds').textContent = JSON.stringify(checkedIds);
195
- document.getElementById('checkedCount').textContent = checkedIds.length;
196
- } catch (e) {
197
- console.error('Error updating selection display:', e);
198
- }
199
- }
200
-
201
- // Test functions
202
- function testCheckAll() {
203
- if (datatableInstance) {
204
- datatableInstance.check();
205
- }
206
- }
207
-
208
- function testUncheckAll() {
209
- if (datatableInstance) {
210
- datatableInstance.uncheck();
211
- }
212
- }
213
-
214
- function testToggle() {
215
- if (datatableInstance) {
216
- datatableInstance.toggle();
217
- }
218
- }
219
-
220
- function testGetChecked() {
221
- if (datatableInstance) {
222
- const checkedIds = datatableInstance.getChecked();
223
- addEventLog('info', `Manual getChecked() call returned: [${checkedIds.join(', ')}]`);
224
- }
225
- }
226
-
227
- // Initialize the datatable when page loads
228
- document.addEventListener('DOMContentLoaded', function() {
229
- setTimeout(() => {
230
- try {
231
- // Initialize KTUI components
232
- if (typeof KTDataTable !== 'undefined') {
233
- const container = document.getElementById('remote-datatable-container');
234
- if (container) {
235
- // Set data attributes for datatable initialization
236
- container.setAttribute('data-kt-datatable', 'true');
237
- container.setAttribute('data-kt-datatable-page-size', '5');
238
- container.setAttribute('data-kt-datatable-api-endpoint', 'https://jsonplaceholder.typicode.com/users');
239
-
240
- datatableInstance = new KTDataTable(container, {
241
- apiEndpoint: 'https://jsonplaceholder.typicode.com/users',
242
- requestMethod: 'GET',
243
- requestHeaders: {
244
- 'Content-Type': 'application/json'
245
- },
246
- columns: {
247
- 'checkbox': {
248
- render: function(cellData, rowData, context) {
249
- const checkbox = document.createElement('input');
250
- checkbox.type = 'checkbox';
251
- checkbox.value = rowData.id;
252
- checkbox.setAttribute('data-kt-datatable-row-check', 'true');
253
- checkbox.className = 'w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2';
254
- return checkbox;
255
- }
256
- },
257
- 'id': {
258
- render: function(cellData, rowData, context) {
259
- return String(cellData);
260
- }
261
- },
262
- 'name': {
263
- render: function(cellData, rowData, context) {
264
- return String(cellData);
265
- }
266
- },
267
- 'email': {
268
- render: function(cellData, rowData, context) {
269
- return String(cellData);
270
- }
271
- },
272
- 'company': {
273
- render: function(cellData, rowData, context) {
274
- return String(cellData);
275
- }
276
- }
277
- },
278
- mapResponse: function(response) {
279
- // JSONPlaceholder returns an array directly
280
- // Transform nested objects to flat structure and format for datatable
281
- if (Array.isArray(response)) {
282
- const transformedData = response.map(user => ({
283
- checkbox: '', // Empty value for checkbox column
284
- id: user.id,
285
- name: user.name,
286
- email: user.email,
287
- company: user.company ? user.company.name : ''
288
- }));
289
-
290
- // Get current pagination state for client-side pagination
291
- // Since JSONPlaceholder doesn't support server-side pagination
292
- // Use 'this' context which refers to the datatable instance
293
- const state = this.getState();
294
- const page = state.page || 1;
295
- const pageSize = state.pageSize || 10;
296
-
297
- // Slice data for current page (client-side pagination)
298
- const startIndex = (page - 1) * pageSize;
299
- const endIndex = startIndex + pageSize;
300
- const paginatedData = transformedData.slice(startIndex, endIndex);
301
-
302
- return {
303
- data: paginatedData,
304
- totalCount: transformedData.length
305
- };
306
- }
307
- // If already in correct format, return as is
308
- return response;
309
- },
310
- checkbox: {
311
- preserveSelection: true
312
- }
313
- });
314
-
315
- console.log('✅ Remote DataTable with Checkboxes initialized successfully!');
316
-
317
- // Attach event listeners using DOM events (without kt-datatable- prefix)
318
- container.addEventListener('checked', function(event) {
319
- const checkedIds = datatableInstance.getChecked();
320
- addEventLog('checked', `Selected ${checkedIds.length} rows: [${checkedIds.join(', ')}]`);
321
- updateSelectionDisplay();
322
- });
323
-
324
- container.addEventListener('unchecked', function(event) {
325
- const checkedIds = datatableInstance.getChecked();
326
- addEventLog('unchecked', `Deselected. Remaining: ${checkedIds.length} rows: [${checkedIds.join(', ')}]`);
327
- updateSelectionDisplay();
328
- });
329
-
330
- container.addEventListener('changed', function(event) {
331
- const checkedIds = datatableInstance.getChecked();
332
- addEventLog('changed', `Selection changed. Total: ${checkedIds.length} rows: [${checkedIds.join(', ')}]`);
333
- updateSelectionDisplay();
334
- });
335
-
336
- container.addEventListener('fetch', function() {
337
- addEventLog('fetch', 'Fetching data from server...');
338
- });
339
-
340
- container.addEventListener('fetched', function() {
341
- try {
342
- const state = datatableInstance.getState();
343
- addEventLog('fetched', `Loaded ${state.totalItems || 0} total records`);
344
- // Update selection display after data is loaded
345
- updateSelectionDisplay();
346
- } catch (e) {
347
- console.error('Error in fetched handler:', e);
348
- }
349
- });
350
- } else {
351
- console.error('❌ DataTable container not found');
352
- }
353
- } else {
354
- console.error('❌ KTDataTable is not defined');
355
- }
356
- } catch (error) {
357
- console.error('❌ Error initializing Remote DataTable: ' + error.message);
358
- }
359
- }, 100);
360
- });
361
- </script>
362
- </body>
363
-
364
- </html>
365
-
package/examples/datatable/sorting-test.html DELETED
@@ -1,258 +0,0 @@
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>KT DataTable Sorting Test</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="stylesheet" href="../../dist/styles.css">
9
- <style>
10
- /* Custom styles for the test */
11
- .test-container {
12
- max-width: 1200px;
13
- margin: 0 auto;
14
- padding: 20px;
15
- }
16
- .test-header {
17
- background: #f8f9fa;
18
- padding: 20px;
19
- border-radius: 8px;
20
- margin-bottom: 20px;
21
- }
22
- .test-controls {
23
- display: flex;
24
- gap: 10px;
25
- margin-bottom: 20px;
26
- flex-wrap: wrap;
27
- }
28
- .test-button {
29
- background: #007bff;
30
- color: white;
31
- border: none;
32
- padding: 8px 16px;
33
- border-radius: 4px;
34
- cursor: pointer;
35
- }
36
- .test-button:hover {
37
- background: #0056b3;
38
- }
39
- .test-status {
40
- padding: 10px;
41
- border-radius: 4px;
42
- margin-top: 10px;
43
- font-weight: bold;
44
- }
45
- .test-pass {
46
- background: #d4edda;
47
- color: #155724;
48
- border: 1px solid #c3e6cb;
49
- }
50
- .test-fail {
51
- background: #f8d7da;
52
- color: #721c24;
53
- border: 1px solid #f5c6cb;
54
- }
55
- </style>
56
- </head>
57
- <body>
58
- <div class="test-container">
59
- <!-- Search Input -->
60
- <div class="mb-4">
61
- <input
62
- type="text"
63
- id="search-input"
64
- placeholder="Search data..."
65
- class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
66
- data-kt-datatable-search="#sorting-test-table"
67
- >
68
- </div>
69
-
70
- <!-- DataTable Container using official structure -->
71
- <div class="kt-card">
72
- <div class="kt-card-table" data-kt-datatable="true" data-kt-datatable-page-size="5" data-kt-datatable-state-save="true">
73
- <div class="kt-table-wrapper kt-scrollable">
74
- <table id="sorting-test-table" class="kt-table" data-kt-datatable-table="true">
75
- <thead>
76
- <tr>
77
- <th scope="col" class="w-20" data-kt-datatable-column="id">
78
- <span class="kt-table-col">
79
- <span class="kt-table-col-label">ID</span>
80
- <span class="kt-table-col-sort"></span>
81
- </span>
82
- </th>
83
- <th scope="col" class="w-32" data-kt-datatable-column="name">
84
- <span class="kt-table-col">
85
- <span class="kt-table-col-label">Name</span>
86
- <span class="kt-table-col-sort"></span>
87
- </span>
88
- </th>
89
- <th scope="col" class="w-40" data-kt-datatable-column="email">
90
- <span class="kt-table-col">
91
- <span class="kt-table-col-label">Email</span>
92
- <span class="kt-table-col-sort"></span>
93
- </span>
94
- </th>
95
- <th scope="col" class="w-32" data-kt-datatable-column="department">
96
- <span class="kt-table-col">
97
- <span class="kt-table-col-label">Department</span>
98
- <span class="kt-table-col-sort"></span>
99
- </span>
100
- </th>
101
- <th scope="col" class="w-24" data-kt-datatable-column="salary">
102
- <span class="kt-table-col">
103
- <span class="kt-table-col-label">Salary</span>
104
- <span class="kt-table-col-sort"></span>
105
- </span>
106
- </th>
107
- <th scope="col" class="w-24" data-kt-datatable-column="status">
108
- <span class="kt-table-col">
109
- <span class="kt-table-col-label">Status</span>
110
- <span class="kt-table-col-sort"></span>
111
- </span>
112
- </th>
113
- </tr>
114
- </thead>
115
- <tbody>
116
- <tr>
117
- <td>1</td>
118
- <td>John Doe</td>
119
- <td>john.doe@example.com</td>
120
- <td>Engineering</td>
121
- <td>$75,000</td>
122
- <td><span class="kt-badge kt-badge-success">Active</span></td>
123
- </tr>
124
- <tr>
125
- <td>2</td>
126
- <td>Jane Smith</td>
127
- <td>jane.smith@example.com</td>
128
- <td>Marketing</td>
129
- <td>$65,000</td>
130
- <td><span class="kt-badge kt-badge-success">Active</span></td>
131
- </tr>
132
- <tr>
133
- <td>3</td>
134
- <td>Mike Johnson</td>
135
- <td>mike.johnson@example.com</td>
136
- <td>Engineering</td>
137
- <td>$80,000</td>
138
- <td><span class="kt-badge kt-badge-destructive">Inactive</span></td>
139
- </tr>
140
- <tr>
141
- <td>4</td>
142
- <td>Sarah Wilson</td>
143
- <td>sarah.wilson@example.com</td>
144
- <td>Sales</td>
145
- <td>$70,000</td>
146
- <td><span class="kt-badge kt-badge-success">Active</span></td>
147
- </tr>
148
- <tr>
149
- <td>5</td>
150
- <td>David Brown</td>
151
- <td>david.brown@example.com</td>
152
- <td>HR</td>
153
- <td>$60,000</td>
154
- <td><span class="kt-badge kt-badge-success">Active</span></td>
155
- </tr>
156
- <tr>
157
- <td>6</td>
158
- <td>Lisa Davis</td>
159
- <td>lisa.davis@example.com</td>
160
- <td>Engineering</td>
161
- <td>$85,000</td>
162
- <td><span class="kt-badge kt-badge-primary">Verified</span></td>
163
- </tr>
164
- <tr>
165
- <td>7</td>
166
- <td>Tom Anderson</td>
167
- <td>tom.anderson@example.com</td>
168
- <td>Marketing</td>
169
- <td>$68,000</td>
170
- <td><span class="kt-badge kt-badge-destructive">Inactive</span></td>
171
- </tr>
172
- <tr>
173
- <td>8</td>
174
- <td>Emma Taylor</td>
175
- <td>emma.taylor@example.com</td>
176
- <td>Sales</td>
177
- <td>$72,000</td>
178
- <td><span class="kt-badge kt-badge-success">Active</span></td>
179
- </tr>
180
- <tr>
181
- <td>9</td>
182
- <td>Chris Miller</td>
183
- <td>chris.miller@example.com</td>
184
- <td>Engineering</td>
185
- <td>$78,000</td>
186
- <td><span class="kt-badge kt-badge-success">Active</span></td>
187
- </tr>
188
- <tr>
189
- <td>10</td>
190
- <td>Amy Garcia</td>
191
- <td>amy.garcia@example.com</td>
192
- <td>HR</td>
193
- <td>$62,000</td>
194
- <td><span class="kt-badge kt-badge-success">Active</span></td>
195
- </tr>
196
- </tbody>
197
- </table>
198
- </div>
199
-
200
- <!-- Pagination Info -->
201
- <div class="flex items-center justify-between mt-4">
202
- <div class="flex items-center space-x-2">
203
- <span class="text-sm text-gray-700">Show</span>
204
- <select data-kt-datatable-size="true" class="border border-gray-300 rounded px-2 py-1">
205
- <option value="5">5</option>
206
- <option value="10" selected>10</option>
207
- <option value="20">20</option>
208
- <option value="50">50</option>
209
- </select>
210
- <span class="text-sm text-gray-700">entries</span>
211
- </div>
212
- <div data-kt-datatable-info="true" class="text-sm text-gray-700"></div>
213
- </div>
214
-
215
- <!-- Pagination Controls -->
216
- <div class="flex justify-center mt-4">
217
- <div data-kt-datatable-pagination="true" class="flex space-x-1"></div>
218
- </div>
219
- </div>
220
- </div>
221
- </div>
222
-
223
- <!-- Load KTUI -->
224
- <script src="../../dist/ktui.js"></script>
225
-
226
- <script>
227
- let datatableInstance = null;
228
-
229
- // Initialize the datatable when page loads
230
- document.addEventListener('DOMContentLoaded', function() {
231
- // Wait a bit for the DOM to be fully ready
232
- setTimeout(() => {
233
- try {
234
- // Initialize KTUI components using official method
235
- if (typeof KTDataTable !== 'undefined') {
236
- KTDataTable.init();
237
- }
238
-
239
- // Get the datatable instance using official API
240
- const container = document.querySelector('[data-kt-datatable="true"]');
241
- if (container) {
242
- datatableInstance = KTDataTable.getInstance(container);
243
- if (datatableInstance) {
244
- console.log('✅ DataTable initialized successfully using official API!');
245
- } else {
246
- console.error('❌ Failed to get DataTable instance');
247
- }
248
- } else {
249
- console.error('❌ DataTable container not found');
250
- }
251
- } catch (error) {
252
- console.error('❌ Error initializing DataTable: ' + error.message);
253
- }
254
- }, 100);
255
- });
256
- </script>
257
- </body>
258
- </html>