@veristone/nuxt-v-app 0.2.5 → 0.2.7

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

@@ -32,20 +32,26 @@ 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 |
+| `showSearch` | `boolean` | `false` | Show the built-in search input in the toolbar |
 | `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 (disables client-side sorting and filtering) |
+| `total` | `number` | — | Total row count from server (required for manualPagination) |
 
 #### v-model Bindings
 
 | Model | Type | Description |
 |-------|------|-------------|
 | `sorting` | `SortingState` | TanStack sorting state |
-| `filterValues` | `Record<string, unknown>` | Active filter values |
+| `filterValues` | `Record<string, unknown>` | Active filter values (for built-in filters) |
+| `globalFilter` | `string` | Search/query filter (for built-in search) |
+| `page` | `number` | Current page (1-based, server-side mode) |
+| `itemsPerPage` | `number` | Page size (server-side mode) |
 
 #### Slots
 
@@ -371,6 +377,75 @@ const columns = [
 </template>
 ```
 
+### Server-side pagination
+
+When `manualPagination` is enabled, the table disables client-side sorting and filtering. The parent component owns all query logic — it watches the table's `sorting`, `page`, and `itemsPerPage` models, builds API params, and fetches data.
+
+```vue
+<script setup>
+const columns = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+  { accessorKey: 'status', header: 'Status' },
+]
+
+const sorting = ref([])
+const page = ref(1)
+const itemsPerPage = ref(20)
+const total = ref(0)
+const users = ref([])
+const loading = ref(false)
+
+// Parent-owned search (not built into the table)
+const search = ref('')
+
+// Build API params from table state + parent state
+const apiParams = computed(() => {
+  const params = { page: page.value, limit: itemsPerPage.value }
+  const sort = sorting.value[0]
+  if (sort?.id) {
+    params.sort_by = sort.id
+    params.sort_order = sort.desc ? 'desc' : 'asc'
+  }
+  if (search.value.trim()) {
+    params.search = search.value.trim()
+  }
+  return params
+})
+
+async function fetchUsers() {
+  loading.value = true
+  try {
+    const response = await $fetch('/api/users', { query: apiParams.value })
+    users.value = response.data
+    total.value = response.total
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(apiParams, fetchUsers, { immediate: true, deep: true })
+</script>
+
+<template>
+  <!-- Parent-owned search input -->
+  <UInput v-model="search" placeholder="Search..." icon="i-lucide-search" class="mb-4 max-w-xs" />
+
+  <VATable
+    name="Users"
+    :data="users"
+    :columns="columns"
+    :loading="loading"
+    :manual-pagination="true"
+    :total="total"
+    v-model:sorting="sorting"
+    v-model:page="page"
+    v-model:items-per-page="itemsPerPage"
+    :on-refresh="fetchUsers"
+  />
+</template>
+```
+
 ---
 
 ## Date Auto-Detection

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

@@ -40,6 +40,7 @@
 				<!-- Normal Toolbar (shown when no items selected) -->
 				<div v-else class="flex items-center gap-2">
 					<UInput
+						v-if="showSearch"
 						v-model="globalFilter"
 						placeholder="Search..."
 						icon="i-lucide-search"
@@ -97,7 +98,7 @@
 			<UTable
 				ref="table"
 				v-model:sorting="sorting"
-				v-model:global-filter="globalFilter"
+				v-model:global-filter="tableGlobalFilter"
 				v-model:pagination="pagination"
 				v-model:column-visibility="columnVisibility"
 				v-model:row-selection="rowSelection"
@@ -105,8 +106,14 @@
 				:columns="tableColumns"
 				:loading="loading"
 				:row-selection-options="{ enableRowSelection: props.selectable }"
-				:sorting-options="{ getSortedRowModel: getSortedRowModel() }"
-				:pagination-options="{ getPaginationRowModel: getPaginationRowModel() }"
+				:sorting-options="sortingOptions"
+				: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 +155,7 @@
 						:items-per-page="pagination.pageSize"
 						:total="totalRows"
 						size="sm"
-						@update:page="(p) => (pagination.pageIndex = p - 1)"
+						@update:page="onPageChange"
 					/>
 				</div>
 			</div>
@@ -157,7 +164,7 @@
 </template>
 
 <script setup lang="ts">
-import { getCoreRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/vue-table";
+import { getPaginationRowModel } from "@tanstack/vue-table";
 import type { TableColumn, DropdownMenuItem } from "@nuxt/ui";
 import type { SortingState } from "@tanstack/vue-table";
 import { h, resolveComponent, useSlots } from 'vue';
@@ -177,15 +184,18 @@ const props = withDefaults(defineProps<{
 	loading?: boolean;
 	initialPageLimit?: number;
 	selectable?: boolean;
+	showSearch?: boolean;
 	filters?: FilterDefinition[];
 	onRefresh?: () => void | Promise<void>;
 	onRowClick?: (row: unknown) => void;
-	/** Default column to sort by */
 	defaultSort?: string;
-	/** Default sort direction */
 	defaultSortDesc?: boolean;
+	manualPagination?: boolean;
+	total?: number;
 }>(), {
 	selectable: false,
+	showSearch: false,
+	manualPagination: false,
 });
 
 // Sorting state - v-model support
@@ -197,6 +207,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()
 
@@ -239,14 +284,6 @@ function clearSelection() {
 	rowSelection.value = {};
 }
 
-watch(
-	() => filterValues.value,
-	() => {
-		clearSelection();
-	},
-	{ deep: true }
-);
-
 // Table ref for accessing TanStack API
 const table = ref<{ tableApi?: any } | null>(null);
 
@@ -282,6 +319,30 @@ watch(
 // Global filter - v-model support
 const globalFilter = defineModel<string>("globalFilter", { default: "" });
 
+// In manual mode, prevent TanStack from filtering client-side
+const tableGlobalFilter = computed({
+	get: () => props.manualPagination ? undefined : globalFilter.value,
+	set: (v: string) => { globalFilter.value = v ?? '' },
+});
+
+// Reset page when sorting changes
+watch(
+	sorting,
+	() => {
+		clearSelection();
+		if (props.manualPagination) {
+			page.value = 1;
+		} else {
+			pagination.value = { ...pagination.value, pageIndex: 0 };
+		}
+	},
+	{ deep: true, flush: 'sync' }
+);
+
+const sortingOptions = computed(() =>
+	props.manualPagination ? { manualSorting: true } : undefined
+);
+
 // Initialize default sorting if provided
 onMounted(() => {
 	if (props.defaultSort && sorting.value.length === 0) {
@@ -289,12 +350,6 @@ onMounted(() => {
 	}
 });
 
-// Pagination state
-const pagination = ref({
-	pageIndex: 0,
-	pageSize: props.initialPageLimit ?? 10,
-});
-
 // Column visibility state
 const columnVisibility = ref<Record<string, boolean>>({});
 
@@ -446,6 +501,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 +519,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/app/pages/playground/tables.vue

@@ -1,247 +1,459 @@
 <script setup lang="ts">
-import type { TableColumn } from '@nuxt/ui'
+import type { TableColumn } from "@nuxt/ui";
 
 definePageMeta({
-  title: 'Table Components'
-})
+  title: "Table Components",
+});
 
 // Sample data
 const users = ref([
-  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active', department: 'Engineering', salary: 95000, createdAt: '2024-01-15T10:30:00Z' },
-  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Editor', status: 'active', department: 'Marketing', salary: 72000, createdAt: '2024-02-20T14:00:00Z' },
-  { id: 3, name: 'Bob Wilson', email: 'bob@example.com', role: 'Viewer', status: 'pending', department: 'Sales', salary: 68000, createdAt: '2024-03-10T09:15:00Z' },
-  { id: 4, name: 'Alice Brown', email: 'alice@example.com', role: 'Admin', status: 'active', department: 'Engineering', salary: 105000, createdAt: '2024-04-05T11:45:00Z' },
-  { id: 5, name: 'Charlie Davis', email: 'charlie@example.com', role: 'Editor', status: 'inactive', department: 'Design', salary: 78000, createdAt: '2024-05-01T16:20:00Z' },
-  { id: 6, name: 'Diana Miller', email: 'diana@example.com', role: 'Viewer', status: 'active', department: 'HR', salary: 62000, createdAt: '2024-06-12T08:00:00Z' },
-  { id: 7, name: 'Edward Lee', email: 'edward@example.com', role: 'Admin', status: 'active', department: 'Engineering', salary: 112000, createdAt: '2024-07-18T13:30:00Z' },
-  { id: 8, name: 'Fiona Garcia', email: 'fiona@example.com', role: 'Editor', status: 'pending', department: 'Marketing', salary: 75000, createdAt: '2024-08-22T10:00:00Z' },
-  { id: 9, name: 'George Martinez', email: 'george@example.com', role: 'Viewer', status: 'active', department: 'Sales', salary: 71000, createdAt: '2024-09-03T15:45:00Z' },
-  { id: 10, name: 'Hannah Robinson', email: 'hannah@example.com', role: 'Editor', status: 'active', department: 'Design', salary: 82000, createdAt: '2024-10-14T12:10:00Z' },
-  { id: 11, name: 'Ivan Thompson', email: 'ivan@example.com', role: 'Admin', status: 'inactive', department: 'Engineering', salary: 98000, createdAt: '2024-11-25T09:30:00Z' },
-  { id: 12, name: 'Julia White', email: 'julia@example.com', role: 'Viewer', status: 'active', department: 'HR', salary: 58000, createdAt: '2024-12-01T17:00:00Z' }
-])
+  {
+    id: 1,
+    name: "John Doe",
+    email: "john@example.com",
+    role: "Admin",
+    status: "active",
+    department: "Engineering",
+    salary: 95000,
+    createdAt: "2024-01-15T10:30:00Z",
+  },
+  {
+    id: 2,
+    name: "Jane Smith",
+    email: "jane@example.com",
+    role: "Editor",
+    status: "active",
+    department: "Marketing",
+    salary: 72000,
+    createdAt: "2024-02-20T14:00:00Z",
+  },
+  {
+    id: 3,
+    name: "Bob Wilson",
+    email: "bob@example.com",
+    role: "Viewer",
+    status: "pending",
+    department: "Sales",
+    salary: 68000,
+    createdAt: "2024-03-10T09:15:00Z",
+  },
+  {
+    id: 4,
+    name: "Alice Brown",
+    email: "alice@example.com",
+    role: "Admin",
+    status: "active",
+    department: "Engineering",
+    salary: 105000,
+    createdAt: "2024-04-05T11:45:00Z",
+  },
+  {
+    id: 5,
+    name: "Charlie Davis",
+    email: "charlie@example.com",
+    role: "Editor",
+    status: "inactive",
+    department: "Design",
+    salary: 78000,
+    createdAt: "2024-05-01T16:20:00Z",
+  },
+  {
+    id: 6,
+    name: "Diana Miller",
+    email: "diana@example.com",
+    role: "Viewer",
+    status: "active",
+    department: "HR",
+    salary: 62000,
+    createdAt: "2024-06-12T08:00:00Z",
+  },
+  {
+    id: 7,
+    name: "Edward Lee",
+    email: "edward@example.com",
+    role: "Admin",
+    status: "active",
+    department: "Engineering",
+    salary: 112000,
+    createdAt: "2024-07-18T13:30:00Z",
+  },
+  {
+    id: 8,
+    name: "Fiona Garcia",
+    email: "fiona@example.com",
+    role: "Editor",
+    status: "pending",
+    department: "Marketing",
+    salary: 75000,
+    createdAt: "2024-08-22T10:00:00Z",
+  },
+  {
+    id: 9,
+    name: "George Martinez",
+    email: "george@example.com",
+    role: "Viewer",
+    status: "active",
+    department: "Sales",
+    salary: 71000,
+    createdAt: "2024-09-03T15:45:00Z",
+  },
+  {
+    id: 10,
+    name: "Hannah Robinson",
+    email: "hannah@example.com",
+    role: "Editor",
+    status: "active",
+    department: "Design",
+    salary: 82000,
+    createdAt: "2024-10-14T12:10:00Z",
+  },
+  {
+    id: 11,
+    name: "Ivan Thompson",
+    email: "ivan@example.com",
+    role: "Admin",
+    status: "inactive",
+    department: "Engineering",
+    salary: 98000,
+    createdAt: "2024-11-25T09:30:00Z",
+  },
+  {
+    id: 12,
+    name: "Julia White",
+    email: "julia@example.com",
+    role: "Viewer",
+    status: "active",
+    department: "HR",
+    salary: 58000,
+    createdAt: "2024-12-01T17:00:00Z",
+  },
+]);
 
 // Basic columns using the new Nuxt UI TableColumn format
-const basicColumns: TableColumn<typeof users.value[0]>[] = [
-  { accessorKey: 'name', header: 'Name' },
-  { accessorKey: 'email', header: 'Email' },
-  { accessorKey: 'role', header: 'Role' },
-  { accessorKey: 'status', header: 'Status' }
-]
+const basicColumns: TableColumn<(typeof users.value)[0]>[] = [
+  { accessorKey: "name", header: "Name" },
+  { accessorKey: "email", header: "Email" },
+  { accessorKey: "role", header: "Role" },
+  { accessorKey: "status", header: "Status" },
+];
 
 // Full columns with more fields
-const fullColumns: TableColumn<typeof users.value[0]>[] = [
-  { accessorKey: 'name', header: 'Name' },
-  { accessorKey: 'email', header: 'Email' },
-  { accessorKey: 'role', header: 'Role' },
-  { accessorKey: 'department', header: 'Department' },
-  { accessorKey: 'salary', header: 'Salary' },
-  { accessorKey: 'status', header: 'Status' },
-  { accessorKey: 'createdAt', header: 'Created' }
-]
+const fullColumns: TableColumn<(typeof users.value)[0]>[] = [
+  { accessorKey: "name", header: "Name" },
+  { accessorKey: "email", header: "Email" },
+  { accessorKey: "role", header: "Role" },
+  { accessorKey: "department", header: "Department" },
+  { accessorKey: "salary", header: "Salary" },
+  { accessorKey: "status", header: "Status" },
+  { accessorKey: "createdAt", header: "Created" },
+];
 
 // Columns using presets
-const { presets } = useXATableColumns()
+const { presets } = useXATableColumns();
 
-const presetColumns: TableColumn<typeof users.value[0]>[] = [
-  presets.text('name', 'Name'),
-  presets.email('email', 'Email'),
-  presets.badge('status', 'Status', {
-    colorMap: { active: 'success', pending: 'warning', inactive: 'neutral' }
+const presetColumns: TableColumn<(typeof users.value)[0]>[] = [
+  presets.text("name", "Name"),
+  presets.email("email", "Email"),
+  presets.badge("status", "Status", {
+    colorMap: { active: "success", pending: "warning", inactive: "neutral" },
   }),
-  presets.currency('salary', 'Salary'),
-  presets.date('createdAt', 'Joined', { format: 'relative' })
-]
+  presets.currency("salary", "Salary"),
+  presets.date("createdAt", "Joined", { format: "relative" }),
+];
 
 // Products data for variety
 const products = ref([
-  { id: 1, name: 'MacBook Pro 14"', category: 'Laptops', price: 1999, stock: 45, rating: 4.8 },
-  { id: 2, name: 'iPhone 15 Pro', category: 'Phones', price: 999, stock: 120, rating: 4.9 },
-  { id: 3, name: 'AirPods Pro', category: 'Audio', price: 249, stock: 200, rating: 4.7 },
-  { id: 4, name: 'iPad Air', category: 'Tablets', price: 599, stock: 80, rating: 4.6 },
-  { id: 5, name: 'Apple Watch Ultra', category: 'Wearables', price: 799, stock: 35, rating: 4.8 },
-  { id: 6, name: 'Mac Mini M2', category: 'Desktops', price: 699, stock: 60, rating: 4.5 }
-])
-
-const productColumns: TableColumn<typeof products.value[0]>[] = [
-  { accessorKey: 'name', header: 'Product' },
-  { accessorKey: 'category', header: 'Category' },
-  { accessorKey: 'price', header: 'Price' },
-  { accessorKey: 'stock', header: 'Stock' },
-  { accessorKey: 'rating', header: 'Rating' }
-]
+  {
+    id: 1,
+    name: 'MacBook Pro 14"',
+    category: "Laptops",
+    price: 1999,
+    stock: 45,
+    rating: 4.8,
+  },
+  {
+    id: 2,
+    name: "iPhone 15 Pro",
+    category: "Phones",
+    price: 999,
+    stock: 120,
+    rating: 4.9,
+  },
+  {
+    id: 3,
+    name: "AirPods Pro",
+    category: "Audio",
+    price: 249,
+    stock: 200,
+    rating: 4.7,
+  },
+  {
+    id: 4,
+    name: "iPad Air",
+    category: "Tablets",
+    price: 599,
+    stock: 80,
+    rating: 4.6,
+  },
+  {
+    id: 5,
+    name: "Apple Watch Ultra",
+    category: "Wearables",
+    price: 799,
+    stock: 35,
+    rating: 4.8,
+  },
+  {
+    id: 6,
+    name: "Mac Mini M2",
+    category: "Desktops",
+    price: 699,
+    stock: 60,
+    rating: 4.5,
+  },
+]);
+
+const productColumns: TableColumn<(typeof products.value)[0]>[] = [
+  { accessorKey: "name", header: "Product" },
+  { accessorKey: "category", header: "Category" },
+  { accessorKey: "price", header: "Price" },
+  { accessorKey: "stock", header: "Stock" },
+  { accessorKey: "rating", header: "Rating" },
+];
 
 // Filter definitions
 const statusFilters = [
-  { label: 'Status', key: 'status', options: [
-    { label: 'Active', value: 'active' },
-    { label: 'Pending', value: 'pending' },
-    { label: 'Inactive', value: 'inactive' }
-  ]},
-  { label: 'Role', key: 'role', options: [
-    { label: 'Admin', value: 'Admin' },
-    { label: 'Editor', value: 'Editor' },
-    { label: 'Viewer', value: 'Viewer' }
-  ]}
-]
+  {
+    label: "Status",
+    key: "status",
+    options: [
+      { label: "Active", value: "active" },
+      { label: "Pending", value: "pending" },
+      { label: "Inactive", value: "inactive" },
+    ],
+  },
+  {
+    label: "Role",
+    key: "role",
+    options: [
+      { label: "Admin", value: "Admin" },
+      { label: "Editor", value: "Editor" },
+      { label: "Viewer", value: "Viewer" },
+    ],
+  },
+];
 
 // Event handlers
 const handleRowClick = (row: any) => {
-  console.log('Row clicked:', row)
-}
+  console.log("Row clicked:", row);
+};
 </script>
 
 <template>
   <UDashboardPanel grow>
     <UContainer>
-    <div class="py-8 space-y-12">
-      <div>
-        <h1 class="text-3xl font-bold mb-4">VATable Components Showcase</h1>
-        <p class="text-gray-600 dark:text-gray-400">
-          TanStack-powered data tables with search, sort, filter, export, selection, and pagination.
-        </p>
-      </div>
+      <div class="py-8 space-y-12">
+        <div>
+          <h1 class="text-3xl font-bold mb-4">VATable Components Showcase</h1>
+          <p class="text-gray-600 dark:text-gray-400">
+            TanStack-powered data tables with search, sort, filter, export,
+            selection, and pagination.
+          </p>
+        </div>
+
+        <!-- Basic Table -->
+        <section>
+          <h2 class="text-2xl font-semibold mb-4">Basic Table</h2>
+          <p class="text-gray-600 dark:text-gray-400 mb-4">
+            Simple table with minimal configuration.
+          </p>
+          <ClientOnly>
+            <VATable
+              name="Basic Users"
+              :data="users.slice(0, 5)"
+              :columns="basicColumns"
+            />
+          </ClientOnly>
+        </section>
+
+        <!-- Preset-Based Columns -->
+        <section>
+          <h2 class="text-2xl font-semibold mb-4">Preset-Based Columns</h2>
+          <p class="text-gray-600 dark:text-gray-400 mb-4">
+            Using useXATableColumns presets for automatic cell rendering (badge,
+            currency, date).
+          </p>
+          <ClientOnly>
+            <VATable
+              name="Users with Presets"
+              :data="users"
+              :columns="presetColumns"
+            />
+          </ClientOnly>
+        </section>
+
+        <!-- Table with Filters -->
+        <section>
+          <h2 class="text-2xl font-semibold mb-4">Table with Filters</h2>
+          <p class="text-gray-600 dark:text-gray-400 mb-4">
+            Inline filter dropdowns with active filter chips.
+          </p>
+          <ClientOnly>
+            <VATable
+              name="Filtered Users"
+              :data="users"
+              :show-search="true"
+              :columns="basicColumns"
+              :filters="statusFilters"
+            />
+          </ClientOnly>
+        </section>
+
+        <!-- Selectable Table -->
+        <section>
+          <h2 class="text-2xl font-semibold mb-4">Selectable Table</h2>
+          <p class="text-gray-600 dark:text-gray-400 mb-4">
+            Multi-select with checkbox column and bulk action support.
+          </p>
+          <ClientOnly>
+            <VATable
+              name="Select Users"
+              :data="users.slice(0, 6)"
+              :columns="basicColumns"
+              selectable
+            >
+              <template #bulk-actions="{ count, clear }">
+                <span class="text-sm text-muted">{{ count }} selected</span>
+                <UButton
+                  size="xs"
+                  color="neutral"
+                  variant="outline"
+                  label="Clear"
+                  @click="clear"
+                />
+                <UButton
+                  size="xs"
+                  color="error"
+                  variant="soft"
+                  label="Delete Selected"
+                />
+              </template>
+            </VATable>
+          </ClientOnly>
+        </section>
 
-      <!-- Basic Table -->
-      <section>
-        <h2 class="text-2xl font-semibold mb-4">Basic Table</h2>
-        <p class="text-gray-600 dark:text-gray-400 mb-4">Simple table with minimal configuration.</p>
-        <ClientOnly>
-          <VATable
-            name="Basic Users"
-            :data="users.slice(0, 5)"
-            :columns="basicColumns"
-          />
-        </ClientOnly>
-      </section>
-
-      <!-- Preset-Based Columns -->
-      <section>
-        <h2 class="text-2xl font-semibold mb-4">Preset-Based Columns</h2>
-        <p class="text-gray-600 dark:text-gray-400 mb-4">Using useXATableColumns presets for automatic cell rendering (badge, currency, date).</p>
-        <ClientOnly>
-          <VATable
-            name="Users with Presets"
-            :data="users"
-            :columns="presetColumns"
-          />
-        </ClientOnly>
-      </section>
-
-      <!-- Table with Filters -->
-      <section>
-        <h2 class="text-2xl font-semibold mb-4">Table with Filters</h2>
-        <p class="text-gray-600 dark:text-gray-400 mb-4">Inline filter dropdowns with active filter chips.</p>
-        <ClientOnly>
-          <VATable
-            name="Filtered Users"
-            :data="users"
-            :columns="basicColumns"
-            :filters="statusFilters"
-          />
-        </ClientOnly>
-      </section>
-
-      <!-- Selectable Table -->
-      <section>
-        <h2 class="text-2xl font-semibold mb-4">Selectable Table</h2>
-        <p class="text-gray-600 dark:text-gray-400 mb-4">Multi-select with checkbox column and bulk action support.</p>
-        <ClientOnly>
-          <VATable
-            name="Select Users"
-            :data="users.slice(0, 6)"
-            :columns="basicColumns"
-            selectable
-          >
-            <template #bulk-actions="{ count, clear }">
-              <span class="text-sm text-muted">{{ count }} selected</span>
-              <UButton size="xs" color="neutral" variant="outline" label="Clear" @click="clear" />
-              <UButton size="xs" color="error" variant="soft" label="Delete Selected" />
-            </template>
-          </VATable>
-        </ClientOnly>
-      </section>
-
-      <!-- Table with Row Actions -->
-      <section>
-        <h2 class="text-2xl font-semibold mb-4">Table with Row Actions</h2>
-        <p class="text-gray-600 dark:text-gray-400 mb-4">Custom actions column via slot.</p>
-        <ClientOnly>
-          <VATable
-            name="Users with Actions"
-            :data="users.slice(0, 5)"
-            :columns="basicColumns"
-            :on-row-click="handleRowClick"
-          >
-            <template #actions-cell="{ row }">
-              <div class="flex items-center justify-end gap-1">
-                <UButton icon="i-lucide-eye" color="neutral" variant="ghost" size="xs" @click.stop="() => console.log('View', row.original)" />
-                <UButton icon="i-lucide-pencil" color="neutral" variant="ghost" size="xs" @click.stop="() => console.log('Edit', row.original)" />
-                <UButton icon="i-lucide-trash-2" color="error" variant="ghost" size="xs" @click.stop="() => console.log('Delete', row.original)" />
-              </div>
-            </template>
-          </VATable>
-        </ClientOnly>
-      </section>
-
-      <!-- Table with Refresh -->
-      <section>
-        <h2 class="text-2xl font-semibold mb-4">Table with Refresh</h2>
-        <p class="text-gray-600 dark:text-gray-400 mb-4">Refresh button with loading state.</p>
-        <ClientOnly>
-          <VATable
-            name="Products"
-            :data="products"
-            :columns="productColumns"
-            :on-refresh="async () => { await new Promise(r => setTimeout(r, 1000)) }"
-          />
-        </ClientOnly>
-      </section>
-
-      <!-- Default Sort -->
-      <section>
-        <h2 class="text-2xl font-semibold mb-4">Default Sort</h2>
-        <p class="text-gray-600 dark:text-gray-400 mb-4">Table pre-sorted by salary descending.</p>
-        <ClientOnly>
-          <VATable
-            name="Sorted Users"
-            :data="users"
-            :columns="fullColumns"
-            default-sort="salary"
-            :default-sort-desc="true"
-          />
-        </ClientOnly>
-      </section>
-
-      <!-- Loading State -->
-      <section>
-        <h2 class="text-2xl font-semibold mb-4">Loading State</h2>
-        <p class="text-gray-600 dark:text-gray-400 mb-4">Full-screen loading state for initial data fetch.</p>
-        <ClientOnly>
-          <VATable
-            name="Loading Table"
-            :data="[]"
-            :columns="basicColumns"
-            :loading="true"
-          />
-        </ClientOnly>
-      </section>
-
-      <!-- VADataTable Section -->
-      <section>
-        <h2 class="text-2xl font-semibold mb-4">VADataTable</h2>
-        <p class="text-gray-600 dark:text-gray-400 mb-4">Dashboard-integrated table with UDashboardPanel wrapper.</p>
-        <ClientOnly>
-          <VADataTable
-            title="Users (DataTable)"
-            :rows="users.slice(0, 5)"
-            :columns="basicColumns"
-            :show-search="false"
-            :show-pagination="false"
-          />
-        </ClientOnly>
-      </section>
-    </div>
+        <!-- Table with Row Actions -->
+        <section>
+          <h2 class="text-2xl font-semibold mb-4">Table with Row Actions</h2>
+          <p class="text-gray-600 dark:text-gray-400 mb-4">
+            Custom actions column via slot.
+          </p>
+          <ClientOnly>
+            <VATable
+              name="Users with Actions"
+              :data="users.slice(0, 5)"
+              :columns="basicColumns"
+              :on-row-click="handleRowClick"
+            >
+              <template #actions-cell="{ row }">
+                <div class="flex items-center justify-end gap-1">
+                  <UButton
+                    icon="i-lucide-eye"
+                    color="neutral"
+                    variant="ghost"
+                    size="xs"
+                    @click.stop="() => console.log('View', row.original)"
+                  />
+                  <UButton
+                    icon="i-lucide-pencil"
+                    color="neutral"
+                    variant="ghost"
+                    size="xs"
+                    @click.stop="() => console.log('Edit', row.original)"
+                  />
+                  <UButton
+                    icon="i-lucide-trash-2"
+                    color="error"
+                    variant="ghost"
+                    size="xs"
+                    @click.stop="() => console.log('Delete', row.original)"
+                  />
+                </div>
+              </template>
+            </VATable>
+          </ClientOnly>
+        </section>
+
+        <!-- Table with Refresh -->
+        <section>
+          <h2 class="text-2xl font-semibold mb-4">Table with Refresh</h2>
+          <p class="text-gray-600 dark:text-gray-400 mb-4">
+            Refresh button with loading state.
+          </p>
+          <ClientOnly>
+            <VATable
+              name="Products"
+              :data="products"
+              :columns="productColumns"
+              :on-refresh="
+                async () => {
+                  await new Promise((r) => setTimeout(r, 1000));
+                }
+              "
+            />
+          </ClientOnly>
+        </section>
+
+        <!-- Default Sort -->
+        <section>
+          <h2 class="text-2xl font-semibold mb-4">Default Sort</h2>
+          <p class="text-gray-600 dark:text-gray-400 mb-4">
+            Table pre-sorted by salary descending.
+          </p>
+          <ClientOnly>
+            <VATable
+              name="Sorted Users"
+              :data="users"
+              :columns="fullColumns"
+              default-sort="salary"
+              :default-sort-desc="true"
+            />
+          </ClientOnly>
+        </section>
+
+        <!-- Loading State -->
+        <section>
+          <h2 class="text-2xl font-semibold mb-4">Loading State</h2>
+          <p class="text-gray-600 dark:text-gray-400 mb-4">
+            Full-screen loading state for initial data fetch.
+          </p>
+          <ClientOnly>
+            <VATable
+              name="Loading Table"
+              :data="[]"
+              :columns="basicColumns"
+              :loading="true"
+            />
+          </ClientOnly>
+        </section>
+
+        <!-- VADataTable Section -->
+        <section>
+          <h2 class="text-2xl font-semibold mb-4">VADataTable</h2>
+          <p class="text-gray-600 dark:text-gray-400 mb-4">
+            Dashboard-integrated table with UDashboardPanel wrapper.
+          </p>
+          <ClientOnly>
+            <VADataTable
+              title="Users (DataTable)"
+              :rows="users.slice(0, 5)"
+              :columns="basicColumns"
+              :show-search="false"
+              :show-pagination="false"
+            />
+          </ClientOnly>
+        </section>
+      </div>
     </UContainer>
   </UDashboardPanel>
 </template>

package/package.json

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