@veristone/nuxt-v-app 0.2.5 → 0.2.6

package/app/components/V/A/Table/README.md

@@ -32,13 +32,15 @@ The primary table component. Wraps Nuxt UI's `<UTable>` with a toolbar, filter c
 | `data` | `unknown[]` | **required** | Array of row data |
 | `columns` | `TableColumn[]` | **required** | TanStack column definitions |
 | `loading` | `boolean` | `false` | Shows loading skeleton on initial load |
-| `initialPageLimit` | `number` | `10` | Rows per page |
+| `initialPageLimit` | `number` | `10` | Rows per page (client-side mode) |
 | `selectable` | `boolean` | `false` | Enable row selection checkboxes |
 | `filters` | `FilterDefinition[]` | — | Filter dropdown definitions |
 | `onRefresh` | `() => void \| Promise<void>` | — | Shows refresh button; called on click |
 | `onRowClick` | `(row: unknown) => void` | — | Called when a row is clicked |
 | `defaultSort` | `string` | — | Column accessorKey to sort by on mount |
 | `defaultSortDesc` | `boolean` | `false` | Sort descending by default |
+| `manualPagination` | `boolean` | `false` | Enable server-side pagination mode |
+| `total` | `number` | — | Total row count from server (required for manualPagination) |
 
 #### v-model Bindings
 
@@ -46,6 +48,9 @@ The primary table component. Wraps Nuxt UI's `<UTable>` with a toolbar, filter c
 |-------|------|-------------|
 | `sorting` | `SortingState` | TanStack sorting state |
 | `filterValues` | `Record<string, unknown>` | Active filter values |
+| `globalFilter` | `string` | Search/query filter |
+| `page` | `number` | Current page (1-based, server-side mode) |
+| `itemsPerPage` | `number` | Page size (server-side mode) |
 
 #### Slots
 
@@ -371,6 +376,58 @@ const columns = [
 </template>
 ```
 
+### Server-side pagination
+
+```vue
+<script setup>
+const columns = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+  { accessorKey: 'status', header: 'Status' },
+]
+
+// Server-side pagination state
+const page = ref(1)
+const itemsPerPage = ref(20)
+const total = ref(0)
+const users = ref([])
+const loading = ref(false)
+
+// Fetch data from API with pagination params
+async function fetchUsers() {
+  loading.value = true
+  try {
+    const response = await $fetch('/api/users', {
+      query: {
+        page: page.value,
+        limit: itemsPerPage.value,
+      }
+    })
+    users.value = response.data
+    total.value = response.total
+  } finally {
+    loading.value = false
+  }
+}
+
+// React to pagination changes
+watch([page, itemsPerPage], fetchUsers, { immediate: true })
+</script>
+
+<template>
+  <VATable
+    name="Users"
+    :data="users"
+    :columns="columns"
+    :loading="loading"
+    :manual-pagination="true"
+    :total="total"
+    v-model:page="page"
+    v-model:items-per-page="itemsPerPage"
+  />
+</template>
+```
+
 ---
 
 ## Date Auto-Detection

package/app/components/V/A/Table/index.vue

@@ -106,7 +106,13 @@
 				:loading="loading"
 				:row-selection-options="{ enableRowSelection: props.selectable }"
 				:sorting-options="{ getSortedRowModel: getSortedRowModel() }"
-				:pagination-options="{ getPaginationRowModel: getPaginationRowModel() }"
+				:pagination-options="{
+					getPaginationRowModel: getPaginationRowModel(),
+					manualPagination: props.manualPagination,
+					...(props.manualPagination && props.total !== undefined
+						? { pageCount: Math.ceil(props.total / pagination.pageSize) }
+						: {})
+				}"
 				:ui="{
 					th: 'px-3 py-2',
 					td: 'px-3 py-2',
@@ -148,7 +154,7 @@
 						:items-per-page="pagination.pageSize"
 						:total="totalRows"
 						size="sm"
-						@update:page="(p) => (pagination.pageIndex = p - 1)"
+						@update:page="onPageChange"
 					/>
 				</div>
 			</div>
@@ -184,8 +190,13 @@ const props = withDefaults(defineProps<{
 	defaultSort?: string;
 	/** Default sort direction */
 	defaultSortDesc?: boolean;
+	/** Enable server-side pagination mode */
+	manualPagination?: boolean;
+	/** Total row count from server (required for manualPagination) */
+	total?: number;
 }>(), {
 	selectable: false,
+	manualPagination: false,
 });
 
 // Sorting state - v-model support
@@ -197,6 +208,41 @@ const filterValues = defineModel<Record<string, unknown>>("filterValues", {
 	default: () => ({}),
 });
 
+// Server-side pagination - v-model support (1-based page)
+const page = defineModel<number>("page", { default: 1 });
+const itemsPerPage = defineModel<number>("itemsPerPage", { default: 10 });
+
+// Internal pagination state (0-based pageIndex for TanStack)
+const pagination = ref({
+	pageIndex: 0,
+	pageSize: 10,
+});
+
+// Initialize pagination from props and sync with v-model
+onMounted(() => {
+	const defaultPageSize = props.initialPageLimit ?? 10;
+	pagination.value.pageSize = defaultPageSize;
+	
+	// Sync itemsPerPage if not already set by parent
+	if (itemsPerPage.value === 10 && defaultPageSize !== 10) {
+		itemsPerPage.value = defaultPageSize;
+	}
+});
+
+// Sync internal pagination with v-model when in manual mode
+watch(
+	[page, itemsPerPage],
+	([newPage, newItemsPerPage]) => {
+		if (props.manualPagination) {
+			pagination.value = {
+				pageIndex: newPage - 1, // Convert 1-based to 0-based
+				pageSize: newItemsPerPage,
+			};
+		}
+	},
+	{ immediate: true }
+);
+
 const refreshing = ref(false);
 const slots = useSlots()
 
@@ -289,12 +335,6 @@ onMounted(() => {
 	}
 });
 
-// Pagination state
-const pagination = ref({
-	pageIndex: 0,
-	pageSize: props.initialPageLimit ?? 10,
-});
-
 // Column visibility state
 const columnVisibility = ref<Record<string, boolean>>({});
 
@@ -446,6 +486,9 @@ function handleRowClick(row: any) {
 
 // Computed pagination info
 const totalRows = computed(() => {
+	if (props.manualPagination && props.total !== undefined) {
+		return props.total;
+	}
 	return table.value?.tableApi?.getFilteredRowModel().rows.length ?? 0;
 });
 
@@ -461,17 +504,35 @@ const endIndex = computed(() => {
 
 // Handle page size change
 const onPageSizeChange = (size: number) => {
-	pagination.value = {
-		pageIndex: 0,
-		pageSize: size,
-	};
+	if (props.manualPagination) {
+		// Emit to parent for server-side handling
+		itemsPerPage.value = size;
+		page.value = 1; // Reset to first page
+	} else {
+		pagination.value = {
+			pageIndex: 0,
+			pageSize: size,
+		};
+	}
 };
 
-// Reset pagination when data changes
+// Handle page change from UPagination
+const onPageChange = (newPage: number) => {
+	if (props.manualPagination) {
+		// Emit to parent for server-side handling
+		page.value = newPage;
+	} else {
+		pagination.value.pageIndex = newPage - 1;
+	}
+};
+
+// Reset pagination when data changes (client-side only)
 watch(
 	() => props.data,
 	() => {
-		pagination.value.pageIndex = 0;
+		if (!props.manualPagination) {
+			pagination.value.pageIndex = 0;
+		}
 	}
 );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veristone/nuxt-v-app",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Veristone Nuxt App Layer - Shared components, composables, and layouts",
   "type": "module",
   "private": false,