@keenthemes/ktui 1.2.4 → 1.2.6

package/src/components/datatable/datatable-table-renderer.ts

@@ -130,7 +130,7 @@ export class KTDataTableDomTableRenderer<
 			td.innerHTML = value as string;
 
 			this.applyOriginalTdClass(input, td, rowIndex, colIndex);
-			this.applyDataRowAttributes(td, dataRowAttributes, colIndex);
+			this.applyDataRowAttributes(td, dataRowAttributes ?? null, colIndex);
 
 			row.appendChild(td);
 		}
@@ -142,39 +142,47 @@ export class KTDataTableDomTableRenderer<
 		item: T,
 		rowIndex: number,
 	): void {
-		Object.keys(input.config.columns).forEach(
-			(key: keyof T, colIndex: number) => {
-				const td = document.createElement('td');
-				const columnDef = input.config.columns[key as string];
-
-				this.applyOriginalTdClass(input, td, rowIndex, colIndex);
-
-				if (typeof columnDef.render === 'function') {
-					const result = columnDef.render.call(
-						input.context,
-						item[key],
-						item,
-						input.context,
-					);
-					if (
-						result instanceof HTMLElement ||
-						result instanceof DocumentFragment
-					) {
-						td.appendChild(result);
-					} else if (typeof result === 'string') {
-						td.innerHTML = result as string;
-					}
-				} else {
-					td.textContent = item[key] as string;
-				}
+		const columns = input.config.columns;
+		if (!columns) {
+			return;
+		}
+
+		Object.keys(columns).forEach((key, colIndex) => {
+			const columnDef = columns[key];
+			if (!columnDef) {
+				return;
+			}
+			const colKey = key as keyof T;
+
+			const td = document.createElement('td');
+
+			this.applyOriginalTdClass(input, td, rowIndex, colIndex);
 
-				if (typeof columnDef.createdCell === 'function') {
-					columnDef.createdCell.call(input.context, td, item[key], item, row);
+			if (typeof columnDef.render === 'function') {
+				const result = columnDef.render.call(
+					input.context,
+					item[colKey],
+					item,
+					input.context,
+				);
+				if (
+					result instanceof HTMLElement ||
+					result instanceof DocumentFragment
+				) {
+					td.appendChild(result);
+				} else if (typeof result === 'string') {
+					td.innerHTML = result as string;
 				}
+			} else {
+				td.textContent = item[colKey] as string;
+			}
 
-				row.appendChild(td);
-			},
-		);
+			if (typeof columnDef.createdCell === 'function') {
+				columnDef.createdCell.call(input.context, td, item[colKey], item, row);
+			}
+
+			row.appendChild(td);
+		});
 	}
 
 	private applyOriginalTdClass(
@@ -194,7 +202,7 @@ export class KTDataTableDomTableRenderer<
 
 	private applyDataRowAttributes(
 		td: HTMLTableCellElement,
-		dataRowAttributes: KTDataTableAttributeInterface,
+		dataRowAttributes: KTDataTableAttributeInterface | null,
 		colIndex: number,
 	): void {
 		if (dataRowAttributes && dataRowAttributes[colIndex]) {

package/src/components/datatable/datatable.css

@@ -71,6 +71,104 @@
 	[data-kt-datatable].loading table {
 		opacity: 0.6;
 	}
+
+	/* Locked layout styles */
+	[data-kt-datatable] .kt-datatable-locked-layout {
+		position: relative;
+	}
+
+	[data-kt-datatable]
+		.kt-datatable-locked-layout
+		[data-kt-datatable-table]
+		thead.kt-datatable-locked-header-section {
+		/* Sticky thead group — opaque surface, no gap above first body row */
+		background-color: color-mix(
+			in srgb,
+			var(--color-muted, rgb(0, 0, 0)) 40%,
+			var(--color-card, var(--color-background, #ffffff))
+		) !important;
+	}
+
+	/* Sticky columns use border-collapse: separate — per-cell borders replace tr border-b */
+	[data-kt-datatable]
+		.kt-datatable-locked-layout.kt-datatable-locked-layout-separate
+		[data-kt-datatable-table]
+		thead
+		tr {
+		@apply border-b-0;
+	}
+
+	[data-kt-datatable]
+		.kt-datatable-locked-layout.kt-datatable-locked-layout-separate
+		[data-kt-datatable-table]
+		thead
+		th {
+		@apply border-b border-border;
+	}
+
+	[data-kt-datatable]
+		.kt-datatable-locked-layout.kt-datatable-locked-layout-separate
+		[data-kt-datatable-table]
+		tbody
+		tr {
+		@apply border-b-0;
+	}
+
+	[data-kt-datatable]
+		.kt-datatable-locked-layout.kt-datatable-locked-layout-separate
+		[data-kt-datatable-table]
+		tbody
+		td {
+		@apply border-b border-border;
+	}
+
+	[data-kt-datatable]
+		.kt-datatable-locked-layout.kt-datatable-locked-layout-separate
+		[data-kt-datatable-table]
+		tbody
+		tr:last-child
+		td {
+		@apply border-b-0;
+	}
+
+	[data-kt-datatable] .kt-datatable-locked-cell {
+		overflow: hidden;
+		isolation: isolate;
+		/* Opaque surface so horizontally scrolling cells do not show through */
+		background-color: var(--color-card, var(--color-background, #ffffff)) !important;
+	}
+
+	[data-kt-datatable] [data-kt-datatable-table] thead th.kt-datatable-locked-cell,
+	[data-kt-datatable] .kt-datatable-locked-header {
+		/* Match kt-table thead bg-muted/40 without transparency */
+		background-color: color-mix(
+			in srgb,
+			var(--color-muted, rgb(0, 0, 0)) 40%,
+			var(--color-card, var(--color-background, #ffffff))
+		) !important;
+	}
+
+	[data-kt-datatable] .kt-datatable-locked-left {
+		box-shadow: inset -1px 0 0 0 var(--color-border, rgba(0, 0, 0, 0.08));
+	}
+
+	[data-kt-datatable] .kt-datatable-locked-right {
+		box-shadow: inset 1px 0 0 0 var(--color-border, rgba(0, 0, 0, 0.08));
+	}
+
+	/* Keep row hover/checked visual states on sticky body cells */
+	[data-kt-datatable] [data-kt-datatable-table] tbody tr:hover > .kt-datatable-locked-cell {
+		/* Match kt-table row hover bg-muted/50 without transparency */
+		background-color: color-mix(
+			in srgb,
+			var(--color-muted, rgb(0, 0, 0)) 50%,
+			var(--color-card, var(--color-background, #ffffff))
+		) !important;
+	}
+
+	[data-kt-datatable] [data-kt-datatable-table] tbody tr.checked > .kt-datatable-locked-cell {
+		background-color: var(--color-muted, rgb(0, 0, 0)) !important;
+	}
 }
 
 @custom-variant kt-datatable-loading {