fix(Table): only forward necessary props

[benjamincanac]

🔗 Linked issue

• Resolves Global Filter causes getFilteredRowModel to be empty #5010
• Resolves UTable combined sorting, pagination & filter example #5485
• Resolves [UTable] programmatic filtering is not working with global filtering enabled #5482
• Resolves Loss of reactivity in UITable #5318
• Resolves Pagination state not resetting after data change in UTable #5132

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR fixes table reactivity issues by being more selective about which props are forwarded to TanStack Table.

Changes:

1. Replaced reactiveOmit with reactivePick: Instead of passing all props except a blocklist, now explicitly picks only the TanStack Table core options that should be forwarded (_features, autoResetAll, debugAll, debugCells, debugColumns, debugHeaders, debugRows, debugTable, defaultColumn, getRowId, getSubRows, initialState, mergeOptions, renderFallbackValue).
2. Conditional state callback registration: State change callbacks (onSortingChange, onColumnFiltersChange, etc.) are only registered when the corresponding v-model is explicitly provided, preventing unwanted prop forwarding that could interfere with TanStack Table's internal state management.
3. Removed default values from defineModel: Allows proper detection of whether a prop was explicitly provided vs. using internal state.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@5527

commit: 3ef539b

[vercel]

Additional Suggestion:

The Payment type definition is missing firstName and lastName properties that are being created in the data and referenced in table columns. Additionally, the addElement function creates Payment objects without these required properties.

View Details

📝 Patch Details

diff --git a/playgrounds/nuxt/app/pages/components/table.vue b/playgrounds/nuxt/app/pages/components/table.vue
index 63cf2fda..b52896cc 100644
--- a/playgrounds/nuxt/app/pages/components/table.vue
+++ b/playgrounds/nuxt/app/pages/components/table.vue
@@ -20,6 +20,8 @@ type Payment = {
   status: 'paid' | 'failed' | 'refunded'
   email: string
   amount: number
+  firstName: string
+  lastName: string
 }
 
 const table = useTemplateRef('table')
@@ -224,11 +226,15 @@ const pagination = ref({
 })
 
 function addElement() {
+  const firstName = firstNames[Math.floor(Math.random() * firstNames.length)]!
+  const lastName = lastNames[Math.floor(Math.random() * lastNames.length)]!
   data.value.unshift({
     id: currentID.value.toString(),
     date: new Date().toISOString(),
+    firstName,
+    lastName,
     status: 'paid',
-    email: 'new@example.com',
+    email: `${firstName}.${lastName}@${domains[Math.floor(Math.random() * domains.length)]}`,
     amount: Math.random() * 1000
   })
   currentID.value++

Analysis

Missing firstName and lastName properties in Payment type definition

What fails: The Payment type definition in playgrounds/nuxt/app/pages/components/table.vue (lines 17-23) is missing firstName and lastName properties that are created in the data initialization (lines 34-46) and referenced in table column definitions (lines 131-138). Additionally, the addElement() function (lines 226-235) creates Payment objects without these properties, causing TypeScript type errors and runtime issues when rendering new rows.

How to reproduce:

1. Open playgrounds/nuxt/app/pages/components/table.vue
2. Note the Payment type definition at lines 17-23 contains only: id, date, status, email, amount
3. Note the data initialization at lines 34-46 creates objects with firstName and lastName properties
4. Note the table columns at lines 131-138 access firstName and lastName via accessorKey
5. Click the "Add element" button at runtime (which calls addElement() at lines 226-235)
6. The newly added row will fail to display the First Name and Last Name columns because the object is created without these properties

Result: TypeScript type mismatch errors and incomplete table rows when using the "Add element" feature. The table columns expect firstName and lastName properties on all Payment objects, but the addElement() function creates incomplete Payment objects missing these required properties.

Expected: The Payment type should include firstName: string and lastName: string properties, and the addElement() function should populate these properties when creating new Payment objects, matching the pattern used in the initial data generation.