fix(KtTable): fix styling issues with the table

- add spacing to header to make it properly center-aligned if sorting indicator is present - show inline loading state if rows are present - mark selected rows - improve layout of row actions
3YOURMIND · Dec 20, 2024 · 9382789 · 9382789
1 parent e554f4c
commit 9382789
Show file tree

Hide file tree

Showing 9 changed files with 143 additions and 100 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>
@@ -87,7 +83,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue'
+import { computed, defineComponent, h, ref, watch } from 'vue'
 
 import {
 	createColumnContext,
@@ -109,6 +105,7 @@ import ComponentInfo from '~/components/ComponentInfo.vue'
 type ColumnId =
 	| 'age'
 	| 'bestSkill'
+	| 'id'
 	| 'isAlive'
 	| 'lifespan'
 	| 'name'
@@ -254,35 +251,39 @@ export default defineComponent({
 			computed(() => ({
 				columns: [
 					createColumn({
-						// display: getCustomDisplay<TableRow>({
-						// 	align: 'left',
-						// 	disableCellClick: true,
-						// 	isNumeric: false,
-						// 	render: (value) => {
-						// 		return h('div', {}, [
-						// 			h('em', { style: { color: 'green' } }, value.id),
-						// 			` ${value.name} is `,
-						// 			h('b', {}, value.age),
-						// 		])
-						// 	},
-						// }),
-						display: getDisplay({ minimumDecimalPlaces: 1, type: 'numerical' }),
-						getData: (row) => row.age,
+						display: getDisplay({ type: 'integer' }),
+						getData: (row) => row.id,
+						id: 'id',
+						isSortable: true,
+						label: '# Id',
+					}),
+					createColumn({
+						display: getCustomDisplay<TableRow>({
+							align: 'left',
+							disableCellClick: true,
+							isNumeric: false,
+							render: (value) => {
+								return h('div', {}, [
+									h('em', { style: { color: 'green' } }, value.id),
+									` ${value.name} is `,
+									h('b', {}, value.age),
+								])
+							},
+						}),
+						getData: (row) => row,
 						id: 'age',
 						isSortable: true,
 						label: 'age (click disabled)',
-						minWidth: '300px',
 					}),
 					createColumn({
 						display: booleanDisplay,
 						getData: (row) => row.isAlive,
 						id: 'isAlive',
 						label: 'Aliveness',
-						width: '300px',
 					}),
 					createColumn({
 						display: getCustomDisplay({
-							align: 'right',
+							align: 'center',
 							disableCellClick: false,
 							isNumeric: false,
 							render: (value: string) => value.replaceAll('e', 'x'),
@@ -291,40 +292,35 @@ export default defineComponent({
 						id: 'lifespan',
 						isSortable: true,
 						label: 'Lifespan (click allowed)',
-						maxWidth: '100px',
 					}),
-					...(booleanFlags.value.hasDragAndDrop
-						? [
-								createColumn({
-									display: textDisplay,
-									getData: (row) => row.name,
-									id: 'name',
-									isSortable: true,
-									label: 'Name',
-								}),
-								createColumn({
-									display: textDisplay,
-									getData: (row) => row.purpose,
-									id: 'purpose',
-									isSortable: true,
-									label: 'Primary Purpose',
-								}),
-								createColumn({
-									display: textDisplay,
-									getData: (row) => row.speed,
-									id: 'speed',
-									isSortable: true,
-									label: 'Speed',
-								}),
-								createColumn({
-									display: dateDisplay,
-									getData: (row) => new Date(row.someDate),
-									id: 'randomDate',
-									isSortable: true,
-									label: 'Random Date',
-								}),
-							]
-						: []),
+					createColumn({
+						display: textDisplay,
+						getData: (row) => row.name,
+						id: 'name',
+						isSortable: true,
+						label: 'Name',
+					}),
+					createColumn({
+						display: textDisplay,
+						getData: (row) => row.purpose,
+						id: 'purpose',
+						isSortable: true,
+						label: 'Primary Purpose',
+					}),
+					createColumn({
+						display: textDisplay,
+						getData: (row) => row.speed,
+						id: 'speed',
+						isSortable: true,
+						label: 'Speed',
+					}),
+					createColumn({
+						display: dateDisplay,
+						getData: (row) => new Date(row.someDate),
+						id: 'randomDate',
+						isSortable: true,
+						label: 'Random Date',
+					}),
 					createColumn({
 						display: textDisplay,
 						getData: (row) => row.bestSkill,
@@ -400,6 +396,7 @@ export default defineComponent({
 				age: (mode) => getNumericalSorter<TableRow>((row) => row.age, mode),
 				bestSkill: (mode) =>
 					getTextSorter<TableRow>((row) => row.bestSkill, mode),
+				id: (mode) => getNumericalSorter<TableRow>((row) => row.id, mode),
 				isAlive: (mode) =>
 					getNumericalSorter<TableRow>((row) => (row.isAlive ? 1 : 0), mode),
 				lifespan: (mode) =>
@@ -449,7 +446,6 @@ export default defineComponent({
 					label: 'table has drag and drop',
 				},
 				{
-					isDisabled: booleanFlags.value.isLoading,
 					key: 'isEmpty',
 					label: 'table is empty',
 				},
@@ -462,11 +458,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/package.json b/packages/kotti-ui/package.json
@@ -5,7 +5,7 @@
 	},
 	"dependencies": {
 		"@3yourmind/vue-use-tippy": "3.x",
-		"@3yourmind/yoco": "^2.8.0",
+		"@3yourmind/yoco": "^2.9.0",
 		"@metatypes/typography": "^0.5.0",
 		"@tanstack/table-core": "^8.20.5",
 		"big.js": "^6.2.1",