@keenthemes/ktui 1.2.5 → 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

@@ -90,14 +90,11 @@ export function createCheckboxHandler(
 		const rowCheckboxSelector = config.attributes?.checkbox;
 		if (!rowCheckboxSelector) return;
 		headerCheckElement.addEventListener('click', checkboxListener);
-		KTEventHandler.on(
-			document.body,
-			rowCheckboxSelector,
-			'input',
-			((event?: Event) => {
-				if (event) handleRowCheckboxChange(event);
-			}) as KTCallableType,
-		);
+		KTEventHandler.on(document.body, rowCheckboxSelector, 'input', ((
+			event?: Event,
+		) => {
+			if (event) handleRowCheckboxChange(event);
+		}) as KTCallableType);
 	}
 
 	// When a row checkbox is changed