@keenthemes/ktui 1.1.4 → 1.1.6

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

@@ -44,7 +44,7 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 	dispatchEvent: (eventName: string, eventData?: any) => void,
 	updateData: () => void,
 ): KTDataTableSortAPI<T> {
-	// Helper to compare values for sorting
+	// Helper to compare values for sorting (string)
 	function compareValues(
 		a: unknown,
 		b: unknown,
@@ -63,15 +63,79 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 				: 0;
 	}
 
+	// Parse value for numeric sort: strip currency/commas, then parseFloat
+	function parseNumeric(value: unknown): number {
+		if (value === null || value === undefined || value === '') {
+			return Number.NaN;
+		}
+		const s = String(value).replace(/[^0-9.-]/g, '');
+		const n = parseFloat(s);
+		return Number.isNaN(n) ? Number.NaN : n;
+	}
+
+	// Compare two numbers; NaN sorts to the end for both asc and desc
+	function compareNumeric(
+		aNum: number,
+		bNum: number,
+		sortOrder: KTDataTableSortOrderInterface,
+	): number {
+		const aNaN = Number.isNaN(aNum);
+		const bNaN = Number.isNaN(bNum);
+		if (aNaN && bNaN) return 0;
+		if (aNaN) return 1;
+		if (bNaN) return -1;
+		if (aNum < bNum) return sortOrder === 'asc' ? -1 : 1;
+		if (aNum > bNum) return sortOrder === 'asc' ? 1 : -1;
+		return 0;
+	}
+
+	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 =
+			typeof sortField === 'number'
+				? (Object.keys(columns)[sortField] as keyof T | undefined)
+				: sortField;
+		return key !== undefined ? columns[key as string] : undefined;
+	}
+
 	function sortData(
 		data: T[],
 		sortField: keyof T | number,
 		sortOrder: KTDataTableSortOrderInterface,
 	): T[] {
+		const columnDef = getColumnDef(sortField);
+		const sortValueFn = columnDef?.sortValue;
+		const useNumeric = !sortValueFn && columnDef?.sortType === 'numeric';
+
 		return data.sort((a, b) => {
-			const aValue = a[sortField as keyof T] as unknown;
-			const bValue = b[sortField as keyof T] as unknown;
-			return compareValues(aValue, bValue, sortOrder);
+			const aRaw = a[sortField as keyof T] as unknown;
+			const bRaw = b[sortField as keyof T] as unknown;
+
+			if (typeof sortValueFn === 'function') {
+				const aVal = sortValueFn(aRaw, a as KTDataTableDataInterface);
+				const bVal = sortValueFn(bRaw, b as KTDataTableDataInterface);
+				const aNum = typeof aVal === 'number' ? aVal : parseNumeric(aVal);
+				const bNum = typeof bVal === 'number' ? bVal : parseNumeric(bVal);
+				if (typeof aVal === 'number' && typeof bVal === 'number') {
+					return compareNumeric(aNum, bNum, sortOrder);
+				}
+				return compareValues(aVal, bVal, sortOrder);
+			}
+			if (useNumeric) {
+				const aNum = parseNumeric(aRaw);
+				const bNum = parseNumeric(bRaw);
+				return compareNumeric(aNum, bNum, sortOrder);
+			}
+			return compareValues(aRaw, bRaw, sortOrder);
 		});
 	}
 
@@ -97,24 +161,38 @@ export function createSortHandler<T = KTDataTableDataInterface>(
 		sortField: keyof T,
 		sortOrder: KTDataTableSortOrderInterface,
 	): void {
+		const baseClass = config.sort?.classes?.base || '';
 		const sortClass = sortOrder
 			? sortOrder === 'asc'
 				? config.sort?.classes?.asc || ''
 				: config.sort?.classes?.desc || ''
 			: '';
+		// Clear all headers: remove sort state so only the active column shows highlighted arrow
+		const allTh = theadElement.querySelectorAll('th');
+		allTh.forEach((header) => {
+			const el = header as HTMLElement;
+			el.setAttribute('aria-sort', 'none');
+			const sortElement = header.querySelector(`.${baseClass}`) as HTMLElement;
+			if (sortElement) {
+				sortElement.className = baseClass;
+			}
+		});
+		// Apply sort state to the active column so table.css [aria-sort='asc'] / [aria-sort='desc'] can highlight the arrow
 		const th =
 			typeof sortField === 'number'
-				? theadElement.querySelectorAll('th')[sortField]
+				? allTh[sortField]
 				: (theadElement.querySelector(
 						`th[data-kt-datatable-column="${String(sortField)}"], th[data-kt-datatable-column-sort="${String(sortField)}"]`,
 					) as HTMLElement);
 		if (th) {
-			const sortElement = th.querySelector(
-				`.${config.sort?.classes?.base}`,
-			) as HTMLElement;
+			const sortElement = th.querySelector(`.${baseClass}`) as HTMLElement;
 			if (sortElement) {
-				sortElement.className =
-					`${config.sort?.classes?.base} ${sortClass}`.trim();
+				sortElement.className = `${baseClass} ${sortClass}`.trim();
+			}
+			if (sortOrder) {
+				th.setAttribute('aria-sort', sortOrder);
+			} else {
+				th.setAttribute('aria-sort', 'none');
 			}
 		}
 	}

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

@@ -73,7 +73,14 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	constructor(element: HTMLElement, config?: KTDataTableConfigInterface) {
 		super();
 
-		if (KTData.has(element as HTMLElement, this._name)) return;
+		if (KTData.has(element as HTMLElement, this._name)) {
+			// Already initialized (e.g. by createInstances). Merge user config so columns/sortType etc. apply.
+			const existing = KTDataTable.getInstance(element as HTMLElement);
+			if (existing && config) {
+				existing._mergeConfig(config);
+			}
+			return;
+		}
 
 		this._defaultConfig = this._initDefaultConfig(config);
 
@@ -668,14 +675,14 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		this._storeOriginalClasses();
 
 		const rows = this._tbodyElement.querySelectorAll<HTMLTableRowElement>('tr');
-		
+
 		// Filter th elements to only include those with data-kt-datatable-column attribute
 		const allThs: NodeListOf<HTMLTableCellElement> = this._theadElement
 			? 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) => {
@@ -708,22 +715,47 @@ 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
 	 */
@@ -763,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;
 		}
@@ -855,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
@@ -1015,10 +1047,15 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 		const allThs: NodeListOf<HTMLTableCellElement> = this._theadElement
 			? 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 (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');
@@ -1033,9 +1070,9 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 					? this.getState().originalDataAttributes[rowIndex]
 					: null;
 
-				// Use the order of <th> elements with data-kt-datatable-column to render <td>s in the correct order
-				ths.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)) {
@@ -1063,7 +1100,7 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 					}
 
 					row.appendChild(td);
-				});
+				}
 			} else {
 				Object.keys(this._config.columns).forEach(
 					(key: keyof T, colIndex: number) => {
@@ -1117,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;
 	}
 
@@ -1472,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;
 	}
@@ -1811,8 +1848,32 @@ export class KTDataTable<T extends KTDataTableDataInterface>
 	 */
 	public static init(): void {
 		if (typeof document === 'undefined') return;
-		// Create instances of KTDataTable for all elements with a
-		// data-kt-datatable="true" attribute
+		KTDataTable.createInstances();
+	}
+
+	/**
+	 * Force reinitialization of datatables by clearing existing instances.
+	 * Useful for Livewire wire:navigate where the DOM is replaced and new tables need to be initialized.
+	 */
+	public static reinit(): void {
+		if (typeof document === 'undefined') return;
+		const elements = document.querySelectorAll<HTMLElement>(
+			'[data-kt-datatable="true"]',
+		);
+		elements.forEach((element) => {
+			try {
+				const instance = KTDataTable.getInstance(element);
+				if (instance && typeof instance.dispose === 'function') {
+					instance.dispose();
+				}
+				KTData.remove(element, 'datatable');
+				element.removeAttribute('data-kt-datatable-initialized');
+				element.classList.remove('datatable-initialized');
+			} catch {
+				// ignore per-element errors
+			}
+		});
+		KTDataTable._instances.clear();
 		KTDataTable.createInstances();
 	}
 

package/src/components/datatable/types.ts

@@ -101,6 +101,22 @@ export interface KTDataTableConfigInterface {
 				rowData: KTDataTableDataInterface,
 				row: HTMLTableRowElement,
 			) => void;
+			/**
+			 * Sort comparison type for this column. When 'numeric', values are parsed
+			 * (e.g. strip currency/commas) and compared as numbers.
+			 */
+			sortType?: 'string' | 'numeric';
+			/**
+			 * Custom value used for sorting. When set, this is used instead of the raw
+			 * cell value (and instead of sortType). Return a number or string to sort by.
+			 * Use for custom formats (e.g. dates, combined fields, custom parsing).
+			 */
+			sortValue?: (
+				cellValue:
+					| KTDataTableDataInterface[keyof KTDataTableDataInterface]
+					| string,
+				rowData: KTDataTableDataInterface,
+			) => number | string;
 		};
 	};