@keenthemes/ktui 1.1.4 → 1.1.6

package/src/components/datatable/__tests__/currency-sort.test.ts

@@ -0,0 +1,108 @@
+/**
+ * currency-sort.test.ts
+ * Tests that price/currency columns sort by numeric value, not lexicographically.
+ *
+ * Spec: fix-datatable-sort-arrow-and-numeric-sort
+ * Requirement: Numeric and Custom Column Sort Configuration
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { createSortHandler } from '../datatable-sort';
+
+describe('KTDataTable - Currency/numeric sort', () => {
+	let thead: HTMLTableSectionElement;
+	const noop = vi.fn();
+
+	beforeEach(() => {
+		thead = document.createElement('thead');
+		const tr = document.createElement('tr');
+		const th = document.createElement('th');
+		th.setAttribute('data-kt-datatable-column', 'price');
+		tr.appendChild(th);
+		thead.appendChild(tr);
+	});
+
+	it('sorts currency column by numeric value ascending (e.g. £5, £20, £123)', () => {
+		const config = {
+			columns: {
+				price: { sortType: 'numeric' as const },
+			},
+		};
+		const handler = createSortHandler(
+			config as any,
+			thead,
+			() => ({ sortField: null, sortOrder: '' }),
+			noop,
+			noop,
+			noop,
+			noop,
+		);
+
+		const data = [
+			{ price: '£123' },
+			{ price: '£20' },
+			{ price: '£5' },
+			{ price: '£9.99' },
+		];
+		const sorted = handler.sortData(data, 'price', 'asc');
+
+		// Must be numeric order: 5, 9.99, 20, 123 (not lexicographic £123, £20, £5)
+		const values = sorted.map((row) => row.price);
+		expect(values).toEqual(['£5', '£9.99', '£20', '£123']);
+	});
+
+	it('sorts currency column by numeric value descending', () => {
+		const config = {
+			columns: {
+				price: { sortType: 'numeric' as const },
+			},
+		};
+		const handler = createSortHandler(
+			config as any,
+			thead,
+			() => ({ sortField: null, sortOrder: '' }),
+			noop,
+			noop,
+			noop,
+			noop,
+		);
+
+		const data = [
+			{ price: '£5' },
+			{ price: '£20' },
+			{ price: '£123' },
+		];
+		const sorted = handler.sortData(data, 'price', 'desc');
+
+		const numericOrder = sorted.map((row) =>
+			parseFloat(String(row.price).replace(/[^0-9.-]/g, '')),
+		);
+		expect(numericOrder).toEqual([123, 20, 5]);
+	});
+
+	it('without sortType numeric, sorts lexicographically (e.g. £123 before £20)', () => {
+		const config = { columns: {} };
+		const handler = createSortHandler(
+			config as any,
+			thead,
+			() => ({ sortField: null, sortOrder: '' }),
+			noop,
+			noop,
+			noop,
+			noop,
+		);
+
+		const data = [
+			{ price: '£123' },
+			{ price: '£20' },
+			{ price: '£5' },
+		];
+		const sorted = handler.sortData(data, 'price', 'asc');
+
+		// String sort: "£123" < "£20" < "£5" (1 < 2 < 5)
+		const values = sorted.map((row) => row.price);
+		expect(values[0]).toBe('£123');
+		expect(values[1]).toBe('£20');
+		expect(values[2]).toBe('£5');
+	});
+});

package/src/components/datatable/__tests__/multi-row-headers.test.ts

@@ -0,0 +1,121 @@
+/**
+ * multi-row-headers.test.ts
+ * Tests for datatable column count with multi-row (grouped) headers.
+ *
+ * Spec: openspec/changes/fix-datatable-multi-row-header-column-count
+ * Requirement: Multi-Row (Grouped) Header Column Count
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { KTDataTable } from '../datatable';
+
+describe('KTDataTable - Multi-row header column count', () => {
+	let container: HTMLElement;
+	let tableElement: HTMLTableElement;
+
+	/**
+	 * Create a table with multi-row thead (no data-kt-datatable-column) and 17 data columns.
+	 * Row 1: Person (rowspan=2), Backlog (colspan=3), Floater2 (colspan=3), Floater1 (colspan=3), CL2025 (colspan=3), LWP (colspan=3), Action (rowspan=2) = 7 th
+	 * Row 2: 15 leaf th (Assigned, Used, Balance × 5)
+	 * Total 22 th in DOM but only 17 data columns.
+	 */
+	const createMultiRowHeaderTable = (bodyRowCount: number = 2) => {
+		container = document.createElement('div');
+		container.id = 'kt_datatable_multirow';
+		container.setAttribute('data-kt-datatable', 'true');
+
+		tableElement = document.createElement('table');
+		tableElement.setAttribute('data-kt-datatable-table', 'true');
+
+		const thead = document.createElement('thead');
+		const row1 = document.createElement('tr');
+		row1.innerHTML = `
+			<th rowspan="2">Person</th>
+			<th colspan="3">Backlog</th>
+			<th colspan="3">Floater (2) 2025</th>
+			<th colspan="3">Floater (1) 2025</th>
+			<th colspan="3">CL2025</th>
+			<th colspan="3">LWP</th>
+			<th rowspan="2">Action</th>
+		`;
+		thead.appendChild(row1);
+
+		const row2 = document.createElement('tr');
+		row2.innerHTML = `
+			<th>Assigned</th><th>Used</th><th>Balance</th>
+			<th>Assigned</th><th>Used</th><th>Balance</th>
+			<th>Assigned</th><th>Used</th><th>Balance</th>
+			<th>Assigned</th><th>Used</th><th>Balance</th>
+			<th>Assigned</th><th>Used</th><th>Balance</th>
+		`;
+		thead.appendChild(row2);
+		tableElement.appendChild(thead);
+
+		const tbody = document.createElement('tbody');
+		const tdCount = 17;
+		for (let r = 0; r < bodyRowCount; r++) {
+			const tr = document.createElement('tr');
+			for (let c = 0; c < tdCount; c++) {
+				const td = document.createElement('td');
+				td.textContent = c === 0 ? `Person ${r + 1}` : String(c);
+				tr.appendChild(td);
+			}
+			tbody.appendChild(tr);
+		}
+		tableElement.appendChild(tbody);
+
+		const wrapper = document.createElement('div');
+		wrapper.appendChild(tableElement);
+
+		const infoElement = document.createElement('span');
+		infoElement.setAttribute('data-kt-datatable-info', 'true');
+		const sizeElement = document.createElement('select');
+		sizeElement.setAttribute('data-kt-datatable-size', 'true');
+		const paginationElement = document.createElement('div');
+		paginationElement.setAttribute('data-kt-datatable-pagination', 'true');
+
+		container.appendChild(wrapper);
+		container.appendChild(infoElement);
+		container.appendChild(sizeElement);
+		container.appendChild(paginationElement);
+		document.body.appendChild(container);
+
+		return { container, tableElement, tbody };
+	};
+
+	beforeEach(() => {
+		vi.useFakeTimers();
+	});
+
+	it('should render exactly 17 columns when thead has multi-row headers and no data-kt-datatable-column', async () => {
+		createMultiRowHeaderTable(2);
+		const datatable = new KTDataTable(container, { stateSave: false });
+		await vi.runAllTimersAsync();
+
+		const tbody = tableElement.tBodies[0];
+		expect(tbody).toBeDefined();
+		const rows = tbody.querySelectorAll('tr');
+		// Two data rows
+		expect(rows.length).toBe(2);
+		rows.forEach((row) => {
+			const cells = row.querySelectorAll('td');
+			expect(cells.length).toBe(17);
+		});
+	});
+
+	it('should use logical column count for empty-state row colspan', async () => {
+		createMultiRowHeaderTable(0);
+		const tbody = tableElement.querySelector('tbody');
+		expect(tbody).toBeDefined();
+		const datatable = new KTDataTable(container, { stateSave: false });
+		await vi.runAllTimersAsync();
+
+		const noticeRow = tableElement.tBodies[0].querySelector('tr');
+		expect(noticeRow).toBeDefined();
+		const cell = noticeRow?.querySelector('td');
+		expect(cell).toBeDefined();
+		// Should span 17 (logical columns from originalData) or 1 if no data; after extract we have 0 rows so logicalCount could be 0 -> we use 1
+		// With 0 body rows we never have originalData, so _getLogicalColumnCount() returns first tbody row td count (0) or 0; we set colspan to 1
+		expect(cell!.colSpan).toBeGreaterThanOrEqual(1);
+	});
+});

package/src/components/datatable/__tests__/pagination-reset.test.ts

@@ -184,7 +184,9 @@ describe('KTDataTable - Pagination Reset', () => {
 						// String search
 						return data.filter((item: any) =>
 							Object.values(item).some((value: any) =>
-								String(value).toLowerCase().includes((search as string).toLowerCase()),
+								String(value)
+									.toLowerCase()
+									.includes((search as string).toLowerCase()),
 							),
 						);
 					},
@@ -326,7 +328,11 @@ describe('KTDataTable - Pagination Reset', () => {
 			expect(datatable.getState().page).toBe(1);
 
 			// Replace filter on same column
-			datatable.setFilter({ column: 'status', type: 'text', value: 'inactive' });
+			datatable.setFilter({
+				column: 'status',
+				type: 'text',
+				value: 'inactive',
+			});
 			expect(datatable.getState().page).toBe(1);
 
 			// Should only have one filter for 'status' column
@@ -498,7 +504,7 @@ describe('KTDataTable - Pagination Reset', () => {
 			const namespace = 'test-datatable-restore';
 
 			// First instance
-			let table1 = new KTDataTable(container, {
+			const table1 = new KTDataTable(container, {
 				pageSize: 10,
 				stateSave: true,
 				stateNamespace: namespace,
@@ -637,7 +643,10 @@ describe('KTDataTable - Pagination Reset', () => {
 
 		it('should not break existing event handlers', async () => {
 			const { container } = createMockDataTable(25);
-			datatable = new KTDataTable(container, { pageSize: 10, stateSave: false });
+			datatable = new KTDataTable(container, {
+				pageSize: 10,
+				stateSave: false,
+			});
 
 			const reloadSpy = vi.fn();
 			// Listen for 'reload' event directly (CustomEvent)
@@ -654,4 +663,3 @@ describe('KTDataTable - Pagination Reset', () => {
 		});
 	});
 });
-

package/src/components/datatable/__tests__/race-conditions.test.ts

@@ -3,7 +3,15 @@
  * Tests the fixes for concurrent request handling, request cancellation, and stale response detection
  */
 
-import { describe, it, expect, beforeEach, afterEach, vi, type MockedFunction } from 'vitest';
+import {
+	describe,
+	it,
+	expect,
+	beforeEach,
+	afterEach,
+	vi,
+	type MockedFunction,
+} from 'vitest';
 import { KTDataTable } from '../datatable';
 import { waitFor } from './setup';
 
@@ -45,7 +53,9 @@ describe('KTDataTable Race Condition Fixes', () => {
 			return new Promise<Response>((resolve, reject) => {
 				const timeout = setTimeout(() => {
 					if (options?.signal?.aborted) {
-						reject(new DOMException('The operation was aborted.', 'AbortError'));
+						reject(
+							new DOMException('The operation was aborted.', 'AbortError'),
+						);
 					} else {
 						resolve(
 							new Response(
@@ -56,7 +66,10 @@ describe('KTDataTable Race Condition Fixes', () => {
 									],
 									totalCount: 2,
 								}),
-								{ status: 200, headers: { 'Content-Type': 'application/json' } },
+								{
+									status: 200,
+									headers: { 'Content-Type': 'application/json' },
+								},
 							),
 						);
 					}
@@ -66,7 +79,9 @@ describe('KTDataTable Race Condition Fixes', () => {
 				if (options?.signal) {
 					options.signal.addEventListener('abort', () => {
 						clearTimeout(timeout);
-						reject(new DOMException('The operation was aborted.', 'AbortError'));
+						reject(
+							new DOMException('The operation was aborted.', 'AbortError'),
+						);
 					});
 				}
 			});
@@ -83,9 +98,12 @@ describe('KTDataTable Race Condition Fixes', () => {
 
 	describe('AbortController Integration', () => {
 		it('should create AbortController for remote data requests', async () => {
-			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
-				apiEndpoint: '/api/data',
-			});
+			const datatable = new KTDataTable(
+				container.querySelector('[data-kt-datatable="true"]')!,
+				{
+					apiEndpoint: '/api/data',
+				},
+			);
 
 			await waitFor(150);
 
@@ -95,9 +113,12 @@ describe('KTDataTable Race Condition Fixes', () => {
 		});
 
 		it('should use _isFetching flag to prevent concurrent requests', async () => {
-			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
-				apiEndpoint: '/api/data',
-			});
+			const datatable = new KTDataTable(
+				container.querySelector('[data-kt-datatable="true"]')!,
+				{
+					apiEndpoint: '/api/data',
+				},
+			);
 
 			// Try to trigger search during initial fetch
 			datatable.search('test'); // Should be blocked by _isFetching
@@ -109,9 +130,12 @@ describe('KTDataTable Race Condition Fixes', () => {
 		});
 
 		it('should allow new request after previous completes', async () => {
-			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
-				apiEndpoint: '/api/data',
-			});
+			const datatable = new KTDataTable(
+				container.querySelector('[data-kt-datatable="true"]')!,
+				{
+					apiEndpoint: '/api/data',
+				},
+			);
 
 			// Wait for initial fetch to complete
 			await waitFor(150);
@@ -127,9 +151,12 @@ describe('KTDataTable Race Condition Fixes', () => {
 
 		it('should abort previous request when _performFetchRequest is called again', async () => {
 			// This tests the AbortController logic directly by making multiple sequential requests
-			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
-				apiEndpoint: '/api/data',
-			});
+			const datatable = new KTDataTable(
+				container.querySelector('[data-kt-datatable="true"]')!,
+				{
+					apiEndpoint: '/api/data',
+				},
+			);
 
 			await waitFor(150); // Complete initial request
 
@@ -154,33 +181,38 @@ describe('KTDataTable Race Condition Fixes', () => {
 
 	describe('Request ID Sequencing', () => {
 		it('should assign incremental request IDs for sequential requests', async () => {
-			let requestIds: number[] = [];
+			const requestIds: number[] = [];
 			let callCount = 0;
 
 			// Mock to capture request sequence
-			mockFetch.mockImplementation((url: RequestInfo | URL, options?: RequestInit) => {
-				callCount++;
-				const id = callCount;
-				requestIds.push(id);
-
-				return new Promise((resolve) => {
-					setTimeout(() => {
-						resolve(
-							new Response(
-								JSON.stringify({
-									data: [{ id: id, name: `Item ${id}` }],
-									totalCount: 1,
-								}),
-								{ status: 200 },
-							),
-						);
-					}, 50);
-				});
-			});
+			mockFetch.mockImplementation(
+				(url: RequestInfo | URL, options?: RequestInit) => {
+					callCount++;
+					const id = callCount;
+					requestIds.push(id);
+
+					return new Promise((resolve) => {
+						setTimeout(() => {
+							resolve(
+								new Response(
+									JSON.stringify({
+										data: [{ id: id, name: `Item ${id}` }],
+										totalCount: 1,
+									}),
+									{ status: 200 },
+								),
+							);
+						}, 50);
+					});
+				},
+			);
 
-			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
-				apiEndpoint: '/api/data',
-			});
+			const datatable = new KTDataTable(
+				container.querySelector('[data-kt-datatable="true"]')!,
+				{
+					apiEndpoint: '/api/data',
+				},
+			);
 
 			await waitFor(100); // Complete initial request
 
@@ -197,9 +229,12 @@ describe('KTDataTable Race Condition Fixes', () => {
 		it('should have request ID validation logic in place', async () => {
 			// This tests that request IDs are tracked internally
 			// The actual stale response scenario is prevented by _isFetching flag
-			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
-				apiEndpoint: '/api/data',
-			});
+			const datatable = new KTDataTable(
+				container.querySelector('[data-kt-datatable="true"]')!,
+				{
+					apiEndpoint: '/api/data',
+				},
+			);
 
 			await waitFor(150); // Complete initial
 
@@ -220,9 +255,12 @@ describe('KTDataTable Race Condition Fixes', () => {
 
 	describe('_isFetching Flag Management', () => {
 		it('should prevent concurrent fetch executions', async () => {
-			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
-				apiEndpoint: '/api/data',
-			});
+			const datatable = new KTDataTable(
+				container.querySelector('[data-kt-datatable="true"]')!,
+				{
+					apiEndpoint: '/api/data',
+				},
+			);
 
 			// Try to trigger reload immediately (should be blocked by initial fetch)
 			datatable.reload(); // Blocked by _isFetching
@@ -236,9 +274,12 @@ describe('KTDataTable Race Condition Fixes', () => {
 		});
 
 		it('should reset _isFetching flag after fetch completes', async () => {
-			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
-				apiEndpoint: '/api/data',
-			});
+			const datatable = new KTDataTable(
+				container.querySelector('[data-kt-datatable="true"]')!,
+				{
+					apiEndpoint: '/api/data',
+				},
+			);
 
 			await waitFor(150); // Wait for initial fetch
 
@@ -251,28 +292,31 @@ describe('KTDataTable Race Condition Fixes', () => {
 
 		it('should reset _isFetching flag even after fetch error', async () => {
 			let callCount = 0;
-			mockFetch.mockImplementation((url: RequestInfo | URL, options?: RequestInit) => {
-				callCount++;
-				if (callCount === 1) {
-					// Return invalid JSON to trigger parse error
+			mockFetch.mockImplementation(
+				(url: RequestInfo | URL, options?: RequestInit) => {
+					callCount++;
+					if (callCount === 1) {
+						// Return invalid JSON to trigger parse error
+						return Promise.resolve(new Response('Not JSON', { status: 200 }));
+					}
 					return Promise.resolve(
-						new Response('Not JSON', { status: 200 }),
+						new Response(
+							JSON.stringify({
+								data: [{ id: 1, name: 'Success' }],
+								totalCount: 1,
+							}),
+							{ status: 200 },
+						),
 					);
-				}
-				return Promise.resolve(
-					new Response(
-						JSON.stringify({
-							data: [{ id: 1, name: 'Success' }],
-							totalCount: 1,
-						}),
-						{ status: 200 },
-					),
-				);
-			});
+				},
+			);
 
-			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
-				apiEndpoint: '/api/data',
-			});
+			const datatable = new KTDataTable(
+				container.querySelector('[data-kt-datatable="true"]')!,
+				{
+					apiEndpoint: '/api/data',
+				},
+			);
 
 			await waitFor(150); // Initial request triggers parse error
 
@@ -286,7 +330,9 @@ describe('KTDataTable Race Condition Fixes', () => {
 
 	describe('Loading Spinner Management', () => {
 		it('should show spinner during fetch', async () => {
-			const element = container.querySelector('[data-kt-datatable="true"]') as HTMLElement;
+			const element = container.querySelector(
+				'[data-kt-datatable="true"]',
+			) as HTMLElement;
 			const datatable = new KTDataTable(element, {
 				apiEndpoint: '/api/data',
 			});
@@ -301,7 +347,9 @@ describe('KTDataTable Race Condition Fixes', () => {
 		});
 
 		it('should keep spinner visible during overlapping requests', async () => {
-			const element = container.querySelector('[data-kt-datatable="true"]') as HTMLElement;
+			const element = container.querySelector(
+				'[data-kt-datatable="true"]',
+			) as HTMLElement;
 			const datatable = new KTDataTable(element, {
 				apiEndpoint: '/api/data',
 			});
@@ -323,7 +371,9 @@ describe('KTDataTable Race Condition Fixes', () => {
 		});
 
 		it('should not flicker spinner during rapid interactions', async () => {
-			const element = container.querySelector('[data-kt-datatable="true"]') as HTMLElement;
+			const element = container.querySelector(
+				'[data-kt-datatable="true"]',
+			) as HTMLElement;
 			const datatable = new KTDataTable(element, {
 				apiEndpoint: '/api/data',
 			});
@@ -362,7 +412,9 @@ describe('KTDataTable Race Condition Fixes', () => {
 		it('should fire fetch event for successful requests', async () => {
 			const fetchEvents: any[] = [];
 
-			const element = container.querySelector('[data-kt-datatable="true"]') as HTMLElement;
+			const element = container.querySelector(
+				'[data-kt-datatable="true"]',
+			) as HTMLElement;
 			element.addEventListener('fetch', (e) => {
 				fetchEvents.push(e);
 			});
@@ -383,7 +435,9 @@ describe('KTDataTable Race Condition Fixes', () => {
 		it('should fire fetched event after successful data load', async () => {
 			const fetchedEvents: any[] = [];
 
-			const element = container.querySelector('[data-kt-datatable="true"]') as HTMLElement;
+			const element = container.querySelector(
+				'[data-kt-datatable="true"]',
+			) as HTMLElement;
 			element.addEventListener('fetched', (e) => {
 				fetchedEvents.push(e);
 			});
@@ -401,7 +455,9 @@ describe('KTDataTable Race Condition Fixes', () => {
 		it('should not fire error events for AbortError', async () => {
 			const errorEvents: any[] = [];
 
-			const element = container.querySelector('[data-kt-datatable="true"]') as HTMLElement;
+			const element = container.querySelector(
+				'[data-kt-datatable="true"]',
+			) as HTMLElement;
 			element.addEventListener('error.kt.datatable', (e) => {
 				errorEvents.push(e);
 			});
@@ -422,7 +478,9 @@ describe('KTDataTable Race Condition Fixes', () => {
 
 	describe('Backward Compatibility', () => {
 		it('should work with local data mode (no AbortController needed)', async () => {
-			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!);
+			const datatable = new KTDataTable(
+				container.querySelector('[data-kt-datatable="true"]')!,
+			);
 
 			// Should not call fetch for local data
 			expect(mockFetch).not.toHaveBeenCalled();
@@ -434,9 +492,12 @@ describe('KTDataTable Race Condition Fixes', () => {
 		});
 
 		it('should maintain existing API compatibility', async () => {
-			const datatable = new KTDataTable(container.querySelector('[data-kt-datatable="true"]')!, {
-				apiEndpoint: '/api/data',
-			});
+			const datatable = new KTDataTable(
+				container.querySelector('[data-kt-datatable="true"]')!,
+				{
+					apiEndpoint: '/api/data',
+				},
+			);
 
 			await waitFor(150);
 
@@ -452,4 +513,3 @@ describe('KTDataTable Race Condition Fixes', () => {
 		});
 	});
 });
-

package/src/components/datatable/__tests__/setup.ts

@@ -45,7 +45,9 @@ Object.defineProperty(window, 'matchMedia', {
 	value: (query: string) => ({
 		matches: false,
 		media: query,
-		onchange: null as ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null,
+		onchange: null as
+			| ((this: MediaQueryList, ev: MediaQueryListEvent) => any)
+			| null,
 		addListener: () => {}, // deprecated
 		removeListener: () => {}, // deprecated
 		addEventListener: () => {},
@@ -55,13 +57,16 @@ Object.defineProperty(window, 'matchMedia', {
 });
 
 // Export utilities that tests can use
-export const waitFor = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+export const waitFor = (ms: number) =>
+	new Promise((resolve) => setTimeout(resolve, ms));
 
-export const createMockElement = (tag: string, attributes: Record<string, string> = {}) => {
+export const createMockElement = (
+	tag: string,
+	attributes: Record<string, string> = {},
+) => {
 	const el = document.createElement(tag);
 	Object.entries(attributes).forEach(([key, value]) => {
 		el.setAttribute(key, value);
 	});
 	return el;
 };
-