feature(KtTable): initial implementation

Co-Authored-By: Florian Wendelborn <[email protected]> Co-Authored-By: Santiago Bellardes <[email protected]>
3YOURMIND · Dec 10, 2024 · 1e408e9 · 1e408e9
1 parent 0fba74a
commit 1e408e9
Show file tree

Hide file tree

Showing 45 changed files with 2,777 additions and 96 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -14,6 +14,7 @@ import yocoPackageJSON from './packages/yoco/package.json' assert { type: 'json'
 const trustedDependencies = new Set([
 	'@metatypes/typography',
 	'@metatypes/units',
+	'@tanstack/table-core',
 	'filesize',
 	'nanoid',
 	'zod',

diff --git a/.../documentation/components/CodePreview.vue → ...entation/components/CodePreviewLegacy.vue b/.../documentation/components/CodePreview.vue → ...entation/components/CodePreviewLegacy.vue
@@ -14,7 +14,7 @@
 import { computed, defineComponent, ref } from 'vue'
 
 export default defineComponent({
-	name: 'CodePreview',
+	name: 'CodePreviewLegacy',
 	props: {
 		vueSlotLabel: { default: 'Kotti-UI', type: String },
 		styleSlotLabel: { default: 'Kotti-Style', type: String },

diff --git a/packages/documentation/data/menu.ts b/packages/documentation/data/menu.ts
@@ -22,6 +22,7 @@ import {
 	KtNavbar,
 	KtPagination,
 	KtPopover,
+	KtTable,
 	KtTableLegacy,
 	KtTag,
 	KtToaster,
@@ -173,6 +174,7 @@ export const menu: Array<Section> = [
 					makeComponentMenuItem(KtModal),
 					makeComponentMenuItem(KtPagination),
 					makeComponentMenuItem(KtPopover),
+					makeComponentMenuItem(KtTable),
 					makeComponentMenuItem(KtTableLegacy),
 					makeComponentMenuItem(KtTag),
 					makeComponentMenuItem(KtToaster),

diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -49,6 +49,7 @@
 		"fix:eslint": "yarn run check:eslint --fix",
 		"fix:prettier": "yarn run check:prettier --write",
 		"fix:stylelint": "yarn run check:stylelint --fix",
+		"test": "bun test",
 		"watch": "nuxt"
 	},
 	"version": "2.0.0"

diff --git a/packages/documentation/pages/usage/components/drawer.vue b/packages/documentation/pages/usage/components/drawer.vue
@@ -74,7 +74,7 @@ You can also customize the width of drawer by setting both `defaultWidth` and `e
 
 When the `disallowCloseOutside` flag is set, it prevents the user from accidentally closing the drawer by clicking outside of the drawer.
 
-<CodePreview>
+<CodePreviewLegacy>
 
 <div slot="vue">
 
@@ -124,7 +124,7 @@ When the `disallowCloseOutside` flag is set, it prevents the user from accidenta
 
 </div>
 
-</CodePreview>
+</CodePreviewLegacy>
 
 ## Usage
 
@@ -143,14 +143,14 @@ import { defineComponent } from 'vue'
 
 import { KtDrawer } from '@3yourmind/kotti-ui'
 
-import CodePreview from '~/components/CodePreview.vue'
+import CodePreviewLegacy from '~/components/CodePreviewLegacy.vue'
 import ComponentInfo from '~/components/ComponentInfo.vue'
 
 export default defineComponent({
 	name: 'DocumentationPageUsageComponentsDrawer',
 	components: {
 		ComponentInfo,
-		CodePreview,
+		CodePreviewLegacy,
 	},
 	data() {
 		return {

diff --git a/packages/documentation/pages/usage/components/table-legacy.vue b/packages/documentation/pages/usage/components/table-legacy.vue
@@ -23,7 +23,7 @@ _Update:_ The use of `key` is deprecated use `prop` instead of `key` when defini
 
 _For better performance in complex operations_, define a `rowKey` to index each row with.
 
-<CodePreview>
+<CodePreviewLegacy>
 
 <div slot="vue">
 
@@ -52,30 +52,12 @@ _For better performance in complex operations_, define a `rowKey` to index each
 <div slot="style">
 
 ```html
-<table>
-	<thead>
-		<th>Name</th>
-		<th>Date</th>
-		<th>Address</th>
-	</thead>
-	<tbody>
-		<tr>
-			<td>Tom</td>
-			<td>2016-05-03</td>
-			<td>No. 119, Grove St, Los Angeles</td>
-		</tr>
-		<tr>
-			<td>Jackson</td>
-			<td>2016-05-02</td>
-			<td>No. 89, Grove St, Los Angeles</td>
-		</tr>
-	</tbody>
-</table>
+Mach ma so
 ```
 
 </div>
 
-</CodePreview>
+</CodePreviewLegacy>
 
 ## Declarative form
 
@@ -466,7 +448,7 @@ To sort remotly:
 > You must use `slot-scope` prop for the `actions` slot for it to be detected.
 > Update: shorthand for v-slot is used now, instead.
 
-<CodePreview vueSlotLabel="Actions Table" styleSlotLabel="html">
+<CodePreviewLegacy vueSlotLabel="Actions Table" styleSlotLabel="html">
 <div slot="vue">
 <KtTableLegacy :rows="rows" :columns="columnsDefault">
 	<div slot="actions" slot-scope="{row, rowIndex}">
@@ -487,11 +469,11 @@ To sort remotly:
 ```
 
 </div>
-</CodePreview>
+</CodePreviewLegacy>
 
 _Update_: Preferably, since the above syntax is now deprecated, use [v-slot](https://vuejs.org/v2/guide/components-slots.html)
 
-<CodePreview vueSlotLabel="v-slot syntax" styleSlotLabel="shorthand">
+<CodePreviewLegacy vueSlotLabel="v-slot syntax" styleSlotLabel="shorthand">
 <div slot="vue">
 
 ```html
@@ -514,13 +496,13 @@ _Update_: Preferably, since the above syntax is now deprecated, use [v-slot](htt
 ```
 
 </div>
-</CodePreview>
+</CodePreviewLegacy>
 
 ## Expandable
 
 `isExpandable` enables expandability of the row**s**, defined on `<KtTableLegacy/>`. You use the `slot="expand"` to define the template that shows on expansion.
 
-<CodePreview vueSlotLabel="Expandable Table" styleSlotLabel="html">
+<CodePreviewLegacy vueSlotLabel="Expandable Table" styleSlotLabel="html">
 <div slot="vue">
 <KtTableLegacy :rows="rows" :columns="columnsDefault" isExpandable>
 <div slot="expand" slot-scope="{ row, rowIndex }">
@@ -542,13 +524,13 @@ _Update_: Preferably, since the above syntax is now deprecated, use [v-slot](htt
 ```
 
 </div>
-</CodePreview>
+</CodePreviewLegacy>
 
 The default behavior only allows you to expand one row at a time; expanding one row would trigger any currently-expanded rows to shrink back.
 
 If you want to allow for the expansion of multiple rows at a time, set the `expandMultiple` flag on `<KtTableLegacy />`, as well.
 
-<CodePreview vueSlotLabel="Expandable Table" styleSlotLabel="html">
+<CodePreviewLegacy vueSlotLabel="Expandable Table" styleSlotLabel="html">
 <div slot="vue">
 <KtTableLegacy :rows="rows" :columns="columnsDefault" isExpandable expandMultiple>
 <div slot="expand" slot-scope="{ row, rowIndex }">
@@ -569,7 +551,7 @@ If you want to allow for the expansion of multiple rows at a time, set the `expa
 ```
 
 </div>
-</CodePreview>
+</CodePreviewLegacy>
 
 ## Custom Render
 
@@ -590,7 +572,7 @@ It is possible to customize parts (columns) of the table by passing your own ren
 - `renderHeader` &rarr; custom render fn, to render a custom element in the header of the column. Instead you can use, slot='header'
 - `renderCell` &rarr; custom render fn, to render a custom element in the cells of the column. Instead use a default slot.
 
-<CodePreview vueSlotLabel="Custom Render Table" styleSlotLabel="html">
+<CodePreviewLegacy vueSlotLabel="Custom Render Table" styleSlotLabel="html">
 <div slot="vue" >
 	<KtTableLegacy
 		:rows="rows"
@@ -632,7 +614,7 @@ It is possible to customize parts (columns) of the table by passing your own ren
 ```
 
 </div>
-</CodePreview>
+</CodePreviewLegacy>
 
 ```jsx
 {
@@ -680,7 +662,7 @@ It is possible to customize parts (columns) of the table by passing your own ren
 }
 ```
 
-<CodePreview vueSlotLabel="Custom Loading" styleSlotLabel="html">
+<CodePreviewLegacy vueSlotLabel="Custom Loading" styleSlotLabel="html">
 <div slot="vue">
 	<KtTableLegacy
 		:rows="rows"
@@ -708,9 +690,9 @@ It is possible to customize parts (columns) of the table by passing your own ren
 ```
 
 </div>
-</CodePreview>
+</CodePreviewLegacy>
 
-<CodePreview vueSlotLabel="Empty Table" styleSlotLabel="html">
+<CodePreviewLegacy vueSlotLabel="Empty Table" styleSlotLabel="html">
 <div slot="vue">
 <KtTableLegacy
 	:rows="[]"
@@ -737,7 +719,7 @@ It is possible to customize parts (columns) of the table by passing your own ren
 ```
 
 </div>
-</CodePreview>
+</CodePreviewLegacy>
 
 ```js
 renderLoading() {
@@ -750,7 +732,7 @@ renderEmpty() {
 
 You can also use slots instead of render props. [`slot="loading"`, `slot="empty"`, `slot="header"`, `slot="default"`].
 
-<CodePreview vueSlotLabel="Loading Slot" styleSlotLabel="html">
+<CodePreviewLegacy vueSlotLabel="Loading Slot" styleSlotLabel="html">
 <div slot="vue">
 <KtTableLegacy :rows="rows" :columns="columnsDefault" loading>
 	<div slot="loading">
@@ -768,9 +750,9 @@ You can also use slots instead of render props. [`slot="loading"`, `slot="empty"
 ```
 
 </div>
-</CodePreview>
+</CodePreviewLegacy>
 
-<CodePreview vueSlotLabel="Empty Slot" styleSlotLabel="html">
+<CodePreviewLegacy vueSlotLabel="Empty Slot" styleSlotLabel="html">
 <div slot="vue">
 <KtTableLegacy :rows="emptyRows" :columns="columnsDefault">
 	<div slot="empty">
@@ -791,9 +773,9 @@ You can also use slots instead of render props. [`slot="loading"`, `slot="empty"
 ```
 
 </div>
-</CodePreview>
+</CodePreviewLegacy>
 
-<CodePreview vueSlotLabel="header/default slots" styleSlotLabel="html">
+<CodePreviewLegacy vueSlotLabel="header/default slots" styleSlotLabel="html">
 <div slot="vue">
 <KtTableLegacy :rows="rows">
 <KtTableLegacyColumn
@@ -839,7 +821,7 @@ You can also use slots instead of render props. [`slot="loading"`, `slot="empty"
 ```
 
 </div>
-</CodePreview>
+</CodePreviewLegacy>
 
 ### Provider/Consumer and Mixin
 
@@ -862,7 +844,7 @@ _Notes_:
 
 > There’s also the _deprecated_ `KtTableColumnsStateMixin`.
 
-<CodePreview vueSlotLabel="Consumer/Provider Table" styleSlotLabel="html">
+<CodePreviewLegacy vueSlotLabel="Consumer/Provider Table" styleSlotLabel="html">
 <div slot="vue">
 <KtTableLegacyProvider>
 	<div>
@@ -949,7 +931,7 @@ _Notes_:
 ```
 
 </div>
-</CodePreview>
+</CodePreviewLegacy>
 
 ```js
 {
@@ -1112,7 +1094,7 @@ import {
 } from '@3yourmind/kotti-ui'
 import { Kotti } from '@3yourmind/kotti-ui'
 
-import CodePreview from '~/components/CodePreview.vue'
+import CodePreviewLegacy from '~/components/CodePreviewLegacy.vue'
 import ComponentInfo from '~/components/ComponentInfo.vue'
 import { info } from '~/utilities/toaster'
 
@@ -1145,7 +1127,7 @@ const rows = [
 export default {
 	name: 'DocumentationPageUsageComponentsTable',
 	components: {
-		CodePreview,
+		CodePreviewLegacy,
 		ComponentInfo,
 		KtAvatar,
 		KtBanner,