@keenthemes/ktui 1.2.5 → 1.2.7

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

@@ -0,0 +1,204 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+
+import { KTDataTableConfigInterface, KTDataTableStateInterface } from './types';
+
+/** Default page size options shown in the size selector */
+export const DEFAULT_PAGE_SIZES = [5, 10, 20, 30, 50] as const;
+
+/** Default debounce delay (ms) for search input */
+export const DEFAULT_SEARCH_DELAY = 500;
+
+/** Default maximum visible page buttons before showing '...' */
+export const DEFAULT_PAGE_MORE_LIMIT = 3;
+
+/**
+ * Default configuration for KTDataTable.
+ * Extracted from _initDefaultConfig() for separation of concerns.
+ * Note: sort.callback and search.callback are NOT included here because
+ * they require instance context (this._sortHandler). They are added
+ * in datatable.ts _initDefaultConfig().
+ */
+export const DATATABLE_DEFAULTS: Readonly<KTDataTableConfigInterface> = {
+	/**
+	 * HTTP method for server-side API call
+	 */
+	requestMethod: 'GET',
+	/**
+	 * Custom HTTP headers for the API request
+	 */
+	requestHeaders: {
+		'Content-Type': 'application/x-www-form-urlencoded',
+	},
+	/**
+	 * Pagination info template
+	 */
+	info: '{start}-{end} of {total}',
+	/**
+	 * Info text when there is no data
+	 */
+	infoEmpty: 'No records found',
+	/**
+	 * Available page sizes
+	 */
+	pageSizes: [...DEFAULT_PAGE_SIZES],
+	/**
+	 * Default page size
+	 */
+	pageSize: 10,
+	/**
+	 * Enable or disable pagination more button
+	 */
+	pageMore: true,
+	/**
+	 * Maximum number of pages before enabling pagination more button
+	 */
+	pageMoreLimit: 3,
+	/**
+	 * Pagination button templates
+	 */
+	pagination: {
+		number: {
+			/**
+			 * CSS classes to be added to the pagination button
+			 */
+			class: 'kt-datatable-pagination-button',
+			/**
+			 * Text to be displayed in the pagination button
+			 */
+			text: '{page}',
+		},
+		previous: {
+			/**
+			 * CSS classes to be added to the previous pagination button
+			 */
+			class: 'kt-datatable-pagination-button kt-datatable-pagination-prev',
+			/**
+			 * Text to be displayed in the previous pagination button
+			 */
+			text: `
+				<svg class="rtl:transform rtl:rotate-180 size-3.5 shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<path d="M8.86501 16.7882V12.8481H21.1459C21.3724 12.8481 21.5897 12.7581 21.7498 12.5979C21.91 12.4378 22 12.2205 22 11.994C22 11.7675 21.91 11.5503 21.7498 11.3901C21.5897 11.2299 21.3724 11.1399 21.1459 11.1399H8.86501V7.2112C8.86628 7.10375 8.83517 6.9984 8.77573 6.90887C8.7163 6.81934 8.63129 6.74978 8.53177 6.70923C8.43225 6.66869 8.32283 6.65904 8.21775 6.68155C8.11267 6.70405 8.0168 6.75766 7.94262 6.83541L2.15981 11.6182C2.1092 11.668 2.06901 11.7274 2.04157 11.7929C2.01413 11.8584 2 11.9287 2 11.9997C2 12.0707 2.01413 12.141 2.04157 12.2065C2.06901 12.272 2.1092 12.3314 2.15981 12.3812L7.94262 17.164C8.0168 17.2417 8.11267 17.2953 8.21775 17.3178C8.32283 17.3403 8.43225 17.3307 8.53177 17.2902C8.63129 17.2496 8.7163 17.18 8.77573 17.0905C8.83517 17.001 8.86628 16.8956 8.86501 16.7882Z" fill="currentColor"/>
+				</svg>
+			`,
+		},
+		next: {
+			/**
+			 * CSS classes to be added to the next pagination button
+			 */
+			class: 'kt-datatable-pagination-button kt-datatable-pagination-next',
+			/**
+			 * Text to be displayed in the next pagination button
+			 */
+			text: `
+				<svg class="rtl:transform rtl:rotate-180 size-3.5 shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<path d="M15.135 7.21144V11.1516H2.85407C2.62756 11.1516 2.41032 11.2415 2.25015 11.4017C2.08998 11.5619 2 11.7791 2 12.0056C2 12.2321 2.08998 12.4494 2.25015 12.6096C2.41032 12.7697 2.62756 12.8597 2.85407 12.8597H15.135V16.7884C15.1337 16.8959 15.1648 17.0012 15.2243 17.0908C15.2837 17.1803 15.3687 17.2499 15.4682 17.2904C15.5677 17.3309 15.6772 17.3406 15.7822 17.3181C15.8873 17.2956 15.9832 17.242 16.0574 17.1642L21.8402 12.3814C21.8908 12.3316 21.931 12.2722 21.9584 12.2067C21.9859 12.1412 22 12.0709 22 11.9999C22 11.9289 21.9859 11.8586 21.9584 11.7931C21.931 11.7276 21.8908 11.6683 21.8402 11.6185L16.0574 6.83565C15.9832 6.75791 15.8873 6.70429 15.7822 6.68179C15.6772 6.65929 15.5677 6.66893 15.4682 6.70948C15.3687 6.75002 15.2837 6.81959 15.2243 6.90911C15.1648 6.99864 15.1337 7.10399 15.135 7.21144Z" fill="currentColor"/>
+				</svg>
+			`,
+		},
+		more: {
+			/**
+			 * CSS classes to be added to the pagination more button
+			 */
+			class: 'kt-datatable-pagination-button kt-datatable-pagination-more',
+			/**
+			 * Text to be displayed in the pagination more button
+			 */
+			text: '...',
+		},
+	},
+	/**
+	 * Sorting options — classes only; callback is added in datatable.ts
+	 */
+	sort: {
+		/**
+		 * CSS classes to be added to the sortable headers
+		 */
+		classes: {
+			base: 'kt-table-col',
+			asc: 'asc',
+			desc: 'desc',
+		},
+	},
+	/**
+	 * Search options — delay only; callback is added in datatable.ts
+	 */
+	search: {
+		/**
+		 * Delay in milliseconds before the search function is applied to the data array
+		 * @default 500
+		 */
+		delay: 500, // ms
+	},
+	/**
+	 * Loading spinner options
+	 */
+	loading: {
+		/**
+		 * Template to be displayed during data fetching process
+		 */
+		template: `
+			<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+				<div class="kt-datatable-loading">
+					<svg class="animate-spin -ml-1 h-5 w-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"></circle>
+						<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+					</svg>
+					{content}
+				</div>
+			</div>
+		`,
+		/**
+		 * Loading text to be displayed in the template
+		 */
+		content: 'Loading...',
+	},
+	/**
+	 * Selectors of the elements to be targeted
+	 */
+	attributes: {
+		/**
+		 * Data table element
+		 */
+		table: 'table[data-kt-datatable-table="true"]',
+		/**
+		 * Pagination info element
+		 */
+		info: '[data-kt-datatable-info="true"]',
+		/**
+		 * Page size dropdown element
+		 */
+		size: '[data-kt-datatable-size="true"]',
+		/**
+		 * Pagination element
+		 */
+		pagination: '[data-kt-datatable-pagination="true"]',
+		/**
+		 * Spinner element
+		 */
+		spinner: '[data-kt-datatable-spinner="true"]',
+		/**
+		 * Checkbox element
+		 */
+		check: '[data-kt-datatable-check="true"]',
+		checkbox: '[data-kt-datatable-row-check="true"]',
+	},
+	/**
+	 * Enable or disable state saving
+	 */
+	stateSave: true,
+	checkbox: {
+		checkedClass: 'checked',
+	},
+	/**
+	 * Table layout algorithm: 'auto' (default) or 'fixed' for consistent column widths
+	 */
+	tableLayout: 'auto',
+	/**
+	 * Private properties
+	 */
+	_state: {} as KTDataTableStateInterface,
+	loadingClass: 'loading',
+};

package/src/components/datatable/datatable-layout-plugin.ts

@@ -0,0 +1,459 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+
+import {
+	KTDataTableConfigInterface,
+	KTDataTableLayoutPluginContextInterface,
+	KTDataTableLayoutPluginInterface,
+} from './types';
+
+type Edge = 'left' | 'right';
+
+const LOCKED_CELL_CLASS = 'kt-datatable-locked-cell';
+const LOCKED_HEADER_CLASS = 'kt-datatable-locked-header';
+const LOCKED_TOP_ROW_CLASS = 'kt-datatable-locked-top-row';
+const LOCKED_BOTTOM_ROW_CLASS = 'kt-datatable-locked-bottom-row';
+const LOCKED_LEFT_CLASS = 'kt-datatable-locked-left';
+const LOCKED_RIGHT_CLASS = 'kt-datatable-locked-right';
+const LOCKED_LAYOUT_SEPARATE_CLASS = 'kt-datatable-locked-layout-separate';
+const LOCKED_HEADER_SECTION_CLASS = 'kt-datatable-locked-header-section';
+
+const HEADER_Z_INDEX = 40;
+const ROW_Z_INDEX = 30;
+const COLUMN_Z_INDEX = 35;
+const INTERSECTION_Z_INDEX = 45;
+
+const toPositiveInteger = (value: number | undefined): number => {
+	if (typeof value !== 'number' || !Number.isFinite(value)) {
+		return 0;
+	}
+
+	return Math.max(0, Math.floor(value));
+};
+
+const hasStickyColumns = (config: KTDataTableConfigInterface): boolean => {
+	const lockedLayout = config.lockedLayout;
+	if (!lockedLayout?.stickyColumns) {
+		return false;
+	}
+
+	return (
+		(lockedLayout.stickyColumns.left?.length || 0) > 0 ||
+		(lockedLayout.stickyColumns.right?.length || 0) > 0
+	);
+};
+
+const hasLockedLayoutConfig = (config: KTDataTableConfigInterface): boolean => {
+	const lockedLayout = config.lockedLayout;
+	if (!lockedLayout) {
+		return false;
+	}
+
+	return (
+		lockedLayout.stickyHeader === true ||
+		toPositiveInteger(lockedLayout.stickyRows?.top) > 0 ||
+		toPositiveInteger(lockedLayout.stickyRows?.bottom) > 0 ||
+		(lockedLayout.stickyColumns?.left?.length || 0) > 0 ||
+		(lockedLayout.stickyColumns?.right?.length || 0) > 0
+	);
+};
+
+const getScrollContainer = (rootElement: HTMLElement): HTMLElement => {
+	return (
+		rootElement.closest<HTMLElement>('.kt-table-wrapper') ||
+		rootElement.querySelector<HTMLElement>('.kt-table-wrapper') ||
+		rootElement
+	);
+};
+
+const clearStickyStyles = (
+	tableElement: HTMLTableElement,
+	scrollContainer: HTMLElement,
+): void => {
+	tableElement.classList.remove(
+		'kt-datatable-locked-layout',
+		LOCKED_LAYOUT_SEPARATE_CLASS,
+	);
+	scrollContainer.classList.remove('kt-datatable-locked-layout-host');
+	tableElement.style.borderCollapse = '';
+	tableElement.style.borderSpacing = '';
+
+	const theadElement = tableElement.tHead;
+	if (theadElement) {
+		theadElement.classList.remove(LOCKED_HEADER_SECTION_CLASS);
+		theadElement.style.position = '';
+		theadElement.style.top = '';
+		theadElement.style.zIndex = '';
+	}
+
+	const stickyElements = tableElement.querySelectorAll<HTMLElement>(
+		`.${LOCKED_CELL_CLASS}`,
+	);
+
+	stickyElements.forEach((element) => {
+		element.classList.remove(
+			LOCKED_CELL_CLASS,
+			LOCKED_HEADER_CLASS,
+			LOCKED_TOP_ROW_CLASS,
+			LOCKED_BOTTOM_ROW_CLASS,
+			LOCKED_LEFT_CLASS,
+			LOCKED_RIGHT_CLASS,
+		);
+		element.style.position = '';
+		element.style.top = '';
+		element.style.bottom = '';
+		element.style.left = '';
+		element.style.right = '';
+		element.style.zIndex = '';
+		element.style.backgroundColor = '';
+	});
+};
+
+const getDirection = (tableElement: HTMLTableElement): 'ltr' | 'rtl' => {
+	const scopedDir = tableElement
+		.closest<HTMLElement>('[dir]')
+		?.getAttribute('dir');
+	const globalDir =
+		typeof document !== 'undefined'
+			? document.documentElement.getAttribute('dir')
+			: null;
+	return scopedDir === 'rtl' || globalDir === 'rtl' ? 'rtl' : 'ltr';
+};
+
+const resolveEdgeProperty = (edge: Edge, direction: 'ltr' | 'rtl'): Edge => {
+	if (direction === 'rtl') {
+		return edge === 'left' ? 'right' : 'left';
+	}
+
+	return edge;
+};
+
+const setStickyEdge = (
+	element: HTMLElement,
+	edge: Edge,
+	offset: number,
+	direction: 'ltr' | 'rtl',
+): void => {
+	const resolvedEdge = resolveEdgeProperty(edge, direction);
+	if (resolvedEdge === 'left') {
+		element.style.left = `${offset}px`;
+		element.style.right = '';
+	} else {
+		element.style.right = `${offset}px`;
+		element.style.left = '';
+	}
+};
+
+const ensureStickyCell = (
+	element: HTMLElement,
+	className: string,
+	zIndex: number,
+): void => {
+	element.classList.add(LOCKED_CELL_CLASS, className);
+	element.style.position = 'sticky';
+	element.style.zIndex = String(zIndex);
+};
+
+const measureStickyHeaderHeight = (
+	theadElement: HTMLTableSectionElement,
+): number => Math.round(theadElement.offsetHeight);
+
+/** Offset for top sticky body rows so they sit flush under a sticky header. */
+const getStickyTopRowOffset = (
+	headerHeight: number,
+	useCollapsedBorders: boolean,
+): number => {
+	if (headerHeight <= 0) {
+		return 0;
+	}
+
+	// Collapsed row borders are shared between thead and the first tbody row.
+	return useCollapsedBorders ? headerHeight - 1 : headerHeight;
+};
+
+const markIntersectionZIndex = (element: HTMLElement): void => {
+	const isRowLocked =
+		element.classList.contains(LOCKED_HEADER_CLASS) ||
+		element.classList.contains(LOCKED_TOP_ROW_CLASS) ||
+		element.classList.contains(LOCKED_BOTTOM_ROW_CLASS);
+	const isColumnLocked =
+		element.classList.contains(LOCKED_LEFT_CLASS) ||
+		element.classList.contains(LOCKED_RIGHT_CLASS);
+
+	if (isRowLocked && isColumnLocked) {
+		element.style.zIndex = String(INTERSECTION_Z_INDEX);
+	}
+};
+
+const applyStickyHeader = (
+	theadElement: HTMLTableSectionElement,
+	enabled: boolean,
+	useSectionSticky: boolean,
+): number => {
+	if (!enabled) {
+		return 0;
+	}
+
+	if (useSectionSticky) {
+		theadElement.classList.add(LOCKED_HEADER_SECTION_CLASS);
+		theadElement.style.position = 'sticky';
+		theadElement.style.top = '0';
+		theadElement.style.zIndex = String(HEADER_Z_INDEX);
+
+		Array.from(theadElement.rows).forEach((row) => {
+			Array.from(row.cells).forEach((cell) => {
+				const headerCell = cell as HTMLTableCellElement;
+				headerCell.classList.add(LOCKED_CELL_CLASS, LOCKED_HEADER_CLASS);
+			});
+		});
+
+		return measureStickyHeaderHeight(theadElement);
+	}
+
+	let cumulativeTop = 0;
+	Array.from(theadElement.rows).forEach((row) => {
+		const rowTop = cumulativeTop;
+		Array.from(row.cells).forEach((cell) => {
+			const headerCell = cell as HTMLTableCellElement;
+			ensureStickyCell(headerCell, LOCKED_HEADER_CLASS, HEADER_Z_INDEX);
+			headerCell.style.top = `${rowTop}px`;
+		});
+		cumulativeTop += row.offsetHeight;
+	});
+
+	return cumulativeTop;
+};
+
+const applyStickyRows = (
+	tbodyElement: HTMLTableSectionElement,
+	headerHeight: number,
+	topCount: number,
+	bottomCount: number,
+	useCollapsedBorders: boolean,
+): void => {
+	const rows = Array.from(tbodyElement.rows);
+
+	let topOffset = getStickyTopRowOffset(headerHeight, useCollapsedBorders);
+	rows.slice(0, topCount).forEach((row) => {
+		const rowTop = topOffset;
+		Array.from(row.cells).forEach((cell) => {
+			const td = cell as HTMLTableCellElement;
+			ensureStickyCell(td, LOCKED_TOP_ROW_CLASS, ROW_Z_INDEX);
+			td.style.top = `${rowTop}px`;
+		});
+		topOffset += row.offsetHeight;
+	});
+
+	let bottomOffset = 0;
+	rows
+		.slice(Math.max(0, rows.length - bottomCount))
+		.reverse()
+		.forEach((row) => {
+			const rowBottom = bottomOffset;
+			Array.from(row.cells).forEach((cell) => {
+				const td = cell as HTMLTableCellElement;
+				ensureStickyCell(td, LOCKED_BOTTOM_ROW_CLASS, ROW_Z_INDEX);
+				td.style.bottom = `${rowBottom}px`;
+			});
+			bottomOffset += row.offsetHeight;
+		});
+};
+
+const getColumnIndexMap = (
+	theadElement: HTMLTableSectionElement,
+	config: KTDataTableConfigInterface,
+): Map<string, number> => {
+	const map = new Map<string, number>();
+	const typedHeaders = Array.from(
+		theadElement.querySelectorAll<HTMLTableCellElement>(
+			'th[data-kt-datatable-column]',
+		),
+	);
+
+	if (typedHeaders.length > 0) {
+		typedHeaders.forEach((th, index) => {
+			const column = th.getAttribute('data-kt-datatable-column');
+			if (column) {
+				map.set(column, index);
+			}
+		});
+		return map;
+	}
+
+	if (config.columns) {
+		Object.keys(config.columns).forEach((key, index) => {
+			map.set(key, index);
+		});
+	}
+
+	return map;
+};
+
+const getColumnCells = (
+	tableElement: HTMLTableElement,
+	columnIndex: number,
+): HTMLTableCellElement[] => {
+	const cells: HTMLTableCellElement[] = [];
+	tableElement.querySelectorAll('tr').forEach((row) => {
+		const cell = row.children.item(columnIndex);
+		if (cell instanceof HTMLTableCellElement) {
+			cells.push(cell);
+		}
+	});
+	return cells;
+};
+
+const applyStickyColumns = (
+	tableElement: HTMLTableElement,
+	theadElement: HTMLTableSectionElement,
+	config: KTDataTableConfigInterface,
+): void => {
+	const lockedColumns = config.lockedLayout?.stickyColumns;
+	if (!lockedColumns) {
+		return;
+	}
+
+	const direction = getDirection(tableElement);
+	const columnMap = getColumnIndexMap(theadElement, config);
+
+	let leftOffset = 0;
+	(lockedColumns.left || []).forEach((key) => {
+		const index = columnMap.get(key);
+		if (typeof index !== 'number') {
+			return;
+		}
+
+		const cells = getColumnCells(tableElement, index);
+		if (cells.length === 0) {
+			return;
+		}
+
+		const width = cells[0].getBoundingClientRect().width;
+		cells.forEach((cell) => {
+			ensureStickyCell(cell, LOCKED_LEFT_CLASS, COLUMN_Z_INDEX);
+			setStickyEdge(cell, 'left', leftOffset, direction);
+		});
+		leftOffset += width;
+	});
+
+	let rightOffset = 0;
+	[...(lockedColumns.right || [])].reverse().forEach((key) => {
+		const index = columnMap.get(key);
+		if (typeof index !== 'number') {
+			return;
+		}
+
+		const cells = getColumnCells(tableElement, index);
+		if (cells.length === 0) {
+			return;
+		}
+
+		const width = cells[0].getBoundingClientRect().width;
+		cells.forEach((cell) => {
+			ensureStickyCell(cell, LOCKED_RIGHT_CLASS, COLUMN_Z_INDEX);
+			setStickyEdge(cell, 'right', rightOffset, direction);
+		});
+		rightOffset += width;
+	});
+
+	tableElement
+		.querySelectorAll<HTMLElement>(`.${LOCKED_CELL_CLASS}`)
+		.forEach(markIntersectionZIndex);
+};
+
+export const createStickyLayoutPlugin =
+	(): KTDataTableLayoutPluginInterface => {
+		let resizeHandler: (() => void) | null = null;
+		let scrollContainerTarget: HTMLElement | null = null;
+		let isApplying = false;
+
+		const applyLayout = (
+			ctx: KTDataTableLayoutPluginContextInterface,
+		): void => {
+			if (isApplying || !hasLockedLayoutConfig(ctx.config)) {
+				return;
+			}
+
+			isApplying = true;
+			try {
+				const scrollContainer = getScrollContainer(ctx.rootElement);
+				clearStickyStyles(ctx.tableElement, scrollContainer);
+				ctx.tableElement.classList.add('kt-datatable-locked-layout');
+				scrollContainer.classList.add('kt-datatable-locked-layout-host');
+
+				if (hasStickyColumns(ctx.config)) {
+					ctx.tableElement.classList.add(LOCKED_LAYOUT_SEPARATE_CLASS);
+					ctx.tableElement.style.borderCollapse = 'separate';
+					ctx.tableElement.style.borderSpacing = '0';
+				}
+
+				const lockedLayout = ctx.config.lockedLayout || {};
+				const useCollapsedBorders = !hasStickyColumns(ctx.config);
+				const headerHeight = applyStickyHeader(
+					ctx.theadElement,
+					lockedLayout.stickyHeader === true,
+					useCollapsedBorders,
+				);
+
+				applyStickyRows(
+					ctx.tbodyElement,
+					headerHeight,
+					toPositiveInteger(lockedLayout.stickyRows?.top),
+					toPositiveInteger(lockedLayout.stickyRows?.bottom),
+					useCollapsedBorders,
+				);
+
+				applyStickyColumns(ctx.tableElement, ctx.theadElement, ctx.config);
+			} finally {
+				isApplying = false;
+			}
+		};
+
+		const detachResizeListener = (): void => {
+			if (!resizeHandler) {
+				return;
+			}
+
+			window.removeEventListener('resize', resizeHandler);
+			if (scrollContainerTarget) {
+				scrollContainerTarget.removeEventListener('scroll', resizeHandler);
+			}
+
+			resizeHandler = null;
+			scrollContainerTarget = null;
+		};
+
+		return {
+			beforeDraw: (ctx) => {
+				const scrollContainer = getScrollContainer(ctx.rootElement);
+				clearStickyStyles(ctx.tableElement, scrollContainer);
+			},
+			afterDraw: (ctx) => {
+				detachResizeListener();
+				applyLayout(ctx);
+
+				// Throttle re-layout with rAF to avoid running on every resize/scroll event
+				let rafId = 0;
+				const throttledApply = () => {
+					if (rafId) return;
+					rafId = requestAnimationFrame(() => {
+						rafId = 0;
+						applyLayout(ctx);
+					});
+				};
+
+				const scrollContainer = getScrollContainer(ctx.rootElement);
+				resizeHandler = throttledApply;
+				window.addEventListener('resize', resizeHandler);
+				scrollContainerTarget = scrollContainer;
+				scrollContainer.addEventListener('scroll', resizeHandler);
+			},
+			dispose: (ctx) => {
+				detachResizeListener();
+				const scrollContainer = getScrollContainer(ctx.rootElement);
+				clearStickyStyles(ctx.tableElement, scrollContainer);
+			},
+		};
+	};