From f09e4f9488fbf38fac0c0d1882726cbc2ae04f6e Mon Sep 17 00:00:00 2001
From: Valeriy Sinevich <zohan33333@gmail.com>
Date: Fri, 27 Jun 2025 01:30:40 +0300
Subject: [PATCH 1/2] fix(Table): make data and columns reactive in Table
 component

---
 src/runtime/components/Table.vue |  8 ++++--
 test/components/Table.spec.ts    | 46 +++++++++++++++++++++++++++++++-
 2 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 1c7d608153..5aa8f48308 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -232,8 +232,12 @@ const tableRef = ref<HTMLTableElement | null>(null)
 
 const tableApi = useVueTable({
   ...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
-  data,
-  columns: columns.value,
+  get data() {
+    return data.value
+  },
+  get columns() {
+    return columns.value
+  },
   meta: meta.value,
   getCoreRowModel: getCoreRowModel(),
   ...(props.globalFilterOptions || {}),
diff --git a/test/components/Table.spec.ts b/test/components/Table.spec.ts
index 690eed094d..91ca7a52eb 100644
--- a/test/components/Table.spec.ts
+++ b/test/components/Table.spec.ts
@@ -1,5 +1,7 @@
-import { h } from 'vue'
+import { h, ref, computed } from 'vue'
 import { describe, it, expect } from 'vitest'
+import { flushPromises } from '@vue/test-utils'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { UCheckbox, UButton, UBadge, UDropdownMenu } from '#components'
 import Table, { type TableProps, type TableSlots, type TableColumn } from '../../src/runtime/components/Table.vue'
 import ComponentRender from '../component-render'
@@ -168,4 +170,46 @@ describe('Table', () => {
     const html = await ComponentRender(nameOrHtml, options, Table)
     expect(html).toMatchSnapshot()
   })
+
+  it('reactive columns', async () => {
+    const wrapper = await mountSuspended({
+      components: { Table },
+      setup() {
+        const filter = ref<1 | 2>(1)
+
+        const columns = computed<TableColumn<typeof data[number]>[]>(() => [
+          {
+            accessorKey: 'id'
+          },
+          ...(filter.value === 2
+            ? [
+                {
+                  accessorKey: 'amount',
+                  header: () => h('div', { ['data-test-th']: 'amount' }, 'Amount')
+                } satisfies TableColumn<typeof data[number]>
+              ]
+            : [])
+        ])
+
+        function onClick() {
+          filter.value = 2
+        }
+
+        return { data, columns, onClick }
+      },
+      template: `
+            <div>
+              <button @click="onClick">Change filter</button>
+              <Table :data :columns />
+            </div>
+          `
+    })
+
+    expect(wrapper.find('[data-test-th="amount"]').exists()).toBeFalsy()
+
+    wrapper.find('button').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.find('[data-test-th="amount"]').exists()).toBeTruthy()
+  })
 })

From 510d1a48fa7de9293003bb3aa0cd2f3efbc6ef1d Mon Sep 17 00:00:00 2001
From: Valeriy Sinevich <zohan33333@gmail.com>
Date: Sat, 28 Jun 2025 00:29:57 +0300
Subject: [PATCH 2/2] cleanup

---
 src/runtime/components/Table.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 5aa8f48308..37a85a3aab 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -232,9 +232,7 @@ const tableRef = ref<HTMLTableElement | null>(null)
 
 const tableApi = useVueTable({
   ...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
-  get data() {
-    return data.value
-  },
+  data,
   get columns() {
     return columns.value
   },