@keenthemes/ktui 1.0.3

package/src/components/component.ts

@@ -0,0 +1,132 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+/* eslint-disable guard-for-in */
+/* eslint-disable max-len */
+/* eslint-disable require-jsdoc */
+
+declare global {
+	interface Window {
+		KTGlobalComponentsConfig: object;
+	}
+}
+
+import KTData from '../helpers/data';
+import KTDom from '../helpers/dom';
+import KTUtils from '../helpers/utils';
+import { KTOptionType } from '../types';
+
+export default class KTComponent {
+	protected _dataOptionPrefix: string = 'kt-';
+	protected _name: string;
+	protected _defaultConfig: object;
+	protected _config: object;
+	protected _events: Map<string, Map<string, CallableFunction>>;
+	protected _uid: string | null = null;
+	protected _element: HTMLElement | null = null;
+
+	protected _init(element: HTMLElement | null) {
+		element = KTDom.getElement(element);
+
+		if (!element) {
+			return;
+		}
+
+		this._element = element;
+		this._events = new Map();
+		this._uid = KTUtils.geUID(this._name);
+
+		this._element.setAttribute(`data-kt-${this._name}-initialized`, 'true');
+
+		KTData.set(this._element, this._name, this);
+	}
+
+	protected _fireEvent(eventType: string, payload: object = null): void {
+		this._events.get(eventType)?.forEach((callable) => {
+			callable(payload);
+		});
+	}
+
+	protected _dispatchEvent(eventType: string, payload: object = null): void {
+		const event = new CustomEvent(eventType, {
+			detail: { payload },
+			bubbles: true,
+			cancelable: true,
+			composed: false,
+		});
+
+		if (!this._element) return;
+		this._element.dispatchEvent(event);
+	}
+
+	protected _getOption(name: string): KTOptionType {
+		const value = this._config[name as keyof object];
+		const reponsiveValue = KTDom.getCssProp(
+			this._element,
+			`--kt-${this._name}-${KTUtils.camelReverseCase(name)}`,
+		);
+
+		return reponsiveValue || value;
+	}
+
+	protected _getGlobalConfig(): object {
+		if (
+			window.KTGlobalComponentsConfig &&
+			(window.KTGlobalComponentsConfig as object)[this._name as keyof object]
+		) {
+			return (window.KTGlobalComponentsConfig as object)[
+				this._name as keyof object
+			] as object;
+		} else {
+			return {};
+		}
+	}
+
+	protected _buildConfig(config: object = {}): void {
+		if (!this._element) return;
+
+		this._config = {
+			...this._defaultConfig,
+			...this._getGlobalConfig(),
+			...KTDom.getDataAttributes(
+				this._element,
+				this._dataOptionPrefix + this._name,
+			),
+			...config,
+		};
+	}
+
+	public dispose(): void {
+		if (!this._element) return;
+
+		this._element.removeAttribute(`data-kt-${this._name}-initialized`);
+		KTData.remove(this._element, this._name);
+	}
+
+	public on(eventType: string, callback: CallableFunction): string {
+		const eventId = KTUtils.geUID();
+
+		if (!this._events.get(eventType)) {
+			this._events.set(eventType, new Map());
+		}
+
+		this._events.get(eventType).set(eventId, callback);
+
+		return eventId;
+	}
+
+	public off(eventType: string, eventId: string): void {
+		this._events.get(eventType)?.delete(eventId);
+	}
+
+	public getOption(name: string): KTOptionType {
+		return this._getOption(name as keyof object);
+	}
+
+	public getElement(): HTMLElement {
+		if (!this._element) return null;
+		return this._element;
+	}
+}

package/src/components/constants.ts

@@ -0,0 +1,16 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+export const KT_ACCESSIBILITY_KEYS = [
+	'ArrowUp',
+	'ArrowLeft',
+	'ArrowDown',
+	'ArrowRight',
+	'Home',
+	'End',
+	'Escape',
+	'Enter',
+	'Tab',
+];

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

@@ -0,0 +1,236 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+// Checkbox logic for KTDataTable
+
+import {
+	KTDataTableConfigInterface,
+	KTDataTableCheckChangePayloadInterface,
+} from './types';
+import KTEventHandler from '../../helpers/event-handler';
+
+export interface KTDataTableCheckboxAPI {
+	init(): void;
+	check(): void;
+	uncheck(): void;
+	toggle(): void;
+	isChecked(): boolean;
+	getChecked(): string[];
+	updateState(): void;
+}
+
+// Main function to create checkbox logic for a datatable instance
+export function createCheckboxHandler(
+	element: HTMLElement,
+	config: KTDataTableConfigInterface,
+	fireEvent: (eventName: string, eventData?: any) => void,
+): KTDataTableCheckboxAPI {
+	let headerChecked = false;
+	let headerCheckElement: HTMLInputElement | null = null;
+	let targetElements: NodeListOf<HTMLInputElement> = null;
+
+	// Default: preserve selection across all pages
+	const preserveSelection = config.checkbox?.preserveSelection !== false;
+
+	// Helper: get selectedRows from state, always as string[]
+	function getSelectedRows(): string[] {
+		if (!config._state) config._state = {} as any;
+		if (!Array.isArray(config._state.selectedRows))
+			config._state.selectedRows = [];
+		return config._state.selectedRows.map(String);
+	}
+
+	// Helper: set selectedRows in state
+	function setSelectedRows(rows: string[]) {
+		if (!config._state) config._state = {} as any;
+		config._state.selectedRows = Array.from(new Set(rows.map(String)));
+	}
+
+	// Helper: get all visible row IDs (values)
+	function getVisibleRowIds(): string[] {
+		if (!targetElements) return [];
+		return Array.from(targetElements)
+			.map((el) => el.value)
+			.filter((v) => v != null && v !== '');
+	}
+
+	// Listener for header checkbox
+	const checkboxListener = (event: MouseEvent) => {
+		checkboxToggle(event);
+	};
+
+	function init() {
+		headerCheckElement = element.querySelector<HTMLInputElement>(
+			config.attributes.check,
+		);
+		if (!headerCheckElement) return;
+		headerChecked = headerCheckElement.checked;
+		targetElements = element.querySelectorAll(
+			config.attributes.checkbox,
+		) as NodeListOf<HTMLInputElement>;
+		checkboxHandler();
+		reapplyCheckedStates();
+		updateHeaderCheckboxState();
+	}
+
+	function checkboxHandler() {
+		if (!headerCheckElement) return;
+		headerCheckElement.addEventListener('click', checkboxListener);
+		KTEventHandler.on(
+			document.body,
+			config.attributes.checkbox,
+			'input',
+			(event: Event) => {
+				handleRowCheckboxChange(event as InputEvent);
+			},
+		);
+	}
+
+	// When a row checkbox is changed
+	function handleRowCheckboxChange(event: Event) {
+		const input = event.target as HTMLInputElement;
+		if (!input) return;
+		const value = input.value;
+		let selectedRows = getSelectedRows();
+		if (input.checked) {
+			if (!selectedRows.includes(value)) selectedRows.push(value);
+		} else {
+			selectedRows = selectedRows.filter((v) => v !== value);
+		}
+		setSelectedRows(selectedRows);
+		updateHeaderCheckboxState();
+		fireEvent('changed');
+	}
+
+	// When the header checkbox is toggled
+	function checkboxToggle(event?: Event) {
+		const checked = !isChecked();
+		const eventType = checked ? 'checked' : 'unchecked';
+		fireEvent(eventType);
+		change(checked);
+	}
+
+	// Change all visible checkboxes and update selectedRows
+	function change(checked: boolean) {
+		const payload: KTDataTableCheckChangePayloadInterface = { cancel: false };
+		fireEvent('change', payload);
+		if (payload.cancel === true) return;
+		headerChecked = checked;
+		if (headerCheckElement) headerCheckElement.checked = checked;
+		if (targetElements) {
+			const visibleIds = getVisibleRowIds();
+			let selectedRows = getSelectedRows();
+			if (checked) {
+				// Add all visible IDs to selectedRows
+				selectedRows = preserveSelection
+					? Array.from(new Set([...selectedRows, ...visibleIds]))
+					: visibleIds;
+			} else {
+				// Remove all visible IDs from selectedRows
+				selectedRows = preserveSelection
+					? selectedRows.filter((v) => !visibleIds.includes(v))
+					: [];
+			}
+			setSelectedRows(selectedRows);
+			// Update visible checkboxes
+			targetElements.forEach((element: HTMLInputElement) => {
+				if (element) {
+					element.checked = checked;
+				}
+			});
+		}
+		updateHeaderCheckboxState();
+		fireEvent('changed');
+	}
+
+	// Reapply checked state to visible checkboxes based on selectedRows
+	function reapplyCheckedStates() {
+		const selectedRows = getSelectedRows();
+		if (!targetElements) return;
+		targetElements.forEach((element: HTMLInputElement) => {
+			if (!element) return;
+			const value = element.value;
+			element.checked = selectedRows.includes(value);
+			// Update row class
+			const row = element.closest('tr');
+			if (row && config.checkbox?.checkedClass) {
+				if (element.checked) {
+					row.classList.add(config.checkbox.checkedClass);
+				} else {
+					row.classList.remove(config.checkbox.checkedClass);
+				}
+			}
+		});
+	}
+
+	// Update header checkbox state (checked/indeterminate/unchecked)
+	function updateHeaderCheckboxState() {
+		if (!headerCheckElement || !targetElements) return;
+		const total = targetElements.length;
+		let checked = 0;
+		for (let i = 0; i < total; i++) {
+			if (targetElements[i].checked) checked++;
+		}
+		if (checked === 0) {
+			headerCheckElement.indeterminate = false;
+			headerCheckElement.checked = false;
+			headerChecked = false;
+		} else if (checked > 0 && checked < total) {
+			headerCheckElement.indeterminate = true;
+			headerCheckElement.checked = false;
+			headerChecked = false;
+		} else if (checked === total) {
+			headerCheckElement.indeterminate = false;
+			headerCheckElement.checked = true;
+			headerChecked = true;
+		}
+	}
+
+	// Fix: isChecked() implementation
+	function isChecked(): boolean {
+		return headerChecked;
+	}
+
+	function getChecked(): string[] {
+		return getSelectedRows();
+	}
+
+	function check() {
+		change(true);
+		reapplyCheckedStates();
+		updateHeaderCheckboxState();
+	}
+
+	function uncheck() {
+		change(false);
+		reapplyCheckedStates();
+		updateHeaderCheckboxState();
+	}
+
+	function toggle() {
+		checkboxToggle();
+		reapplyCheckedStates();
+		updateHeaderCheckboxState();
+	}
+
+	function updateState() {
+		// Called after redraw/pagination
+		targetElements = element.querySelectorAll(
+			config.attributes.checkbox,
+		) as NodeListOf<HTMLInputElement>;
+		reapplyCheckedStates();
+		updateHeaderCheckboxState();
+	}
+
+	return {
+		init,
+		check,
+		uncheck,
+		toggle,
+		isChecked,
+		getChecked,
+		updateState,
+	};
+}

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

@@ -0,0 +1,154 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+// Sorting logic for KTDataTable
+
+import {
+	KTDataTableConfigInterface,
+	KTDataTableSortOrderInterface,
+	KTDataTableDataInterface,
+} from './types';
+
+export interface KTDataTableSortAPI<T = KTDataTableDataInterface> {
+	initSort(): void;
+	sortData(
+		data: T[],
+		sortField: keyof T | number,
+		sortOrder: KTDataTableSortOrderInterface,
+	): T[];
+	toggleSortOrder(
+		currentField: keyof T | number,
+		currentOrder: KTDataTableSortOrderInterface,
+		newField: keyof T | number,
+	): KTDataTableSortOrderInterface;
+	setSortIcon(
+		sortField: keyof T,
+		sortOrder: KTDataTableSortOrderInterface,
+	): void;
+}
+
+export function createSortHandler<T = KTDataTableDataInterface>(
+	config: KTDataTableConfigInterface,
+	theadElement: HTMLTableSectionElement,
+	getState: () => {
+		sortField: keyof T | number;
+		sortOrder: KTDataTableSortOrderInterface;
+	},
+	setState: (
+		field: keyof T | number,
+		order: KTDataTableSortOrderInterface,
+	) => void,
+	fireEvent: (eventName: string, eventData?: any) => void,
+	dispatchEvent: (eventName: string, eventData?: any) => void,
+	updateData: () => void,
+): KTDataTableSortAPI<T> {
+	// Helper to compare values for sorting
+	function compareValues(
+		a: unknown,
+		b: unknown,
+		sortOrder: KTDataTableSortOrderInterface,
+	): number {
+		const aText = String(a).replace(/<[^>]*>|&nbsp;/g, '');
+		const bText = String(b).replace(/<[^>]*>|&nbsp;/g, '');
+		return aText > bText
+			? sortOrder === 'asc'
+				? 1
+				: -1
+			: aText < bText
+				? sortOrder === 'asc'
+					? -1
+					: 1
+				: 0;
+	}
+
+	function sortData(
+		data: T[],
+		sortField: keyof T | number,
+		sortOrder: KTDataTableSortOrderInterface,
+	): T[] {
+		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);
+		});
+	}
+
+	function toggleSortOrder(
+		currentField: keyof T | number,
+		currentOrder: KTDataTableSortOrderInterface,
+		newField: keyof T | number,
+	): KTDataTableSortOrderInterface {
+		if (currentField === newField) {
+			switch (currentOrder) {
+				case 'asc':
+					return 'desc';
+				case 'desc':
+					return '';
+				default:
+					return 'asc';
+			}
+		}
+		return 'asc';
+	}
+
+	function setSortIcon(
+		sortField: keyof T,
+		sortOrder: KTDataTableSortOrderInterface,
+	): void {
+		const sortClass = sortOrder
+			? sortOrder === 'asc'
+				? config.sort?.classes?.asc || ''
+				: config.sort?.classes?.desc || ''
+			: '';
+		const th =
+			typeof sortField === 'number'
+				? theadElement.querySelectorAll('th')[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;
+			if (sortElement) {
+				sortElement.className =
+					`${config.sort?.classes?.base} ${sortClass}`.trim();
+			}
+		}
+	}
+
+	function initSort(): void {
+		if (!theadElement) return;
+		// Set the initial sort icon
+		setSortIcon(getState().sortField as keyof T, getState().sortOrder);
+		// Get all the table headers
+		const headers = Array.from(theadElement.querySelectorAll('th'));
+		headers.forEach((header) => {
+			// If the sort class is not found, it's not a sortable column
+			if (!header.querySelector(`.${config.sort?.classes?.base}`)) return;
+			const sortAttribute =
+				header.getAttribute('data-kt-datatable-column-sort') ||
+				header.getAttribute('data-kt-datatable-column');
+			const sortField = sortAttribute
+				? (sortAttribute as keyof T)
+				: (header.cellIndex as keyof T);
+			header.addEventListener('click', () => {
+				const state = getState();
+				const sortOrder = toggleSortOrder(
+					state.sortField,
+					state.sortOrder,
+					sortField,
+				);
+				setSortIcon(sortField, sortOrder);
+				setState(sortField, sortOrder);
+				fireEvent('sort', { field: sortField, order: sortOrder });
+				dispatchEvent('sort', { field: sortField, order: sortOrder });
+				updateData();
+			});
+		});
+	}
+
+	return { initSort, sortData, toggleSortOrder, setSortIcon };
+}

package/src/components/datatable/datatable.css

@@ -0,0 +1,110 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ * @version: 1.0.0
+ */
+@layer components {
+	.kt-datatable-toolbar {
+		@apply py-3 px-4 flex justify-center sm:justify-between flex-col sm:flex-row gap-3 text-muted-foreground text-sm font-medium border-t border-border;
+	}
+
+	.kt-datatable-pagination {
+		@apply flex items-center gap-1;
+
+		.kt-datatable-pagination-button {
+			@apply cursor-pointer bg-transparent inline-flex h-7 min-w-7 px-0.5 rounded-md items-center justify-center text-muted-foreground;
+
+			&.active,
+			&:hover:not(:disabled) {
+				@apply bg-accent text-accent-foreground;
+			}
+
+			&.kt-datatable-pagination-prev {
+				@apply text-foreground;
+			}
+
+			&.kt-datatable-pagination-next {
+				@apply text-foreground;
+			}
+
+			&.kt-datatable-pagination-more {
+			}
+
+			&:disabled {
+				@apply text-muted-foreground cursor-default;
+			}
+		}
+	}
+
+	.kt-datatable-length {
+		@apply flex items-center gap-2 whitespace-nowrap;
+	}
+
+	.kt-datatable-info {
+		@apply flex items-center gap-4;
+	}
+
+	.kt-datatable-loading {
+		@apply flex items-center gap-2 px-4 py-2 font-medium leading-none text-sm border border-border rounded-md bg-card text-card-foreground shadow-xs shadow-[rgba(0,0,0,0.05)];
+	}
+
+	/* Overlay styles */
+	.kt-datatable-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(255, 255, 255, 0.7);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 10;
+	}
+
+	/* Ensure proper positioning for the table container */
+	[data-kt-datatable] {
+		position: relative;
+	}
+
+	/* Style when table is loading */
+	[data-kt-datatable].loading table {
+		opacity: 0.6;
+	}
+}
+
+@custom-variant kt-datatable-loading {
+	&.[data-kt-datatable].loading {
+		@slot;
+	}
+	[data-kt-datatable].loading & {
+		@slot;
+	}
+}
+
+@custom-variant kt-datatable-initialized {
+	&.[data-kt-datatable].initialized {
+		@slot;
+	}
+	[data-kt-datatable].initialized & {
+		@slot;
+	}
+}
+
+@custom-variant kt-datatable-sort-asc {
+	&.[data-kt-datatable-column-sort='asc']:where([data-kt-datatable] *) {
+		@slot;
+	}
+	[data-kt-datatable] [data-kt-datatable-column-sort='asc'] & {
+		@slot;
+	}
+}
+
+@custom-variant kt-datatable-sort-desc {
+	&.[data-kt-datatable-column-sort='desc']:where([data-kt-datatable] *) {
+		@slot;
+	}
+	[data-kt-datatable] [data-kt-datatable-column-sort='desc'] & {
+		@slot;
+	}
+}