@keenthemes/ktui 1.1.5 → 1.1.6

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;
 };
-

package/src/components/datatable/datatable-sort.ts

@@ -89,15 +89,15 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 		return 0;
 	}
 
-	function getColumnDef(
-		sortField: keyof T | number,
-	): {
-		sortType?: 'string' | 'numeric';
-		sortValue?: (
-			cellValue: unknown,
-			rowData: KTDataTableDataInterface,
-		) => number | string;
-	} | undefined {
+	function getColumnDef(sortField: keyof T | number):
+		| {
+				sortType?: 'string' | 'numeric';
+				sortValue?: (
+					cellValue: unknown,
+					rowData: KTDataTableDataInterface,
+				) => number | string;
+		  }
+		| undefined {
 		const columns = config.columns;
 		if (!columns) return undefined;
 		const key =
@@ -114,8 +114,7 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 	): T[] {
 		const columnDef = getColumnDef(sortField);
 		const sortValueFn = columnDef?.sortValue;
-		const useNumeric =
-			!sortValueFn && columnDef?.sortType === 'numeric';
+		const useNumeric = !sortValueFn && columnDef?.sortType === 'numeric';
 
 		return data.sort((a, b) => {
 			const aRaw = a[sortField as keyof T] as unknown;
@@ -186,12 +185,9 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 						`th[data-kt-datatable-column="${String(sortField)}"], th[data-kt-datatable-column-sort="${String(sortField)}"]`,
 					) as HTMLElement);
 		if (th) {
-			const sortElement = th.querySelector(
-				`.${baseClass}`,
-			) as HTMLElement;
+			const sortElement = th.querySelector(`.${baseClass}`) as HTMLElement;
 			if (sortElement) {
-				sortElement.className =
-					`${baseClass} ${sortClass}`.trim();
+				sortElement.className = `${baseClass} ${sortClass}`.trim();
 			}
 			if (sortOrder) {
 				th.setAttribute('aria-sort', sortOrder);

package/src/components/datatable/datatable.css

@@ -92,19 +92,19 @@
 }
 
 @custom-variant kt-datatable-sort-asc {
-	&.[data-kt-datatable-column-sort='asc']:where([data-kt-datatable] *) {
+	&.[aria-sort='asc']:where([data-kt-datatable] *) {
 		@slot;
 	}
-	[data-kt-datatable] [data-kt-datatable-column-sort='asc'] & {
+	[data-kt-datatable] [aria-sort='asc'] & {
 		@slot;
 	}
 }
 
 @custom-variant kt-datatable-sort-desc {
-	&.[data-kt-datatable-column-sort='desc']:where([data-kt-datatable] *) {
+	&.[aria-sort='desc']:where([data-kt-datatable] *) {
 		@slot;
 	}
-	[data-kt-datatable] [data-kt-datatable-column-sort='desc'] & {
+	[data-kt-datatable] [aria-sort='desc'] & {
 		@slot;
 	}
 }

package/src/components/datatable/datatable.ts

@@ -681,8 +681,8 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			? this._theadElement.querySelectorAll('th')
 			: ([] as unknown as NodeListOf<HTMLTableCellElement>);
 
-		const ths: HTMLTableCellElement[] = Array.from(allThs).filter(th =>
-			th.hasAttribute('data-kt-datatable-column')
+		const ths: HTMLTableCellElement[] = Array.from(allThs).filter((th) =>
+			th.hasAttribute('data-kt-datatable-column'),
 		);
 
 		rows.forEach((row: HTMLTableRowElement) => {
@@ -716,21 +716,46 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	private _localTableHeaderInvalidate(): boolean {
 		const { originalData } = this.getState();
 
-		// Count only th elements with data-kt-datatable-column attribute
-		const allThs: NodeListOf<HTMLTableCellElement> = this._theadElement
-			? this._theadElement.querySelectorAll('th')
-			: ([] as unknown as NodeListOf<HTMLTableCellElement>);
-		const currentTableHeaders = Array.from(allThs).filter(th =>
-			th.hasAttribute('data-kt-datatable-column')
-		).length;
-
 		const totalColumns = originalData.length
 			? Object.keys(originalData[0]).length
 			: 0;
 
+		// Count th elements with data-kt-datatable-column; when none (e.g. multi-row headers), use logical column count so we don't falsely invalidate
+		const allThs: NodeListOf<HTMLTableCellElement> = this._theadElement
+			? this._theadElement.querySelectorAll('th')
+			: ([] as unknown as NodeListOf<HTMLTableCellElement>);
+		const thsWithColumn = Array.from(allThs).filter((th) =>
+			th.hasAttribute('data-kt-datatable-column'),
+		);
+		const currentTableHeaders =
+			thsWithColumn.length > 0
+				? thsWithColumn.length
+				: this._getLogicalColumnCount();
+
 		return currentTableHeaders !== totalColumns;
 	}
 
+	/**
+	 * Returns the logical data column count (number of data columns), used for multi-row headers
+	 * where querySelectorAll('th') would overcount. Prefers state.originalData, then first tbody row td count.
+	 * @returns {number} Number of data columns, or 0 if unknown
+	 */
+	private _getLogicalColumnCount(): number {
+		const { originalData } = this.getState();
+		if (originalData && originalData.length > 0) {
+			return Object.keys(originalData[0]).length;
+		}
+		if (this._tbodyElement) {
+			const firstRow = this._tbodyElement.querySelector<HTMLTableRowElement>(
+				'tr',
+			);
+			if (firstRow) {
+				return firstRow.querySelectorAll<HTMLTableCellElement>('td').length;
+			}
+		}
+		return 0;
+	}
+
 	/**
 	 * Fetch data from the server
 	 */
@@ -770,13 +795,13 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 				response,
 				error: String(error),
 				status: response.status,
-				statusText: response.statusText
+				statusText: response.statusText,
 			});
 			this._dispatchEvent('parseError', {
 				response,
 				error: String(error),
 				status: response.status,
-				statusText: response.statusText
+				statusText: response.statusText,
 			});
 			return;
 		}
@@ -862,7 +887,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	private async _performFetchRequest(
 		queryParams: URLSearchParams,
 	): Promise<Response> {
-		let requestMethod: RequestInit['method'] = this._config.requestMethod;
+		const requestMethod: RequestInit['method'] = this._config.requestMethod;
 		let requestBody: RequestInit['body'] | undefined = undefined;
 
 		// Cancel previous request to prevent race conditions
@@ -1023,11 +1048,14 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			? this._theadElement.querySelectorAll('th')
 			: ([] as unknown as NodeListOf<HTMLTableCellElement>);
 
-		const ths: HTMLTableCellElement[] = Array.from(allThs).filter(th =>
-			th.hasAttribute('data-kt-datatable-column')
+		const ths: HTMLTableCellElement[] = Array.from(allThs).filter((th) =>
+			th.hasAttribute('data-kt-datatable-column'),
 		);
-		// When no th has data-kt-datatable-column, use all ths so we still render by column index (data extracted with numeric keys)
-		const columnsToRender: HTMLTableCellElement[] = ths.length > 0 ? ths : Array.from(allThs);
+		// When no th has data-kt-datatable-column (e.g. multi-row headers), use logical column count from tbody so we don't overcount thead cells
+		const columnsToRender: HTMLTableCellElement[] =
+			ths.length > 0 ? ths : [];
+		const logicalColumnCount =
+			ths.length > 0 ? ths.length : this._getLogicalColumnCount();
 
 		this._data.forEach((item: T, rowIndex: number) => {
 			const row = document.createElement('tr');
@@ -1042,9 +1070,9 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 					? this.getState().originalDataAttributes[rowIndex]
 					: null;
 
-				// Use columnsToRender so tables without data-kt-datatable-column still get cells (by index)
-				columnsToRender.forEach((th, colIndex) => {
-					const colName = th.getAttribute('data-kt-datatable-column');
+				for (let colIndex = 0; colIndex < logicalColumnCount; colIndex++) {
+					const th = columnsToRender[colIndex];
+					const colName = th?.getAttribute('data-kt-datatable-column');
 					const td = document.createElement('td');
 					let value: any;
 					if (colName && Object.prototype.hasOwnProperty.call(item, colName)) {
@@ -1072,7 +1100,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 					}
 
 					row.appendChild(td);
-				});
+				}
 			} else {
 				Object.keys(this._config.columns).forEach(
 					(key: keyof T, colIndex: number) => {
@@ -1126,9 +1154,9 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	private _noticeOnTable(message: string = ''): void {
 		const row = this._tableElement.tBodies[0].insertRow();
 		const cell = row.insertCell();
-		cell.colSpan = this._theadElement
-			? this._theadElement.querySelectorAll('th').length
-			: 0;
+		const logicalCount = this._getLogicalColumnCount();
+		// Use logical column count so multi-row headers don't overcount; fallback to 1 when 0 so message still displays
+		cell.colSpan = logicalCount > 0 ? logicalCount : 1;
 		cell.innerHTML = message;
 	}
 
@@ -1481,7 +1509,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 			const state = JSON.parse(stateString) as KTDataTableStateInterface;
 			if (state) this._config._state = state;
 			return state;
-		} catch {} // eslint-disable-line no-empty
+		} catch {}
 
 		return null;
 	}
@@ -1829,7 +1857,9 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	 */
 	public static reinit(): void {
 		if (typeof document === 'undefined') return;
-		const elements = document.querySelectorAll<HTMLElement>('[data-kt-datatable="true"]');
+		const elements = document.querySelectorAll<HTMLElement>(
+			'[data-kt-datatable="true"]',
+		);
 		elements.forEach((element) => {
 			try {
 				const instance = KTDataTable.getInstance(element);

package/src/components/datatable/types.ts

@@ -112,7 +112,9 @@ export interface KTDataTableConfigInterface {
 			 * Use for custom formats (e.g. dates, combined fields, custom parsing).
 			 */
 			sortValue?: (
-				cellValue: KTDataTableDataInterface[keyof KTDataTableDataInterface] | string,
+				cellValue:
+					| KTDataTableDataInterface[keyof KTDataTableDataInterface]
+					| string,
 				rowData: KTDataTableDataInterface,
 			) => number | string;
 		};