wip

packages/documentation/data/menu.ts

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

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

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

packages/documentation/pages/usage/components/standard-table.vue

@@ -0,0 +1,225 @@
+<template lang="md">
+<ComponentInfo v-bind="{ component }" />
+
+<h3 v-text="'Local Pagination'" />
+<KtStandardTable id="example-local-data">
+	<template #headerActions>
+		<KtButton label="Some Action" />
+	</template>
+	<template #subHeaderActions>
+		<KtButton label="Another Action" />
+	</template>
+</KtStandardTable>
+
+<h3 v-text="'Remote Pagination'" />
+<KtStandardTable
+	id="example-remote-data"
+	v-on:update:dataFetchDependencies="fetchData"
+>
+	<template #headerActions>
+		<KtButton label="Some Action" />
+	</template>
+	<template #subHeaderActions>
+		<KtButton label="Another Action" />
+	</template>
+</KtStandardTable>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+
+import { KtButton, KtStandardTable, useKottiStandardTable } from '@3yourmind/kotti-ui'
+import { Kotti } from '@3yourmind/kotti-ui'
+
+import { todos } from './data/standard-table'
+
+import ComponentInfo from '~/components/ComponentInfo.vue'
+
+type TodoRow = {
+	id: number 
+	todo: string
+	completed: boolean
+	userId: number
+}
+type RecipeRow = {
+	id: number
+	name: string
+	ingredients: string[]
+	instructions: string[]
+	prepTimeMinutes: number
+	cookTimeMinutes: number
+	difficulty: string
+	cuisine: string
+	rating: number
+}
+
+export default defineComponent({
+	name: 'DocumentationPageUsageComponentsStandardTable',
+	components: {
+		ComponentInfo,
+		KtButton,
+		KtStandardTable,
+	},
+	setup() {
+		const isLoadingRecipes = ref(false)
+
+		const todosColumns = ref<Kotti.Table.Column<TodoRow>[]>([
+			{
+				display: { decimalPlaces: 0, type: 'numerical' },
+				getData: (row: TodoRow) => row.id,
+				id: 'id',
+				isSortable: true,
+				label: 'ID',
+			},
+			{
+				display: { type: 'text' },
+				getData: (row: TodoRow) => row.todo,
+				id: 'todo',
+				isSortable: true,
+				label: 'Todo',
+			},
+			{
+				display: { type: 'boolean' },
+				getData: (row: TodoRow) => row.completed,
+				id: 'completed',
+				isSortable: true,
+				label: 'Completed',
+			},
+			{
+				display: { decimalPlaces: 0, type: 'numerical' },
+				getData: (row: TodoRow) => row.userId,
+				id: 'userId',
+				isSortable: true,
+				label: 'User ID',
+			},
+		])
+		const todosData = ref<TodoRow[]>(todos)
+
+		const recipesColumns = ref<Kotti.Table.Column<RecipeRow>[]>([
+			{
+				display: { decimalPlaces: 0, type: 'numerical' },
+				getData: (row: RecipeRow) => row.id,
+				id: 'id',
+				isSortable: true,
+				label: 'ID',
+			},
+			{
+				display: { type: 'text' },
+				getData: (row: RecipeRow) => row.name,
+				id: 'name',
+				isSortable: true,
+				label: 'Name',
+			},
+			{
+				display: { type: 'text' },
+				getData: (row: RecipeRow) => row.ingredients.join('; '),
+				id: 'ingredients',
+				isSortable: true,
+				label: 'Ingredients',
+			},
+			{
+				display: { decimalPlaces: 0, type: 'numerical' },
+				getData: (row: RecipeRow) => row.prepTimeMinutes,
+				id: 'prepTimeMinutes',
+				isSortable: true,
+				label: 'Prep time minutes',
+			},
+			{
+				display: { decimalPlaces: 0, type: 'numerical' },
+				getData: (row: RecipeRow) => row.cookTimeMinutes,
+				id: 'cookTimeMinutes',
+				isSortable: true,
+				label: 'Cook time minutes',
+			},
+			{
+				display: { type: 'text' },
+				getData: (row: RecipeRow) => row.difficulty,
+				id: 'difficulty',
+				isSortable: true,
+				label: 'Difficulty',
+			},
+			{
+				display: { type: 'text' },
+				getData: (row: RecipeRow) => row.cuisine,
+				id: 'cuisine',
+				isSortable: true,
+				label: 'Cuisine',
+			},
+			{
+				display: { decimalPlaces: 0, type: 'numerical' },
+				getData: (row: RecipeRow) => row.rating,
+				id: 'rating',
+				isSortable: true,
+				label: 'Rating',
+			},
+		])
+		const recipesData = ref<RecipeRow[]>([])
+		const recipesRowCount = ref(0)
+
+		return {
+			component: KtStandardTable,
+			fetchData: async ({ ordering, pagination }: Kotti.StandardTable.Events.UpdateDataFetchDependencies) => {
+				// eslint-disable-next-line no-console
+				console.log("🚀 ~ fetchData: ~ params:", { ordering, pagination })
+				isLoadingRecipes.value = true
+
+				const { pageIndex, pageSize } = pagination
+				const skip = (pageSize * pageIndex)
+				const url = `https://dummyjson.com/recipes?limit=${pageSize}&skip=${skip}`
+
+				type Response = {
+					limit: number
+					skip: number
+					total: number
+					recipes: RecipeRow[]
+				}
+
+				try {
+					const response = await fetch(url);
+
+					if (!response.ok) {
+						throw new Error(`Response status: ${response.status}`)
+					}
+
+					const { recipes, total }: Response = await response.json();
+
+					recipesData.value = recipes
+					recipesRowCount.value = total
+
+					isLoadingRecipes.value = false
+				} catch (error: unknown) {
+					// eslint-disable-next-line no-console
+					console.error((error as { message: string }).message)
+					throw error
+				}
+			},
+			isLoadingRecipes,
+			localStandardTableHook: useKottiStandardTable<TodoRow>(
+				computed(() => ({
+					columns: todosColumns.value,
+					data: todosData.value,
+					id: 'example-local-data',
+					pagination: {
+						pageSize: 5,
+						// eslint-disable-next-line no-magic-numbers
+						pageSizeOptions: [5, 10, 15, 20],
+						type: Kotti.Table.Pagination.Types.LOCAL,
+					},
+				}))
+			),
+			remoteStandardTableHook: useKottiStandardTable<RecipeRow>(
+				computed(() => ({
+					columns: recipesColumns.value,
+					data: recipesData.value,
+					id: 'example-remote-data',
+					isLoading: isLoadingRecipes.value,
+					pagination: {
+						rowCount: recipesRowCount.value,
+						type: Kotti.Table.Pagination.Types.REMOTE,
+					},
+				}))
+			),
+		}
+	},
+})
+</script>

packages/kotti-ui/source/index.ts

@@ -91,6 +91,8 @@ import { KtPopover } from './kotti-popover'
 export * from './kotti-popover'
 import { KtRow } from './kotti-row'
 export * from './kotti-row'
+import { KtStandardTable } from './kotti-standard-table'
+export * from './kotti-standard-table'
 import { KtTable } from './kotti-table'
 export * from './kotti-table'
 import {
@@ -164,6 +166,7 @@ export default {
 			KtPagination,
 			KtPopover,
 			KtRow,
+			KtStandardTable,
 			KtSplitButton,
 			KtTable,
 			KtTableLegacy,