fix(KtTable): fix styling issues with the table

- slide in sorting indicator if header is right-aligned - add spacing to header to make it properly center-aligned if sorting indicator is present - show inline loading state if rows are present
3YOURMIND · Dec 16, 2024 · 9265a13 · 9265a13
1 parent e554f4c
commit 9265a13
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 15 deletions.
diff --git a/packages/documentation/pages/usage/components/table.vue b/packages/documentation/pages/usage/components/table.vue
@@ -61,17 +61,13 @@
 				v-if="booleanFlags.isEmpty && booleanFlags.showEmptySlot"
 				#empty
 			>
-				<img
-					src="https://usagif.com/wp-content/uploads/2021/4fh5wi/pepefrg-33.gif"
-				/>
+				<img src="https://picsum.photos/400/150" />
 			</template>
 			<template
 				v-if="booleanFlags.isLoading && booleanFlags.showLoadingSlot"
 				#loading
 			>
-				<img
-					src="https://usagif.com/wp-content/uploads/2021/4fh5wi/pepefrg-54.gif"
-				/>
+				<img src="https://picsum.photos/400/150" />
 			</template>
 			<template #expanded-row>
 				<div>Expanded content</div>
@@ -282,7 +278,7 @@ export default defineComponent({
 					}),
 					createColumn({
 						display: getCustomDisplay({
-							align: 'right',
+							align: 'center',
 							disableCellClick: false,
 							isNumeric: false,
 							render: (value: string) => value.replaceAll('e', 'x'),
@@ -291,7 +287,6 @@ export default defineComponent({
 						id: 'lifespan',
 						isSortable: true,
 						label: 'Lifespan (click allowed)',
-						maxWidth: '100px',
 					}),
 					...(booleanFlags.value.hasDragAndDrop
 						? [
@@ -449,7 +444,6 @@ export default defineComponent({
 					label: 'table has drag and drop',
 				},
 				{
-					isDisabled: booleanFlags.value.isLoading,
 					key: 'isEmpty',
 					label: 'table is empty',
 				},
@@ -462,11 +456,10 @@ export default defineComponent({
 						]
 					: []),
 				{
-					isDisabled: booleanFlags.value.isEmpty,
 					key: 'isLoading',
 					label: 'table is loading',
 				},
-				...(booleanFlags.value.isLoading
+				...(booleanFlags.value.isLoading && booleanFlags.value.isEmpty
 					? [
 							{
 								key: 'showLoadingSlot',

diff --git a/packages/kotti-ui/source/kotti-table/KtTable.vue b/packages/kotti-ui/source/kotti-table/KtTable.vue
@@ -14,13 +14,14 @@
 						:colSpan="header.colSpan"
 						:data-test="header.dataTest"
 						:draggable="header.isDraggable"
+						:style="header.style"
 						@click="(e) => handleHeaderClick(e, header)"
 						@dragenter.prevent
 						@dragleave.prevent
 						@dragover.prevent="(e) => handleCellDragOver(e, header.id)"
 						@dragstart="(e) => handleHeaderDragStart(e, header.id)"
 					>
-						<div class="kt-table-header" :style="header.style">
+						<div class="kt-table-header">
 							<FlexRender
 								:props="{ ...header.getContext() }"
 								:render="header.column.columnDef.header"
@@ -36,7 +37,10 @@
 				</tr>
 			</thead>
 			<tbody>
-				<tr v-if="isLoading" class="kt-table-row kt-table-row--is-loading">
+				<tr
+					v-if="bodyRows.length === 0 && isLoading"
+					class="kt-table-row kt-table-row--is-loading"
+				>
 					<td :colSpan="tableColSpan">
 						<slot name="loading">
 							<div
@@ -65,6 +69,7 @@
 							:key="cell.key"
 							:class="cell.classes"
 							:data-test="cell.dataTest"
+							:style="cell.style"
 							@dragenter.prevent
 							@dragleave.prevent
 							@dragover.prevent="(e) => handleCellDragOver(e, cell.columnId)"
@@ -73,7 +78,6 @@
 								:is="cell.wrapComponent.component"
 								v-bind="cell.wrapComponent.props"
 								:class="cell.wrapComponent.class"
-								:style="cell.style"
 								v-on="cell.wrapComponent.on"
 							>
 								<FlexRender
@@ -313,6 +317,7 @@ export default defineComponent({
 				'kt-table--is-drag-and-drop-active':
 					tableContext.value.internal.isDragAndDropActive,
 				'kt-table--is-scrollable': !props.isNotScrollable,
+				'skeleton rectangle': props.isLoading,
 			})),
 			table,
 			tableContext: computed(() => tableContext.value),
@@ -341,6 +346,14 @@ export default defineComponent({
 		white-space: nowrap;
 	}
 
+	&.skeleton.rectangle {
+		height: unset;
+
+		tbody {
+			mix-blend-mode: multiply;
+		}
+	}
+
 	table {
 		width: 100%;
 		border-collapse: collapse;
@@ -374,12 +387,55 @@ export default defineComponent({
 					padding: 0.4rem 0.3rem;
 					overflow: hidden;
 
+					> .yoco {
+						font-size: 0.9rem;
+						color: var(--interactive-03);
+					}
+
+					> .yoco,
+					> div:nth-child(1) {
+						transition: all 0.3s ease-out;
+					}
+				}
+
+				&.kt-table-cell--is-left-aligned,
+				&.kt-table-cell--is-center-aligned {
 					.yoco {
-						min-width: 1rem;
+						min-width: 0.9rem;
 						font-size: 0.9rem;
 						color: var(--interactive-03);
 					}
 				}
+
+				&.kt-table-cell--is-center-aligned.kt-table-cell--is-sortable
+					> .kt-table-header
+					> div:nth-child(1) {
+					margin-left: 0.9rem;
+				}
+
+				&.kt-table-cell--is-right-aligned:not(.kt-table-cell--is-sorted)
+					> .kt-table-header {
+					> div:nth-child(1) {
+						margin-left: 0.9rem;
+					}
+
+					.yoco {
+						width: 0;
+						opacity: 0;
+					}
+				}
+
+				&.kt-table-cell--is-right-aligned.kt-table-cell--is-sorted
+					> .kt-table-header {
+					> div:nth-child(1) {
+						margin-left: 0;
+					}
+
+					.yoco {
+						width: 0.9rem;
+						opacity: 1;
+					}
+				}
 			}
 
 			.kt-table-cell {