WIP

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

@@ -21,8 +21,16 @@
 				<template v-if="settings.slots.infoActionsSlot" #info-actions>
 					<KtButton label="Some Action" />
 				</template>
-				<template v-if="settings.slots.tableSlot" #table>
-					CUSTOM CONTENT
+				<template
+					v-if="settings.slots.tableSlot"
+					#table="{ isLoading, tableId }"
+				>
+					{{ JSON.stringify({ isLoading, tableId }) }}
+					<KtTable v-bind="{ isLoading, tableId }">
+						<template #expanded-row="{ row }">
+							{{ JSON.stringify(row) }}
+						</template>
+					</KtTable>
 				</template>
 			</KtStandardTable>
 		</KtI18nContext>
@@ -260,7 +268,7 @@ export default defineComponent({
 				search: boolean
 			}
 			locale: Kotti.I18n.SupportedLanguages
-			searchPlaceholder?: Kotti.FieldText.Value
+			searchPlaceholder: Kotti.FieldText.Value
 			showInlineFilters: Kotti.FieldToggle.Value
 			slots: {
 				controlsActionsSlot: Kotti.FieldToggle.Value
@@ -278,7 +286,7 @@ export default defineComponent({
 				search: false,
 			},
 			locale: 'en-US',
-			searchPlaceholder: undefined,
+			searchPlaceholder: null,
 			showInlineFilters: false,
 			slots: {
 				controlsActionsSlot: false,
@@ -400,14 +408,14 @@ export default defineComponent({
 				: []),
 		])
 
-		useKottiStandardTable<TodoRow>(
+		useKottiStandardTable(
 			computed(() => ({
 				id: 'example-local-data',
-				pagination: {
+				initialPagination: {
 					pageSize: 5,
 					// eslint-disable-next-line no-magic-numbers
 					pageSizeOptions: [5, 10, 15, 20],
-					type: Kotti.StandardTable.PaginationType.LOCAL,
+					type: 'local',
 				},
 				storageAdapter: null,
 				table: {
@@ -420,25 +428,31 @@ export default defineComponent({
 			})),
 		)
 
-		useKottiStandardTable<RecipeRow>(
+		useKottiStandardTable(
 			computed(() => ({
 				filters: filters.value,
 				id: 'example-remote-data',
-				isLoading: isLoadingRecipes.value,
-				options: {
-					hideControls: settings.value.hideControls,
-				},
-				pagination: {
+				initialPagination: {
 					pageSize: 5,
 					// eslint-disable-next-line no-magic-numbers
 					pageSizeOptions: [5, 10, 15, 30, 50, 100],
 					rowCount: recipesRowCount.value,
-					type: Kotti.StandardTable.PaginationType.REMOTE,
+					type: 'remote',
+				},
+				isLoading: isLoadingRecipes.value,
+				options: {
+					hideControls: settings.value.hideControls,
+					popoversSize: {
+						columns: settings.value.columnsPopoverSize,
+						filters: settings.value.filtersPopoverSize,
+					},
+					searchPlaceholder: settings.value.searchPlaceholder ?? undefined,
 				},
 				storageAdapter: null,
 				table: {
 					columns: recipesColumns.value,
 					data: recipesData.value,
+					expandMode: settings.value.slots.tableSlot ? 'single' : undefined,
 					getRowBehavior: ({ row }: { row: RecipeRow }) => ({
 						id: String(row.id),
 					}),

packages/kotti-ui/source/kotti-table/KtStandardTable.vue

@@ -77,7 +77,12 @@
 			</div>
 		</div>
 		<div>
-			<slot v-if="$slots['table']" name="table" />
+			<slot
+				v-if="$scopedSlots['table']"
+				:isLoading="isLoading"
+				name="table"
+				:tableId="tableId"
+			/>
 			<KtTable
 				v-else
 				class="kt-standard-table__table"
@@ -89,16 +94,16 @@
 			<TablePageSize
 				v-bind="{
 					isLoading,
-					pageSize,
+					pageSize: tablePagination.pageSize,
 					pageSizeOptions,
 				}"
 				@updatePageSize="onUpdatePageSize"
 			/>
 			<TablePagination
 				v-bind="{
 					isLoading,
-					pageIndex,
-					pageSize,
+					pageIndex: tablePagination.pageIndex,
+					pageSize: tablePagination.pageSize,
 					rowCount,
 				}"
 				@updatePageIndex="onUpdatePageIndex"
@@ -149,8 +154,9 @@ export default defineComponent({
 		)
 
 		const filters = computed(() => standardTableContext.value.internal.filters)
-		const table = computed(() => tableContext.value.internal.table.value)
-		const tablePagination = computed(() => table.value.getState().pagination)
+		const tablePagination = computed(
+			() => standardTableContext.value.internal.pagination,
+		)
 		const options = computed(() => standardTableContext.value.internal.options)
 
 		watch(
@@ -180,8 +186,7 @@ export default defineComponent({
 				})),
 			),
 			columnVisibility: computed(
-				() =>
-					tableContext.value.internal.table.value.getState().columnVisibility,
+				() => tableContext.value.internal.visibleColumns,
 			),
 			filterTags: computed(() =>
 				appliedFilters.value
@@ -217,31 +222,24 @@ export default defineComponent({
 			onUpdateAppliedFilters: (value: KottiStandardTable.AppliedFilter[]) => {
 				standardTableContext.value.internal.setAppliedFilters(value)
 			},
-			onUpdateColumnVisivility: (
-				value: KottiStandardTable.TableColumns.Props['value'],
-			) => {
+			onUpdateColumnVisivility: (value: Record<string, boolean>) => {
 				tableContext.value.internal.table.value.setColumnVisibility(value)
 			},
-			onUpdatePageIndex: (value: number) => {
-				table.value.setPageIndex(value)
-			},
-			onUpdatePageSize: (value: number) => {
-				table.value.setPageSize(value)
-			},
+			onUpdatePageIndex: standardTableContext.value.internal.setPageIndex,
+			onUpdatePageSize: standardTableContext.value.internal.setPageSize,
 			onUpdateSearchValue: (value: string | null) => {
 				standardTableContext.value.internal.setSearchValue(value)
 			},
 			options,
-			pageIndex: computed(() => tablePagination.value.pageIndex),
-			pageSize: computed(() => tablePagination.value.pageSize),
 			pageSizeOptions: computed(
 				() => standardTableContext.value.internal.pageSizeOptions,
 			),
 			popoverFilters: computed(() =>
 				filters.value.filter((filter) => !filter.displayInline),
 			),
-			rowCount: computed(() => table.value.getRowCount()),
+			rowCount: computed(() => standardTableContext.value.internal.rowCount),
 			searchValue,
+			tablePagination,
 		}
 	},
 })

packages/kotti-ui/source/kotti-table/standard-table/api.md

@@ -2,18 +2,18 @@
 
 ## Review Comments
 
-- [ ] make sure it wraps properly
-- [ ] consider display-noning sorting indicator when inactive and showing animation when toggling making it appear
-- [ ] table looses scroll position when loading
-- [ ] should have a simpler loading state if datat is already present
-- [ ] check search placeholder and popover sizes in documentation
-- [ ] use api/internal pattern for return
-- [ ] sync pagination schema
-- [ ] simplify forwarding properties from standard table to table, some properties are not forwarded yet
-- [ ] remove local pagination
-- [ ] check useComputedRef for reactivity bugs
+- [x] make sure it wraps properly
+- [x] consider display-noning sorting indicator when inactive and showing animation when toggling making it appear
+- [x] table looses scroll position when loading
+- [x] should have a simpler loading state if datat is already present
+- [x] check search placeholder and popover sizes in documentation
+- [x] use api/internal pattern for return
+- [x] sync pagination schema
+- [x] simplify forwarding properties from standard table to table, some properties are not forwarded yet
+- [x] remove local pagination
+- [x] check useComputedRef for reactivity bugs
 - [ ] FIXMEs/TODOs
-- [ ] double-check all calls to table.getState() and other direct calls to tanstack api
+- [x] double-check all calls to table.getState() and other direct calls to tanstack api
 - [ ] prune out schemas from types.ts that don't need
 
 ## Kinds

packages/kotti-ui/source/kotti-table/standard-table/components/Columns.vue

@@ -30,17 +30,26 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, type PropType } from 'vue'
 
 import { Yoco } from '@3yourmind/yoco'
 
 import { useTranslationNamespace } from '../../../kotti-i18n/hooks'
-import { makeProps } from '../../../make-props'
-import { KottiStandardTable } from '../types'
 
 export default defineComponent({
 	name: 'TableColumns',
-	props: makeProps(KottiStandardTable.TableColumns.propsSchema),
+	props: {
+		isLoading: { default: false, type: Boolean },
+		options: {
+			required: true,
+			type: Array as PropType<{ key: string; label: string }[]>,
+		},
+		size: { default: 'md', type: String },
+		value: {
+			required: true,
+			type: Object as PropType<Record<string, boolean>>,
+		},
+	},
 	emits: ['input', 'showAll'],
 	setup(props) {
 		return {

packages/kotti-ui/source/kotti-table/standard-table/components/FilterList.vue

@@ -13,9 +13,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 
-import { makeProps } from '../../../make-props'
 import { KottiStandardTable } from '../types'
 import { getEmptyValue, isEmptyValue } from '../utilities/filters'
 
@@ -34,7 +33,17 @@ export default defineComponent({
 		NumberRangeFilter,
 		SingleSelectFilter,
 	},
-	props: makeProps(KottiStandardTable.FilterList.propsSchema),
+	props: {
+		filters: {
+			default: () => [],
+			type: Array as PropType<KottiStandardTable.FilterInternal[]>,
+		},
+		isLoading: { default: false, type: Boolean },
+		value: {
+			default: () => [],
+			type: Array as PropType<KottiStandardTable.AppliedFilter[]>,
+		},
+	},
 	emits: ['input'],
 	setup(props, { emit }) {
 		return {

packages/kotti-ui/source/kotti-table/standard-table/components/Filters.vue

@@ -33,13 +33,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 
 import { Yoco } from '@3yourmind/yoco'
 
 import { useTranslationNamespace } from '../../../kotti-i18n/hooks'
-import { makeProps } from '../../../make-props'
-import { KottiStandardTable } from '../types'
+import type { KottiStandardTable } from '../types'
 
 import FilterList from './FilterList.vue'
 
@@ -48,7 +47,19 @@ export default defineComponent({
 	components: {
 		FilterList,
 	},
-	props: makeProps(KottiStandardTable.TableFilters.propsSchema),
+	props: {
+		filters: {
+			default: () => [],
+			type: Array as PropType<KottiStandardTable.FilterInternal[]>,
+		},
+		isLoading: { default: false, type: Boolean },
+
+		size: { default: 'md', type: String },
+		value: {
+			default: () => [],
+			type: Array as PropType<KottiStandardTable.AppliedFilter[]>,
+		},
+	},
 	emits: ['input'],
 	setup() {
 		return {

packages/kotti-ui/source/kotti-table/standard-table/components/PageSize.vue

@@ -16,16 +16,18 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, type PropType } from 'vue'
 
 import type { KottiFieldSingleSelect } from '../../../kotti-field-select/types'
 import { useTranslationNamespace } from '../../../kotti-i18n/hooks'
-import { makeProps } from '../../../make-props'
-import { KottiStandardTable } from '../types'
 
 export default defineComponent({
 	name: 'TablePageSize',
-	props: makeProps(KottiStandardTable.TablePageSize.propsSchema),
+	props: {
+		isLoading: { default: false, type: Boolean },
+		pageSize: { required: true, type: Number },
+		pageSizeOptions: { required: true, type: Array as PropType<number[]> },
+	},
 	emits: ['updatePageSize'],
 	setup(props) {
 		return {

packages/kotti-ui/source/kotti-table/standard-table/components/Pagination.vue

@@ -24,13 +24,16 @@ import { Dashes } from '@metatypes/typography'
 import { computed, defineComponent } from 'vue'
 
 import { useTranslationNamespace } from '../../../kotti-i18n/hooks'
-import { makeProps } from '../../../make-props'
-import { KottiStandardTable } from '../types'
 import { pluralize } from '../utilities/translation'
 
 export default defineComponent({
 	name: 'TablePagination',
-	props: makeProps(KottiStandardTable.TablePagination.propsSchema),
+	props: {
+		isLoading: { default: false, type: Boolean },
+		pageIndex: { required: true, type: Number },
+		pageSize: { required: true, type: Number },
+		rowCount: { required: true, type: Number },
+	},
 	emits: ['updatePageIndex'],
 	setup(props) {
 		const translations = useTranslationNamespace('KtStandardTable')

packages/kotti-ui/source/kotti-table/standard-table/components/Search.vue

@@ -21,12 +21,15 @@ import { Yoco } from '@3yourmind/yoco'
 import { DEFAULT_DEBOUNCE } from '../../../constants'
 import type { KottiFieldText } from '../../../kotti-field-text/types'
 import { useTranslationNamespace } from '../../../kotti-i18n/hooks'
-import { makeProps } from '../../../make-props'
-import { KottiStandardTable } from '../types'
 
 export default defineComponent({
 	name: 'TableSearch',
-	props: makeProps(KottiStandardTable.TableSearch.propsSchema),
+	props: {
+		dataTest: { default: null, type: String },
+		isLoading: { default: false, type: Boolean },
+		placeholder: { default: null, type: String },
+		value: { default: null, type: String },
+	},
 	emits: ['input'],
 	setup(props, { emit }) {
 		const internalValue = ref<KottiFieldText.Value>(null)