Kt standard table wip

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',
 	'zod',
 ])

packages/documentation/components/CodePreview.vue → packages/documentation/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 },

packages/documentation/data/menu.ts

@@ -22,6 +22,8 @@ import {
 	KtNavbar,
 	KtPagination,
 	KtPopover,
+	KtStandardTable,
+	KtTable,
 	KtTableLegacy,
 	KtTag,
 	KtToaster,
@@ -173,6 +175,8 @@ export const menu: Array<Section> = [
 					makeComponentMenuItem(KtModal),
 					makeComponentMenuItem(KtPagination),
 					makeComponentMenuItem(KtPopover),
+					makeComponentMenuItem(KtStandardTable),
+					makeComponentMenuItem(KtTable),
 					makeComponentMenuItem(KtTableLegacy),
 					makeComponentMenuItem(KtTag),
 					makeComponentMenuItem(KtToaster),

packages/documentation/pages/usage/components/data/standard-table.ts

@@ -0,0 +1,162 @@
+export const todos = [
+	{
+		completed: true,
+		dueDate: '2025-01-20',
+		effort: 2,
+		id: 1,
+		priority: 'Medium',
+		tag: 'tag-1',
+		todo: 'Watch a classic movie',
+		userId: 68,
+	},
+	{
+		completed: false,
+		dueDate: '2025-02-20',
+		effort: 8,
+		id: 2,
+		priority: 'Medium',
+		tag: 'tag-1',
+		todo: 'Contribute code or a monetary donation to an open-source software project',
+		userId: 69,
+	},
+	{
+		completed: false,
+		dueDate: '2025-01-10',
+		effort: 0.5,
+		id: 3,
+		priority: 'Medium',
+		tag: 'tag-3',
+		todo: 'Invite some friends over for a game night',
+		userId: 104,
+	},
+	{
+		completed: true,
+		dueDate: '2025-03-20',
+		effort: 0.5,
+		id: 4,
+		priority: 'Medium',
+		tag: 'tag-2',
+		todo: "Text a friend you haven't talked to in a long time",
+		userId: 2,
+	},
+	{
+		completed: true,
+		dueDate: '2025-01-20',
+		effort: 2,
+		id: 5,
+		priority: 'High',
+		tag: 'tag-2',
+		todo: "Plan a vacation you've always wanted to take",
+		userId: 162,
+	},
+	{
+		completed: false,
+		dueDate: '2025-04-20',
+		effort: 1,
+		id: 6,
+		priority: 'Low',
+		tag: 'tag-1',
+		todo: 'Clean out car',
+		userId: 71,
+	},
+	{
+		completed: true,
+		dueDate: '2025-01-01',
+		effort: 2,
+		id: 7,
+		priority: 'Low',
+		tag: 'tag-1',
+		todo: 'Create a cookbook with favorite recipes',
+		userId: 53,
+	},
+	{
+		completed: false,
+		dueDate: '2025-02-28',
+		effort: 4,
+		id: 8,
+		priority: 'Medium',
+		tag: 'tag-1',
+		todo: 'Create a compost pile',
+		userId: 13,
+	},
+	{
+		completed: true,
+		dueDate: '2025-02-01',
+		effort: 1,
+		id: 9,
+		priority: 'Medium',
+		tag: 'tag-1',
+		todo: 'Take a hike at a local park',
+		userId: 37,
+	},
+	{
+		completed: true,
+		dueDate: '2025-03-20',
+		effort: 4,
+		id: 10,
+		priority: 'Medium',
+		tag: 'tag-2',
+		todo: 'Take a class at local community center that interests you',
+		userId: 65,
+	},
+	{
+		completed: true,
+		dueDate: '2025-10-20',
+		effort: 2,
+		id: 11,
+		priority: 'Low',
+		tag: 'tag-3',
+		todo: 'Research a topic interested in',
+		userId: 130,
+	},
+	{
+		completed: false,
+		dueDate: '2025-03-01',
+		effort: 4,
+		id: 12,
+		priority: 'High',
+		tag: 'tag-1',
+		todo: 'Plan a trip to another country',
+		userId: 140,
+	},
+	{
+		completed: false,
+		dueDate: '2025-06-01',
+		effort: 40,
+		id: 13,
+		priority: 'High',
+		tag: 'tag-2',
+		todo: 'Improve touch typing',
+		userId: 178,
+	},
+	{
+		completed: false,
+		dueDate: '2025-11-20',
+		effort: 30,
+		id: 14,
+		priority: 'Low',
+		tag: 'tag-1',
+		todo: 'Learn Express.js',
+		userId: 194,
+	},
+	{
+		completed: false,
+		dueDate: '2025-12-20',
+		effort: 20,
+		id: 15,
+		priority: 'Low',
+		tag: 'tag-3',
+		todo: 'Learn calligraphy',
+		userId: 80,
+	},
+	{
+		completed: true,
+		dueDate: '2025-01-10',
+		effort: 10,
+		id: 16,
+		priority: 'Medium',
+		tag: 'tag-1',
+		todo: 'Go to the gym',
+		userId: 142,
+	},
+]

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 {