@keenthemes/ktui 1.2.4 → 1.2.6

package/src/components/datatable/__tests__/locked-layout.test.ts

@@ -0,0 +1,257 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { KTDataTable } from '../datatable';
+
+type DataRow = {
+	id: string;
+	name: string;
+	status: string;
+};
+
+const rows: DataRow[] = [
+	{ id: '1', name: 'Alpha', status: 'Active' },
+	{ id: '2', name: 'Beta', status: 'Pending' },
+	{ id: '3', name: 'Gamma', status: 'Disabled' },
+];
+
+const createDatatableFixture = () => {
+	const wrapper = document.createElement('div');
+	wrapper.className = 'kt-table-wrapper';
+
+	const container = document.createElement('div');
+	container.id = 'kt_datatable_locked_layout';
+	container.setAttribute('data-kt-datatable', 'true');
+
+	const table = document.createElement('table');
+	table.setAttribute('data-kt-datatable-table', 'true');
+
+	const thead = document.createElement('thead');
+	thead.innerHTML = `
+		<tr>
+			<th data-kt-datatable-column="id">ID</th>
+			<th data-kt-datatable-column="name">Name</th>
+			<th data-kt-datatable-column="status">Status</th>
+		</tr>
+	`;
+	table.appendChild(thead);
+
+	const tbody = document.createElement('tbody');
+	rows.forEach((row) => {
+		const tr = document.createElement('tr');
+		tr.innerHTML = `<td>${row.id}</td><td>${row.name}</td><td>${row.status}</td>`;
+		tbody.appendChild(tr);
+	});
+	table.appendChild(tbody);
+
+	wrapper.appendChild(table);
+	container.appendChild(wrapper);
+
+	const info = document.createElement('span');
+	info.setAttribute('data-kt-datatable-info', 'true');
+	const size = document.createElement('select');
+	size.setAttribute('data-kt-datatable-size', 'true');
+	const pagination = document.createElement('div');
+	pagination.setAttribute('data-kt-datatable-pagination', 'true');
+
+	container.appendChild(info);
+	container.appendChild(size);
+	container.appendChild(pagination);
+	document.body.appendChild(container);
+
+	const sizedCells = table.querySelectorAll<HTMLTableCellElement>('th, td');
+	sizedCells.forEach((cell) => {
+		Object.defineProperty(cell, 'getBoundingClientRect', {
+			value: () =>
+				({
+					width: 120,
+					height: 40,
+					top: 0,
+					left: 0,
+					right: 0,
+					bottom: 0,
+					x: 0,
+					y: 0,
+					toJSON: () => ({}),
+				}) as DOMRect,
+		});
+	});
+
+	return { container, table };
+};
+
+describe('KTDataTable locked layout plugin', () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+	});
+
+	it('applies locked header, rows and columns in local mode and keeps them after sorting', async () => {
+		const { container, table } = createDatatableFixture();
+
+		const datatable = new KTDataTable<DataRow>(container, {
+			stateSave: false,
+			columns: {
+				id: { title: 'ID' },
+				name: { title: 'Name' },
+				status: { title: 'Status' },
+			},
+			lockedLayout: {
+				stickyHeader: true,
+				stickyRows: { top: 1, bottom: 1 },
+				stickyColumns: { left: ['id'], right: ['status'] },
+			},
+		});
+
+		await vi.runAllTimersAsync();
+
+		expect(
+			table.querySelectorAll('.kt-datatable-locked-header').length,
+		).toBeGreaterThan(0);
+		expect(
+			table.querySelectorAll('.kt-datatable-locked-top-row').length,
+		).toBeGreaterThan(0);
+		expect(
+			table.querySelectorAll('.kt-datatable-locked-bottom-row').length,
+		).toBeGreaterThan(0);
+		expect(
+			table.querySelectorAll('.kt-datatable-locked-left').length,
+		).toBeGreaterThan(0);
+		expect(
+			table.querySelectorAll('.kt-datatable-locked-right').length,
+		).toBeGreaterThan(0);
+
+		datatable.sort('name');
+		await vi.runAllTimersAsync();
+
+		expect(
+			table.querySelectorAll('.kt-datatable-locked-cell').length,
+		).toBeGreaterThan(0);
+	});
+
+	it('reapplies locked layout after remote fetch redraw', async () => {
+		const { container, table } = createDatatableFixture();
+		const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+			new Response(JSON.stringify({ data: rows, totalCount: rows.length }), {
+				status: 200,
+				headers: { 'Content-Type': 'application/json' },
+			}),
+		);
+
+		new KTDataTable<DataRow>(container, {
+			stateSave: false,
+			apiEndpoint: 'https://example.test/datatable',
+			requestMethod: 'GET',
+			mapResponse: (data) => data,
+			lockedLayout: {
+				stickyHeader: true,
+				stickyColumns: { left: ['id'] },
+			},
+		});
+
+		await vi.runAllTimersAsync();
+
+		expect(fetchMock).toHaveBeenCalled();
+		expect(
+			table.querySelectorAll('.kt-datatable-locked-header').length,
+		).toBeGreaterThan(0);
+		expect(
+			table.querySelectorAll('.kt-datatable-locked-left').length,
+		).toBeGreaterThan(0);
+	});
+
+	it('keeps pagination state when using locked columns in local mode', async () => {
+		const { container } = createDatatableFixture();
+
+		const datatable = new KTDataTable<DataRow>(container, {
+			stateSave: false,
+			pageSize: 2,
+			columns: {
+				id: { title: 'ID' },
+				name: { title: 'Name' },
+				status: { title: 'Status' },
+			},
+			lockedLayout: {
+				stickyHeader: true,
+				stickyColumns: { left: ['id'] },
+			},
+		});
+
+		await vi.runAllTimersAsync();
+		expect(datatable.getState().totalPages).toBe(2);
+
+		datatable.goPage(2);
+		await vi.runAllTimersAsync();
+		expect(datatable.getState().page).toBe(2);
+		expect(datatable.getState().totalPages).toBe(2);
+		expect(datatable.getState().totalItems).toBe(rows.length);
+	});
+
+	it('uses collapsed table borders for row-only locked layout', async () => {
+		const { container, table } = createDatatableFixture();
+
+		new KTDataTable<DataRow>(container, {
+			stateSave: false,
+			lockedLayout: {
+				stickyHeader: true,
+				stickyRows: { top: 1, bottom: 1 },
+			},
+		});
+
+		await vi.runAllTimersAsync();
+
+		expect(table.classList.contains('kt-datatable-locked-layout')).toBe(true);
+		expect(
+			table.classList.contains('kt-datatable-locked-layout-separate'),
+		).toBe(false);
+		expect(table.style.borderCollapse).not.toBe('separate');
+		expect(
+			table.tHead?.classList.contains('kt-datatable-locked-header-section'),
+		).toBe(true);
+		const stickyHeaderCell = table.querySelector(
+			'th.kt-datatable-locked-header',
+		) as HTMLTableCellElement | null;
+		expect(stickyHeaderCell?.style.position).not.toBe('sticky');
+	});
+
+	it('uses separate table borders when sticky columns are enabled', async () => {
+		const { container, table } = createDatatableFixture();
+
+		new KTDataTable<DataRow>(container, {
+			stateSave: false,
+			lockedLayout: {
+				stickyHeader: true,
+				stickyColumns: { left: ['id'] },
+			},
+		});
+
+		await vi.runAllTimersAsync();
+
+		expect(
+			table.classList.contains('kt-datatable-locked-layout-separate'),
+		).toBe(true);
+		expect(table.style.borderCollapse).toBe('separate');
+	});
+
+	it('does not set inline background color for locked header columns', async () => {
+		const { container, table } = createDatatableFixture();
+
+		new KTDataTable<DataRow>(container, {
+			stateSave: false,
+			columns: {
+				id: { title: 'ID' },
+				name: { title: 'Name' },
+				status: { title: 'Status' },
+			},
+			lockedLayout: {
+				stickyHeader: true,
+				stickyColumns: { left: ['id'] },
+			},
+		});
+
+		await vi.runAllTimersAsync();
+
+		const lockedHeaderCell = table.querySelector(
+			'th.kt-datatable-locked-left',
+		) as HTMLTableCellElement | null;
+		expect(lockedHeaderCell).not.toBeNull();
+		expect(lockedHeaderCell?.style.backgroundColor).toBe('');
+	});
+});

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

@@ -552,6 +552,24 @@ describe('KTDataTable - Pagination Reset', () => {
 	});
 
 	describe('Edge Cases', () => {
+		it('keeps total pages stable when navigating to page 2 in local mode', () => {
+			const { container } = createMockDataTable(6);
+			datatable = new KTDataTable(container, {
+				pageSize: 5,
+				stateSave: false,
+			});
+
+			expect(datatable.getState().totalPages).toBe(2);
+			datatable.goPage(2);
+			expect(datatable.getState().page).toBe(2);
+			expect(datatable.getState().totalPages).toBe(2);
+
+			// Trigger another redraw cycle to ensure local mode does not shrink original data.
+			datatable.reload();
+			expect(datatable.getState().page).toBe(2);
+			expect(datatable.getState().totalPages).toBe(2);
+		});
+
 		it('should handle search reset on page 1 (no-op)', () => {
 			const { container } = createMockDataTable(25);
 			datatable = new KTDataTable(container, {

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

@@ -8,8 +8,10 @@
 import {
 	KTDataTableConfigInterface,
 	KTDataTableCheckChangePayloadInterface,
+	KTDataTableStateInterface,
 } from './types';
 import KTEventHandler from '../../helpers/event-handler';
+import { KTCallableType } from '../../types';
 
 export interface KTDataTableCheckboxAPI {
 	init(): void;
@@ -29,25 +31,31 @@ export function createCheckboxHandler(
 ): KTDataTableCheckboxAPI {
 	let headerChecked = false;
 	let headerCheckElement: HTMLInputElement | null = null;
-	let targetElements: NodeListOf<HTMLInputElement> = null;
+	let targetElements: NodeListOf<HTMLInputElement> | null = null;
 
 	// Default: preserve selection across all pages
 	const preserveSelection = config.checkbox?.preserveSelection !== false;
 
+	function ensureState(): KTDataTableStateInterface {
+		let state = config._state;
+		if (!state) {
+			state = {} as KTDataTableStateInterface;
+			config._state = state;
+		}
+		return state;
+	}
+
 	// Helper: get selectedRows from state, always as string[]
 	function getSelectedRows(): string[] {
-		if (!config._state)
-			config._state = {} as unknown as KTDataTableConfigInterface['_state'];
-		if (!Array.isArray(config._state.selectedRows))
-			config._state.selectedRows = [];
-		return config._state.selectedRows.map(String);
+		const state = ensureState();
+		if (!Array.isArray(state.selectedRows)) state.selectedRows = [];
+		return state.selectedRows.map(String);
 	}
 
 	// Helper: set selectedRows in state
 	function setSelectedRows(rows: string[]) {
-		if (!config._state)
-			config._state = {} as unknown as KTDataTableConfigInterface['_state'];
-		config._state.selectedRows = Array.from(new Set(rows.map(String)));
+		const state = ensureState();
+		state.selectedRows = Array.from(new Set(rows.map(String)));
 	}
 
 	// Helper: get all visible row IDs (values)
@@ -64,14 +72,14 @@ export function createCheckboxHandler(
 	};
 
 	function init() {
-		headerCheckElement = element.querySelector<HTMLInputElement>(
-			config.attributes.check,
-		);
+		const attrs = config.attributes;
+		if (!attrs?.check || !attrs.checkbox) {
+			return;
+		}
+		headerCheckElement = element.querySelector<HTMLInputElement>(attrs.check);
 		if (!headerCheckElement) return;
 		headerChecked = headerCheckElement.checked;
-		targetElements = element.querySelectorAll(
-			config.attributes.checkbox,
-		) as NodeListOf<HTMLInputElement>;
+		targetElements = element.querySelectorAll<HTMLInputElement>(attrs.checkbox);
 		checkboxHandler();
 		reapplyCheckedStates();
 		updateHeaderCheckboxState();
@@ -79,15 +87,14 @@ export function createCheckboxHandler(
 
 	function checkboxHandler() {
 		if (!headerCheckElement) return;
+		const rowCheckboxSelector = config.attributes?.checkbox;
+		if (!rowCheckboxSelector) return;
 		headerCheckElement.addEventListener('click', checkboxListener);
-		KTEventHandler.on(
-			document.body,
-			config.attributes.checkbox,
-			'input',
-			(event: Event) => {
-				handleRowCheckboxChange(event as InputEvent);
-			},
-		);
+		KTEventHandler.on(document.body, rowCheckboxSelector, 'input', ((
+			event?: Event,
+		) => {
+			if (event) handleRowCheckboxChange(event);
+		}) as KTCallableType);
 	}
 
 	// When a row checkbox is changed
@@ -233,10 +240,11 @@ export function createCheckboxHandler(
 	}
 
 	function updateState() {
-		// Called after redraw/pagination
-		targetElements = element.querySelectorAll(
-			config.attributes.checkbox,
-		) as NodeListOf<HTMLInputElement>;
+		const rowCheckSel = config.attributes?.checkbox;
+		if (!rowCheckSel) {
+			return;
+		}
+		targetElements = element.querySelectorAll<HTMLInputElement>(rowCheckSel);
 		reapplyCheckedStates();
 		updateHeaderCheckboxState();
 	}

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

@@ -83,11 +83,11 @@ export interface KTDataTableTableRenderer<T extends KTDataTableDataInterface> {
 export interface KTDataTablePaginationRendererInput {
 	config: KTDataTableConfigInterface;
 	dataLength: number;
-	infoElement: HTMLElement;
+	infoElement?: HTMLElement | null;
 	paginateData: (page: number) => void;
-	paginationElement: HTMLElement;
+	paginationElement?: HTMLElement | null;
 	reloadPageSize: (pageSize: number, page?: number) => void;
-	sizeElement: HTMLSelectElement;
+	sizeElement?: HTMLSelectElement | null;
 	state: KTDataTableStateInterface;
 }